/* ============ omri case.css — single case_study only ============ */
.pad{padding-block:clamp(64px,9vw,132px);}
/* reveal + cascade */
/* Reveal */
.reveal .mask > span{display:block;transform:translateY(110%);transition:transform 1s var(--ease);}
.reveal.in .mask > span{transform:translateY(0);}
.fade{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.in .fade{opacity:1;transform:translateY(0);}
.in .fade.d1{transition-delay:.18s;} .in .fade.d2{transition-delay:.34s;} .in .fade.d3{transition-delay:.5s;}
/* Section entrance cascade — 120ms per element */
.reveal .cx{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in .cx{opacity:1;transform:none;}
.reveal.in .cx[data-cx="1"]{transition-delay:.0s;}
.reveal.in .cx[data-cx="2"]{transition-delay:.12s;}
.reveal.in .cx[data-cx="3"]{transition-delay:.24s;}
.reveal.in .cx[data-cx="4"]{transition-delay:.36s;}
.reveal.in .cx[data-cx="5"]{transition-delay:.48s;}

/* Copper focus ring */
:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:2px;}
/* breadcrumb..cta */

/* Breadcrumb */
.breadcrumb{padding:130px 0 0;}
.breadcrumb .wrap{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.proto.is-he .breadcrumb .wrap{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
.breadcrumb a{color:var(--ink-soft);transition:color .2s;}
.breadcrumb a:hover{color:var(--cta);}
.breadcrumb .sep{opacity:.5;}

/* Case hero */
.case-hero{padding-block:clamp(40px,6vw,80px) clamp(30px,4vw,56px);}
.case-hero .row{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
.case-title{font-size:clamp(36px,6vw,92px);line-height:.88;color:var(--ink);}
.case-title .mask{display:block;overflow:hidden;padding-block:.04em;}
.case-title .mask > span{display:block;transform:translateY(112%);transition:transform 1s var(--ease);will-change:transform;}
.case-hero.in .case-title .mask:nth-child(1) > span{transform:translateY(0);transition-delay:.0s;}
.case-hero.in .case-title .mask:nth-child(2) > span{transform:translateY(0);transition-delay:.08s;}
.case-hero .eyebrow{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.case-hero.in .eyebrow{opacity:1;transform:none;}
.case-lead{font-size:clamp(17px,1.4vw,20px);color:var(--ink-soft);line-height:1.55;max-width:44ch;}
@media(max-width:820px){ .case-hero .row{grid-template-columns:1fr;gap:24px;align-items:flex-start;} }

/* Hebrew case-study — uniform, slightly larger eyebrows across the page (excludes the small Philosophy sub-label) */
.proto.is-he #top .eyebrow{font-size:16px;}
/* Eyebrow-style kickers that aren't .eyebrow — match at 16px (gallery tag, next-project label) */
.proto.is-he #top .og-side-item .tag{font-size:16px;}
.proto.is-he #top .og-mobile .tag{font-size:16px;}
.proto.is-he #top .next .lbl{font-size:16px;}
/* Hero headline: Aran per line (400 light / 500 heavy) */
.proto.is-he .case-title .lt{font-family:var(--aran);font-weight:400;}
.proto.is-he .case-title .hv{font-family:var(--aran);font-weight:500;}
/* Closing CTA headline: Aran per line (400 light / 500 heavy) — Aran only ships 400/500 */
.proto.is-he .cta .stack .lt{font-family:var(--aran);font-weight:400;}
.proto.is-he .cta .stack .hv{font-family:var(--aran);font-weight:500;}

/* Meta strip */
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);padding:clamp(22px,2.4vw,32px) 0;}
.meta-item .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:10px;}
.proto.is-he .meta-item .k{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
.meta-item .v{font-family:var(--serif);font-size:clamp(17px,1.6vw,22px);color:var(--ink);line-height:1.15;font-weight:400;letter-spacing:-.01em;}
.proto.is-he .meta-item .v{font-family:var(--he);font-weight:600;}
.meta-item .v a{color:var(--cta);}
.meta-item .v a:hover{color:var(--cta-dk);}
@media(max-width:720px){ .meta{grid-template-columns:1fr 1fr;gap:24px;} }

/* Cover image */
.cover{padding-block:clamp(28px,4vw,60px);}
.cover-media{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--tile);box-shadow:0 60px 100px -60px rgba(28,27,25,.4);}
.cover-media image-slot{position:absolute;inset:0;width:100%;height:100%;}

/* Two-column overview */
.overview{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);}
.overview h3{font-size:clamp(24px,2.6vw,34px);color:var(--ink);margin-bottom:18px;line-height:1;}
.overview p{font-size:16.5px;color:var(--ink-soft);line-height:1.65;max-width:52ch;}
.overview p + p{margin-top:14px;}
@media(max-width:820px){ .overview{grid-template-columns:1fr;gap:36px;} }

/* Big statement / beat */
.beat h2{font-size:clamp(32px,5vw,72px);line-height:.94;max-width:20ch;}
.beat p{font-size:clamp(16px,1.4vw,19px);color:var(--ink-soft);max-width:56ch;margin-top:22px;}

/* Feature list "what I built" */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px);margin-top:clamp(34px,4vw,52px);}
.feat{border-top:1px solid var(--line-l);padding-top:22px;}
.feat .n{font-family:var(--mono);font-size:12px;color:var(--cta);letter-spacing:.14em;}
.proto.is-he .feat .n{font-family:var(--he);letter-spacing:.02em;}
.feat h4{font-size:clamp(19px,1.8vw,24px);color:var(--ink);margin:14px 0 10px;line-height:1.1;}
.feat p{color:var(--ink-soft);font-size:15px;line-height:1.55;}
@media(max-width:820px){ .feats{grid-template-columns:1fr;gap:8px;} .feat{padding-top:26px;} }

/* Gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(30px,4vw,50px);}
.gal .shot{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--tile);}
.gal .shot.wide{grid-column:1 / -1;aspect-ratio:16/6;}
.gal image-slot{position:absolute;inset:0;width:100%;height:100%;}

/* Bento grid variant */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(140px,15vw,220px);gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,4vw,48px);}
.bento .shot{position:relative;border-radius:10px;overflow:hidden;background:var(--tile);aspect-ratio:auto;}
.bento .b1{grid-column:1 / span 4;grid-row:1 / span 1;}
.bento .b2{grid-column:5 / span 2;grid-row:1 / span 2;}
.bento .b3{grid-column:1 / span 2;grid-row:2 / span 1;}
.bento .b4{grid-column:3 / span 2;grid-row:2 / span 1;}
.bento image-slot{position:absolute;inset:0;width:100%;height:100%;}
@media(max-width:720px){ .gal{grid-template-columns:1fr;} .gal .shot.wide{aspect-ratio:16/10;} .bento{grid-template-columns:1fr;grid-auto-rows:auto;} .bento .shot{aspect-ratio:16/10;grid-column:1 / -1 !important;grid-row:auto !important;} }

/* Results — dark stat band */
.results{background:var(--dark);color:#EEEFE7;border-radius:20px;padding:clamp(40px,5vw,72px);position:relative;overflow:hidden;}
.results::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 100% 0%,rgba(31,93,76,.32),transparent 60%);}
.results-in{position:relative;z-index:1;}
.results .eyebrow{color:var(--green-lt);}
.results h2{color:#F4F7F5;font-size:clamp(28px,4vw,56px);max-width:22ch;line-height:.94;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:clamp(34px,4vw,54px);}
.stat{border-top:1px solid rgba(237,242,239,.24);padding-top:22px;display:flex;flex-direction:column;}
.stat .big{font-family:var(--serif);font-weight:700;font-size:clamp(46px,6vw,90px);line-height:.9;color:#F4F7F5;letter-spacing:-.03em;}
.proto.is-he .stat .big{font-family:var(--he);font-weight:900;}
.stat .big .u{font-family:var(--mono);font-size:.34em;font-weight:400;color:var(--cta);letter-spacing:.04em;margin-inline-start:.15em;}
.proto.is-he .stat .big .u{font-family:var(--he);}
.stat.stat-unit-block .big{display:flex;flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:.35em;}
.stat.stat-unit-block .big .n{line-height:.9;flex:0 0 auto;}
.stat.stat-unit-block .big .u{margin-inline-start:0;font-size:clamp(13px,1vw,16px);letter-spacing:.14em;text-transform:uppercase;line-height:1.15;flex:1 1 auto;min-width:0;}
.proto.is-he .stat.stat-unit-block .big .u{letter-spacing:.02em;text-transform:none;font-weight:600;}
.stat .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,239,231,.6);margin-top:auto;padding-top:14px;}
.proto.is-he .stat .lbl{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
@media(max-width:820px){
	.stats{grid-template-columns:1fr;gap:10px;}
	.stat{padding-top:24px;}
	.stat .big,.stat.stat-unit-block .big{display:flex;flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:.4em;}
	.stat .big .n{flex:0 0 auto;min-width:2.4em;text-align:start;}
	.stat .big .u{margin-inline-start:0;}
}

/* Testimonial */
.quote-wrap{max-width:960px;margin-inline:auto;text-align:center;}
.quote-wrap .mark{display:inline-block;font-family:var(--serif);font-size:72px;color:var(--cta);line-height:.3;transform:translateY(.35em);}
.quote{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.4vw,44px);line-height:1.18;letter-spacing:-.015em;color:var(--ink);text-wrap:balance;margin:24px 0 34px;}
.proto.is-he .quote{font-family:var(--he);font-weight:400;line-height:1.28;}
.byline{display:inline-flex;flex-direction:column;gap:4px;}
.byline .who{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink);letter-spacing:-.01em;}
.proto.is-he .byline .who{font-family:var(--he);font-weight:600;}
.byline .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.proto.is-he .byline .role{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:500;}

/* Tech stack pills */
.stack-list{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
.stack-list li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--green);border:1px solid var(--line-l);border-radius:999px;padding:8px 14px;background:var(--white);}
.proto.is-he .stack-list li{font-family:var(--he);letter-spacing:0;}

/* Process mini */
.proc-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(30px,4vw,48px);}
.proc-mini .step{border-top:2px solid var(--cta);padding-top:20px;}
.proc-mini .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cta);}
.proto.is-he .proc-mini .n{font-family:var(--he);letter-spacing:.02em;font-weight:600;}
.proc-mini h4{font-size:19px;color:var(--ink);margin:12px 0 8px;line-height:1.12;}
.proc-mini p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
@media(max-width:820px){ .proc-mini{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .proc-mini{grid-template-columns:1fr;} }

/* Next case */
.next{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);padding:clamp(28px,3.6vw,52px) 0;}
.next .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:12px;}
.proto.is-he .next .lbl{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
.next h3{font-size:clamp(28px,4vw,58px);line-height:.9;color:var(--ink);max-width:18ch;}
.next .go{color:var(--cta);font-family:var(--mono);font-size:clamp(15px,1.6vw,19px);letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5em;}
.proto.is-he .next .go{font-family:var(--he);letter-spacing:0;text-transform:none;font-weight:600;}
.next .go .ar{transition:transform .35s var(--ease);display:inline-block;}
.next:hover .go .ar{transform:translateX(6px);}
.proto.is-he .next .go .ar{transform:scaleX(-1);}
.proto.is-he .next:hover .go .ar{transform:scaleX(-1) translateX(6px);}

/* CTA + footer */
.cta{background:var(--dark);color:#EEEFE7;}
.cta h2{font-size:clamp(34px,5.6vw,96px);line-height:.9;color:#EEEFE7;}
.cta .btn{margin-top:34px;display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 24px;border-radius:999px;background:var(--cta);color:#fff;transition:background .25s,transform .25s;}
.proto.is-he .cta .btn{font-family:var(--he);letter-spacing:0;text-transform:none;font-weight:600;}
.cta .btn:hover{background:var(--cta-dk);transform:translateY(-2px);}

/* nav-hide + effects */
/* Nav auto-hide on scroll down */
.nav{transition:background .35s,box-shadow .35s,border-color .35s,transform .45s var(--ease),opacity .45s var(--ease);}
.nav.nav-hide{transform:translateY(-108%);opacity:0;pointer-events:none;}


/* Meta strip: line-draw borders */
.meta{border:0;position:relative;}
.meta::before,.meta::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-l);transform:scaleX(0);transform-origin:50% 50%;transition:transform .8s var(--ease);}
.meta::before{top:0;} .meta::after{bottom:0;}
.meta.in-view::before,.meta.in-view::after{transform:scaleX(1);}

/* Cover cinematic entrance */
.cover-media{position:relative;overflow:hidden;transform:scale(1.06);filter:brightness(.72) saturate(.9);transition:transform 1.1s var(--ease),filter .95s var(--ease);will-change:transform,filter;}
.cover-media.in-view{transform:scale(1);filter:brightness(1) saturate(1);}
.cover-media .par{position:absolute;inset:-8px;transition:transform .45s var(--ease);}
.cover-media image-slot{position:absolute;inset:0;width:100%;height:100%;}

/* Bento tile captions + hover */
.bento .shot,.gal .shot.wide{transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.bento .shot::before,.gal .shot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,25,0) 40%,rgba(28,27,25,.8) 100%);opacity:0;transition:opacity .45s var(--ease);z-index:2;pointer-events:none;}
.bento .shot:hover::before,.gal .shot:hover::before{opacity:1;}
.b-cap{position:absolute;inset-inline:0;bottom:0;z-index:3;padding:clamp(14px,1.8vw,22px);color:#fff;transform:translateY(18px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);pointer-events:none;}
.bento .shot:hover .b-cap,.gal .shot:hover .b-cap{transform:none;opacity:1;}
.b-cap .b-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);display:block;margin-bottom:6px;}
.proto.is-he .b-cap .b-tag{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
.b-cap .b-t{font-family:var(--serif);font-weight:400;font-size:clamp(15px,1.7vw,20px);line-height:1.1;letter-spacing:-.01em;}
.proto.is-he .b-cap .b-t{font-family:var(--he);font-weight:700;}
.bento .shot:hover,.gal .shot.wide:hover{transform:translateY(-3px);box-shadow:0 40px 60px -40px rgba(28,27,25,.45);}

/* Tile modal (lightbox) */
.tile-modal{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);}
.tile-modal.open{opacity:1;pointer-events:auto;}
.tile-modal .scrim{position:absolute;inset:0;background:rgba(16,16,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.tile-modal .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);}
.tile-modal .frame{position:relative;max-width:min(1400px,94vw);max-height:88vh;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:rgba(16,16,11,.5);box-shadow:0 60px 120px -40px rgba(0,0,0,.7);transform:scale(.9);transition:transform .55s var(--ease);}
.tile-modal.open .frame{transform:scale(1);}
.tile-modal .frame image-slot{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.tile-modal .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.tile-modal .tm-close:hover{background:var(--cta);border-color:var(--cta);transform:rotate(90deg);}
.tile-modal .tm-nav{position:absolute;top:50%;transform:translateY(-50%) scale(.85);width:52px;height:52px;border-radius:50%;background:rgba(238,239,231,.08);border:1px solid rgba(238,239,231,.24);color:#EEEFE7;display:none;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,transform .35s var(--ease),opacity .3s var(--ease);z-index:3;opacity:0;}
.tile-modal.has-nav .tm-nav{display:inline-flex;}
.tile-modal.open.has-nav .tm-nav{opacity:1;transform:translateY(-50%) scale(1);transition-delay:.15s;}
.tile-modal .tm-prev{inset-inline-start:20px;}
.tile-modal .tm-next{inset-inline-end:20px;}
.tile-modal .tm-nav:hover{background:var(--cta);border-color:var(--cta);}
.proto.is-he .tile-modal .tm-prev svg,.proto.is-he .tile-modal .tm-next svg{transform:scaleX(-1);}
.tile-modal .tm-count{position:absolute;top:20px;inset-inline-start:20px;z-index:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:rgba(238,239,231,.72);padding:8px 12px;border-radius:999px;background:rgba(16,16,11,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.proto.is-he .tile-modal .tm-count{font-family:var(--he);letter-spacing:.02em;}
.tile-modal:not(.has-nav) .tm-count{display:none;}
.tile-modal .tm-cap{position:absolute;inset-inline:24px;bottom:24px;z-index:2;color:#EEEFE7;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,239,231,.72);}
.proto.is-he .tile-modal .tm-cap{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:500;}

/* Process mini connector */
.proc-mini{position:relative;}
.proc-mini::before{content:"";position:absolute;top:0;inset-inline-start:0;height:2px;width:100%;background:var(--cta);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s var(--ease);}
.proto.is-he .proc-mini::before{transform-origin:right center;}
.proc-mini.in-view::before{transform:scaleX(1);}
.proc-mini .step{border-top:0;padding-top:26px;position:relative;}
.proc-mini .step::before{content:"";position:absolute;top:-6px;inset-inline-start:0;width:11px;height:11px;border-radius:50%;background:var(--cta);opacity:0;transform:scale(.4);transition:opacity .35s var(--ease),transform .5s var(--ease);}
.proc-mini.in-view .step:nth-child(1)::before{opacity:1;transform:scale(1);transition-delay:.15s;}
.proc-mini.in-view .step:nth-child(2)::before{opacity:1;transform:scale(1);transition-delay:.45s;}
.proc-mini.in-view .step:nth-child(3)::before{opacity:1;transform:scale(1);transition-delay:.75s;}
.proc-mini.in-view .step:nth-child(4)::before{opacity:1;transform:scale(1);transition-delay:1.05s;}
.proc-mini.in-view .step:nth-child(5)::before{opacity:1;transform:scale(1);transition-delay:1.35s;}

/* ---------------- Micro-interactions ---------------- */

/* 1. Meta strip — stagger items in alongside the border draw */
.meta-item{opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease);}
.meta.in-view .meta-item{opacity:1;transform:none;}
.meta.in-view .meta-item:nth-child(1){transition-delay:.10s;}
.meta.in-view .meta-item:nth-child(2){transition-delay:.18s;}
.meta.in-view .meta-item:nth-child(3){transition-delay:.26s;}
.meta.in-view .meta-item:nth-child(4){transition-delay:.34s;}

/* 2. Feats — border-draw + content stagger + gold-shift on hover */
.feat{position:relative;border-top-color:transparent;}
.feat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-l);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease);}
.proto.is-he .feat::after{transform-origin:100% 50%;}
.feats.in .feat::after{transform:scaleX(1);}
.feats.in .feat:nth-child(1)::after{transition-delay:.05s;}
.feats.in .feat:nth-child(2)::after{transition-delay:.14s;}
.feats.in .feat:nth-child(3)::after{transition-delay:.23s;}
.feats .feat h4,.feats .feat p{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease),color .25s var(--ease);}
.feats.in .feat h4,.feats.in .feat p{opacity:1;transform:none;}
.feats.in .feat:nth-child(1) h4{transition-delay:.20s;} .feats.in .feat:nth-child(1) p{transition-delay:.28s;}
.feats.in .feat:nth-child(2) h4{transition-delay:.29s;} .feats.in .feat:nth-child(2) p{transition-delay:.37s;}
.feats.in .feat:nth-child(3) h4{transition-delay:.38s;} .feats.in .feat:nth-child(3) p{transition-delay:.46s;}
.feat:hover h4{color:var(--cta);transform:translateY(-2px);}

/* 3. Stats — pop each number in, one after the other (border stays put) */
.stat{opacity:0;transition:opacity .45s var(--ease);}
.stat .big{transform:scale(.6);transform-origin:0 100%;transition:transform .6s cubic-bezier(.34,1.56,.64,1);}
.proto.is-he .stat .big{transform-origin:100% 100%;}
.stat .lbl{opacity:0;transition:opacity .4s var(--ease);}
.stats.in .stat{opacity:1;}
.stats.in .stat .big{transform:none;}
.stats.in .stat .lbl{opacity:1;}
.stats.in .stat:nth-child(1),.stats.in .stat:nth-child(1) .big,.stats.in .stat:nth-child(1) .lbl{transition-delay:.15s;}
.stats.in .stat:nth-child(2),.stats.in .stat:nth-child(2) .big,.stats.in .stat:nth-child(2) .lbl{transition-delay:.40s;}
.stats.in .stat:nth-child(3),.stats.in .stat:nth-child(3) .big,.stats.in .stat:nth-child(3) .lbl{transition-delay:.65s;}

/* 4. Testimonial — quote mark scale-in, quote fade */
.quote-wrap .mark{opacity:0;transform:translateY(.35em) scale(.6) rotate(-8deg);transform-origin:50% 60%;transition:opacity .5s var(--ease),transform .7s cubic-bezier(.34,1.56,.64,1);}
.quote-wrap.in .mark{opacity:1;transform:translateY(.35em) scale(1) rotate(0);}
.quote-wrap .quote{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:.20s;}
.quote-wrap.in .quote{opacity:1;transform:none;}
.quote-wrap .byline{opacity:0;transition:opacity .6s var(--ease);transition-delay:.42s;}
.quote-wrap.in .byline{opacity:1;}

/* 5. Process — stagger step content (top connector + dots keep their own draw) */
.proc-mini .step h4,.proc-mini .step p{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.proc-mini.in-view .step h4,.proc-mini.in-view .step p{opacity:1;transform:none;}
.proc-mini.in-view .step:nth-child(1) h4{transition-delay:.20s;} .proc-mini.in-view .step:nth-child(1) p{transition-delay:.28s;}
.proc-mini.in-view .step:nth-child(2) h4{transition-delay:.50s;} .proc-mini.in-view .step:nth-child(2) p{transition-delay:.58s;}
.proc-mini.in-view .step:nth-child(3) h4{transition-delay:.80s;} .proc-mini.in-view .step:nth-child(3) p{transition-delay:.88s;}
.proc-mini.in-view .step:nth-child(4) h4{transition-delay:1.10s;} .proc-mini.in-view .step:nth-child(4) p{transition-delay:1.18s;}
.proc-mini.in-view .step:nth-child(5) h4{transition-delay:1.40s;} .proc-mini.in-view .step:nth-child(5) p{transition-delay:1.48s;}

/* 6. Next case — underline sweep + row lift on hover; replay on touch entry */
.next{transition:transform .35s var(--ease);}
.next:hover{transform:translateY(-2px);}
.next h3{position:relative;display:inline-block;padding-bottom:.08em;}
.next h3::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cta);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);}
.proto.is-he .next h3::after{transform-origin:100% 50%;}
.next:hover h3::after{transform:scaleX(1);}
@media(hover:none){ .next.in h3::after{transform:scaleX(1);transition-delay:.25s;} }

/* 7. Next-in-line CTA — line-wipe on the H2, dot pulse, button rise */
.cta.reveal .stack .mask{display:block;overflow:hidden;padding-block:.04em;}
.cta.reveal .stack .mask > span{display:block;transform:translateY(112%);transition:transform 1s var(--ease);will-change:transform;}
.cta.reveal.in .stack .mask:nth-child(1) > span{transform:translateY(0);}
.cta.reveal.in .stack .mask:nth-child(2) > span{transform:translateY(0);transition-delay:.10s;}
.cta.reveal .edot-after-g::after{display:inline-block;transform-origin:50% 60%;}
.cta.reveal.in .edot-after-g::after{animation:omri-dot-pulse .8s var(--ease) 1.05s both;}
@keyframes omri-dot-pulse{0%{transform:scale(1);}45%{transform:scale(1.35);}100%{transform:scale(1);}}
.cta.reveal .btn{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .25s;}
.cta.reveal.in .btn{opacity:1;transform:none;transition-delay:.7s;}
.cta.reveal.in .btn:hover{background:var(--cta-dk);transform:translateY(-2px);}

/* Per-letter CTA glow lives in base.css so it also runs on the homepage,
   which doesn't load case.css. */

/* 8. Cover — subtle scroll parallax (JS sets --par-sy; mouse still sets --par-mx/my) */
.cover-media .par{transform:translate3d(var(--par-mx,0px), calc(var(--par-my,0px) + var(--par-sy,0px)), 0);}

/* ---------------- Mobile-only tweaks ---------------- */

/* Hero — bring the breadcrumbs + title higher on mobile */
@media(max-width:820px){
	.breadcrumb{padding-top:88px;}
	.case-hero{padding-block:clamp(18px,3vw,28px) clamp(20px,3vw,32px);}
}

/* Design lightbox — fill the whole screen on mobile */
@media(max-width:820px){
	.tile-modal .stage{padding:0;}
	.tile-modal .frame{max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0;}
	.tile-modal .tm-cap{inset-inline:16px;bottom:16px;}
}
@keyframes tmHintNudge{
	0%,100%{transform:translateY(-50%) translateX(0);}
	40%,60%{transform:translateY(-50%) translateX(var(--tm-nudge,0px));}
}

/* Process — 1-column with a vertical line stretching from each dot as we scroll */
@media(max-width:820px){
	.proc-mini{grid-template-columns:1fr;gap:44px;}
	.proc-mini::before{display:none;}
	.proc-mini .step{padding-top:26px;padding-inline-start:28px;}
	.proc-mini .step::before{top:50px;inset-inline-start:-1px;}
	.proc-mini .step::after{content:"";position:absolute;top:64px;inset-inline-start:5px;width:2px;background:var(--cta);opacity:.55;height:calc(100% + 36px);transform:scaleY(var(--step-p,0));transform-origin:0 0;transition:transform .1s linear;pointer-events:none;border-radius:1px;}
	.proc-mini .step:last-child::after{display:none;}
}

/* Mobile parity — tighten the delays a touch */
@media(max-width:820px){
	.meta.in-view .meta-item:nth-child(1){transition-delay:.06s;}
	.meta.in-view .meta-item:nth-child(2){transition-delay:.13s;}
	.meta.in-view .meta-item:nth-child(3){transition-delay:.20s;}
	.meta.in-view .meta-item:nth-child(4){transition-delay:.27s;}
	.stats.in .stat:nth-child(1),.stats.in .stat:nth-child(1) .big,.stats.in .stat:nth-child(1) .lbl{transition-delay:.10s;}
	.stats.in .stat:nth-child(2),.stats.in .stat:nth-child(2) .big,.stats.in .stat:nth-child(2) .lbl{transition-delay:.32s;}
	.stats.in .stat:nth-child(3),.stats.in .stat:nth-child(3) .big,.stats.in .stat:nth-child(3) .lbl{transition-delay:.54s;}
}

@media(prefers-reduced-motion:reduce){ .mask > span{transform:none;} .fade,.cx{opacity:1;transform:none;} .cover-media{transform:none;filter:none;} .meta::before,.meta::after,.proc-mini::before{transform:scaleX(1);} .og-track{height:auto;} .og-stage{position:static;height:auto;padding-block:40px;}
	.meta-item,.feats .feat h4,.feats .feat p,.stat,.stat .big,.stat .lbl,.quote-wrap .mark,.quote-wrap .quote,.quote-wrap .byline,.proc-mini .step h4,.proc-mini .step p,.cta.reveal .stack .mask > span,.cta.reveal .btn{opacity:1;transform:none;}
	.feat::after,.next h3::after{transform:scaleX(1);}
	.cta.reveal.in .edot-after-g::after{animation:none;}
}

/* ==== Design section — Philosophy sub-block ==== */
.design-philosophy{max-width:70ch;margin:8px 0 clamp(28px,4vw,52px);padding-inline-start:clamp(0px,2vw,20px);border-inline-start:2px solid var(--cta);padding-block:6px 4px;}
.design-philosophy .eyebrow-sub{font-size:11px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:12px;}
.proto.is-he .design-philosophy .eyebrow-sub{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--cta);}
.design-philosophy p{font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 12px;}
.design-philosophy p:last-child{margin-bottom:0;}
.proto.is-he .design-philosophy p{font-family:var(--he);}

/* Philosophy read-more (mobile only) */
.dp-body{position:relative;}
.dp-toggle{margin-top:14px;padding:8px 0;background:transparent;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.dp-toggle:hover{color:var(--cta);}
.proto.is-he .dp-toggle{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
@media(max-width:720px){
	.design-philosophy .dp-body{max-height:calc(1.65em * 8 + 12px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%);transition:max-height .4s var(--ease);}
	.design-philosophy.is-open .dp-body{max-height:none;-webkit-mask-image:none;mask-image:none;}
}

/* ==== Orbit gallery (scroll-driven ring) ==== */
/* overflow-anchor:none — scroll anchoring can jump the sticky element by a
   few pixels when siblings above (images finishing decoding, transitions)
   change size mid-scroll, which read as a shake on mobile. */
.orbit-gallery{position:relative;padding-top:clamp(30px,4vw,60px);overflow-anchor:none;}
/* Pre-JS fallback only. motion.js takes over layoutOg() and sets an exact
   pixel height derived from the LAYOUT viewport, mirroring how .svc-scroll
   is sized on the homepage — that section doesn't jitter because the scroll
   math runs in document space, not viewport-relative rects. */
.og-track{position:relative;height:400svh;overflow-anchor:none;}
.og-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,32px);overflow-anchor:none;}
.og-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(28px,5vw,80px);width:100%;max-width:1240px;padding-inline:clamp(16px,3vw,32px);}
.og-ring{position:relative;width:min(64svh,520px);aspect-ratio:1;max-width:88vw;flex:0 0 auto;}
.og-ring .ring{position:absolute;inset:0;border-radius:50%;border:1.4px solid var(--line-l);}
.og-ring .ring-tick{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(28,27,25,.08);transform:scale(.94);}
.og-ring .orbit{position:absolute;inset:0;transform:rotate(0deg);will-change:transform;}
.og-ring .bead{position:absolute;top:0;left:50%;width:28px;height:28px;border-radius:50%;background:var(--cta);transform:translate(-50%,-50%);box-shadow:0 0 0 8px rgba(160,120,64,.14),0 0 40px 10px rgba(160,120,64,.32);}
.og-ring .bead::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(160,120,64,.32);animation:beadPing 2.6s ease-out infinite;}
@keyframes beadPing{0%{transform:scale(1);opacity:.7;}70%,100%{transform:scale(1.9);opacity:0;}}
/* Auto mode (mobile): drop the scroll-scrub pin and spin the ring on its own,
   GPU-composited and fully decoupled from scroll, so nothing is left to
   shudder as the mobile URL bar animates. */
/* The spinning bead + its glow sweep past the viewport edge each turn; clip
   the horizontal overflow so it can't toggle page-level horizontal scroll
   (which was shifting the fixed header and the image popup). overflow-y stays
   visible so nothing vertical is cut and no scroll container is created. */
.orbit-gallery.auto{overflow-x:clip;}
.orbit-gallery.auto .og-track{height:auto;}
.orbit-gallery.auto .og-stage{position:static;height:auto;padding-block:clamp(36px,9vh,72px);}
.orbit-gallery.auto .og-hint{display:none;}
.orbit-gallery.auto .og-ring .orbit{animation:ogSpin 24s linear infinite;}
@keyframes ogSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.orbit-gallery.auto .og-ring .orbit{animation:none;}}
.og-item{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none;background:transparent;border:0;padding:0;border-radius:inherit;overflow:hidden;}
.og-item.on{opacity:1;transform:scale(1);pointer-events:auto;}
.og-item image-slot,.og-item img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;transition:transform .9s var(--ease),filter .5s var(--ease);}
/* Mobile: drop the per-state scale on the four images. The images are the
   heaviest thing inside the pinned ring; combining opacity + transform (a
   compositor-layer promotion) fights the browser's URL-bar animation for
   the same GPU budget on mid-tier Android, which is what reads as a
   whole-page snap. svc-scroll on the homepage has no images in its ring
   and doesn't have this problem. */
@media(max-width:720px){
	.og-item{transition:opacity .5s var(--ease);transform:none;}
	.og-item.on{transform:none;}
	.og-item image-slot,.og-item img{transition:filter .5s var(--ease);}
}
.og-item img{object-fit:cover;object-position:var(--og-focus,50% 50%);}
.og-item .img-slot img{object-position:var(--og-focus,50% 50%);}
.og-enlarge{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(28,27,25,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);opacity:0;transform:translateY(-4px);transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none;z-index:2;}
.og-inner:hover .og-item.on .og-enlarge{opacity:1;transform:translateY(0);}

/* Side detail panel — desktop */
.og-side{position:relative;flex:0 1 clamp(260px,30vw,380px);min-width:0;min-height:280px;align-self:center;}
.og-side-item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none;}
.og-side-item.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.05s;}
.og-side-item .tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.proto.is-he .og-side-item .tag{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--cta);}
.og-side-item .t{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;}
.proto.is-he .og-side-item .t{font-family:var(--he);font-weight:700;}
.og-side-item p{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:34ch;margin:0;}
.proto.is-he .og-side-item p{font-family:var(--he);}
.og-side-item .cta-open{align-self:flex-start;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--cta);padding:2px 0 4px;cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease);}
.og-side-item .cta-open:hover{color:var(--cta);}
.proto.is-he .og-side-item .cta-open{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
.og-nums{list-style:none;padding:0;margin:0;display:flex;gap:18px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft);align-items:center;}
.proto.is-he .og-nums{font-family:var(--he);letter-spacing:.02em;}
.og-nums li.on{opacity:1;color:var(--cta);}
.og-nums li.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--cta);}
.og-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);opacity:.6;}
.proto.is-he .og-hint{font-family:var(--he);letter-spacing:.04em;text-transform:none;font-weight:500;}
.og-mobile{display:none;text-align:center;max-width:36ch;margin-inline:auto;padding:0 20px;opacity:0;transition:opacity .4s var(--ease);}
.og-mobile.ready{opacity:1;}
.og-mobile .tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cta);margin-bottom:8px;}
.proto.is-he .og-mobile .tag{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
.og-mobile .t{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,4.6vw,26px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);}
.proto.is-he .og-mobile .t{font-family:var(--he);font-weight:700;}
.og-mobile p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-top:8px;}
.proto.is-he .og-mobile p{font-family:var(--he);}
.og-mobile .cta-open{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);}
.proto.is-he .og-mobile .cta-open{font-family:var(--he);letter-spacing:.02em;text-transform:none;font-weight:600;}
@media(max-width:960px){ .og-row{flex-direction:column;gap:clamp(20px,3vw,32px);} .og-side{display:none;} .og-ring{width:min(70svh,520px);} }
@media(max-width:720px){ .og-ring{width:min(74vw,420px);} .og-nums{font-size:11px;gap:14px;} .og-mobile{display:block;} .og-hint{display:none;} .og-inner{cursor:pointer;} }
@media(prefers-reduced-motion:reduce){ .og-track{height:auto;} .og-stage{position:static;height:auto;padding-block:40px;} .og-inner,.og-item image-slot,.og-item img,.og-enlarge{transition:none!important;} }
/* re-added lines whose cursor:none was swapped to pointer (custom cursor out of scope) */
.tile-modal .tm-close{position:absolute;top:20px;inset-inline-end:20px;width:46px;height:46px;border-radius:50%;background:rgba(238,239,231,.08);border:1px solid rgba(238,239,231,.24);color:#EEEFE7;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .3s var(--ease),border-color .25s;z-index:2;}
.og-inner{position:absolute;inset:8%;border-radius:50%;overflow:hidden;background:var(--tile);box-shadow:0 40px 90px -40px rgba(28,27,25,.35);cursor:pointer;transition:transform .6s var(--ease),box-shadow .6s var(--ease);}
.og-inner:hover{transform:scale(1.015);box-shadow:0 55px 120px -40px rgba(28,27,25,.5),0 0 0 6px rgba(160,120,64,.08);}
.og-inner:hover .og-item.on image-slot,.og-inner:hover .og-item.on img{transform:scale(1.04);filter:brightness(1.04) saturate(1.05);}
.og-nums li{opacity:.45;transition:opacity .35s,color .35s;position:relative;padding:4px 0;cursor:pointer;}

/* ==== Meta strip — dark card ==== */
.meta{
	background:var(--dark);
	color:#EEEFE7;
	border-radius:12px;
	padding:clamp(24px,3vw,36px) clamp(22px,3vw,36px);
	margin-block:clamp(8px,1.5vw,20px);
	box-shadow:0 12px 24px -14px rgba(28,27,25,.4),0 40px 70px -30px rgba(28,27,25,.55);
}
.meta::before,.meta::after{display:none;}
.meta-item .k{color:rgba(238,239,231,.55);}
.meta-item .v{color:#EEEFE7;}
.meta-item .v a{color:var(--cta);}
.meta-item .v a:hover{color:#EEEFE7;}

/* ==== Lightbox — mobile close & swipe hints (source-order overrides) ==== */
@media(max-width:820px){
	.tile-modal .tm-close{top:16px;inset-inline-end:16px;width:44px;height:44px;background:rgba(16,16,11,.78);border-color:rgba(238,239,231,.5);box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:5;}
	.tile-modal .tm-close:hover{background:var(--cta);border-color:var(--cta);transform:rotate(90deg);}
	.tile-modal .tm-nav{width:34px;height:34px;background:rgba(16,16,11,.5);border-color:rgba(238,239,231,.28);box-shadow:0 4px 10px rgba(0,0,0,.3);}
	.tile-modal .tm-prev{inset-inline-start:10px;--tm-nudge:-6px;}
	.tile-modal .tm-next{inset-inline-end:10px;--tm-nudge:6px;}
	.proto.is-he .tile-modal .tm-prev{--tm-nudge:6px;}
	.proto.is-he .tile-modal .tm-next{--tm-nudge:-6px;}
	.tile-modal.open.has-nav .tm-nav{opacity:.9;transform:translateY(-50%);animation:tmHintNudge 1.4s ease-in-out .45s 2;}
	.tile-modal .tm-body{touch-action:pan-y;}
}

/* Case CTA swap button — brand gold, a touch larger */
.cta .swap{color:var(--cta);font-size:clamp(17px,2vw,23px);margin-top:34px;}
.cta .swap:hover{color:var(--cta-dk);}