/* Tintana site, version 3 (mockup). One pinned "film": scenes hand over to each other with their own transition while you scroll,
   and one 3D phone / 3D bull travels through them. Black, bone white, orange (plus the skin in the tattoo scene), one typeface.
   Without WebGL, or with reduced motion, the scenes are shown still, one under the other (class film-on is absent). */
:root{--ease:cubic-bezier(.23,1,.32,1);--bone:#F2F2F2;--lbbg:#F0EEE9;--lbink:#111;--lbmut:#5f5f5f;--lbhot:#A94A22}
:root[data-theme=light]{--bone:#111;--lbbg:#111;--lbink:#F2F2F2;--lbmut:#a9a9a9;--lbhot:#F0733D}
.mono{font:400 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase}
.mega{font:700 clamp(3.1rem,15.5vw,13.5rem)/.84 var(--body);letter-spacing:-.055em;text-transform:uppercase;margin:0}
@media(min-width:900px){.mega{font-size:clamp(3.1rem,12.4vw,13.5rem)}}
.mega .ln{display:block;overflow:hidden;padding:.02em 0 .07em}.mega .ln>span{display:block}.mega .hot{color:var(--hotx)}
.mega .wd{display:inline-block;white-space:nowrap}
.film-on .mega .ch{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0)*110ms + var(--c)*26ms + 80ms)}
.film-on .in .mega .ch{transform:none}
.film-on .mega .ln.plain>span{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.film-on .in .mega .ln.plain>span{transform:none}

/* ---- the gate ---- */
.gate{display:none}
html.gating .gate{display:block;position:fixed;inset:0;z-index:60}
html.gating body{overflow:hidden}
.gate .gp{position:absolute;left:0;right:0;height:50.5%;background:#040404;transition:transform .9s var(--ease)}
.gate .g1{top:0}.gate .g2{bottom:0}
.gate.open .g1{transform:translateY(-101%)}.gate.open .g2{transform:translateY(101%)}
.gate .gc{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:22px;color:#F2F2F2;transition:opacity .3s var(--ease)}
.gate.open .gc{opacity:0}
.gate .lg2{position:relative;width:min(44vw,230px);aspect-ratio:1;display:grid;place-items:center}
.gate .ring{position:absolute;inset:-34%;width:168%;height:168%;transform:rotate(-90deg)}
.gate .ring circle{fill:none;stroke-width:.35}.gate .ring .base{stroke:#FFFFFF1F}
.gate .ring .run{stroke:#F0733D;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.gate .bull{width:56%;height:auto;overflow:visible}
.gate svg path{fill:none;stroke:#F2F2F2;stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.gate svg path.sp{stroke:#F0733D}
.gate .cnt{font:400 .8125rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8B8B8B}.gate .cnt b{color:#F0733D;font-weight:400}
.gate .skip2{position:absolute;right:var(--m);bottom:28px;color:#8B8B8B;font:400 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase}

/* ---- the film: pinned stage, layers on top of each other ---- */
.film{position:relative}
.stage{position:relative}
.L{position:relative;min-height:100vh;padding:clamp(28px,5vw,64px) var(--m)}
#gl,.rail{display:none}
.film-on .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#040404}
.film-on .L{position:absolute;inset:0;min-height:0;overflow:hidden;padding:0}
.film-on #gl{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.film-on .rail{display:flex}

/* scene A: hero */
.La{display:flex;flex-direction:column;justify-content:center}
.film-on .La{padding:calc(72px + clamp(12px,2vw,28px)) var(--m) clamp(24px,4vw,48px);z-index:1}
.La .tag1{display:flex;justify-content:space-between;color:var(--mut);margin-bottom:clamp(14px,2.4vw,28px)}
.La h1.mega{font-size:clamp(3rem,15.5vw,13.5rem)}
@media(min-width:900px){.La h1.mega{font-size:clamp(3rem,6.9vw,9rem);max-width:58vw}.film-on .La .tag1 span:last-child{display:none}}
.La .low{display:grid;gap:18px;margin-top:clamp(22px,3vw,40px);max-width:36rem}
.La .lead{margin:0;color:var(--soft)}.La .acts{margin-top:4px}.La .meta{margin:6px 0 0}
.hphone{position:relative;margin:36px auto 0;width:min(280px,70vw)}
.film-on .hphone{display:none}
.dev{position:relative;padding:10px;border:1px solid #FFFFFF38;border-radius:30px;background:#000}
.dev .scr{position:relative;aspect-ratio:1/2;overflow:hidden;border-radius:21px;background:#000}
.dev .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.dev .scr img.on{opacity:1}
.calm .dev .scr img.s1{opacity:1}

/* scene B: tour (bone card that grows from the hero phone) */
.Lb{background:var(--lbbg);color:var(--lbink);--bone:var(--lbink);--mut:var(--lbmut);--hotx:var(--lbhot);--line:#00000026;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0 var(--m)}
.film-on .Lb{z-index:2;padding:0 var(--m)}
:root[data-theme=light] .Lb{--line:#FFFFFF26}
.Lb .tcol{display:grid;gap:clamp(18px,3vw,36px);align-content:center}
.Lb .swap{display:grid}
.Lb .swap span{grid-area:1/1;font:700 clamp(6rem,19vw,20rem)/.8 var(--body);letter-spacing:-.06em;text-transform:uppercase;color:var(--bone);opacity:1}
.Lb .swap span:after{content:".";color:var(--hotx)}
.film-on .Lb .swap span{opacity:0;transform:translateY(6vh);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.film-on .Lb[data-step="0"] .swap span:nth-child(1),.film-on .Lb[data-step="1"] .swap span:nth-child(2),.film-on .Lb[data-step="2"] .swap span:nth-child(3){opacity:1;transform:none}
.Lb .swap span:not(:nth-child(3)){display:none}.film-on .Lb .swap span{display:block}
.Lb .cap3{display:grid;gap:10px;margin:0;color:var(--mut);max-width:26rem}
.Lb .cap3 span{display:block;font-size:.875rem;transition:color .3s var(--ease)}
.Lb .cap3 b{font-weight:400;margin-right:.9em}
.Lb[data-step="0"] .cap3 span:nth-child(1),.Lb[data-step="1"] .cap3 span:nth-child(2),.Lb[data-step="2"] .cap3 span:nth-child(3){color:var(--hotx)}
.Lb .p3{justify-self:center;width:min(270px,64vw)}
.film-on .Lb .p3{visibility:hidden}

/* scene C: sketch on paper, ink on skin, placed on the arm */
.Lc{background:#040404;color:#F2F2F2;--wc:#F2F2F2;--wcs:#F2F2F280}
.Lc .arm{position:absolute;inset:0;width:100%;height:100%;display:block}
.Lc .paper{display:none;position:absolute;inset:0;z-index:2;background:#EAE3D2 radial-gradient(120% 100% at 50% 40%,transparent 55%,#00000022)}
.film-on .Lc .paper{display:block}
.Lc .paper:before{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.Lc .psvg{position:absolute;overflow:visible;transform-origin:50% 50%;transform:rotate(10.9deg)}
.film-on .Lc .pen path{stroke-dasharray:1;stroke-dashoffset:1}
.Lc .words{position:absolute;z-index:3;left:var(--m);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;pointer-events:none}
.Lc .w{font:700 clamp(3.4rem,10.5vw,11rem)/.86 var(--body);letter-spacing:-.055em;text-transform:uppercase;color:var(--wc);transition:color .4s var(--ease),-webkit-text-stroke-color .4s var(--ease)}
.film-on .Lc .w{color:transparent;-webkit-text-stroke:2px var(--wcs)}
.film-on .Lc[data-step="0"] .w:nth-child(1),.film-on .Lc[data-step="1"] .w:nth-child(2),.film-on .Lc[data-step="2"] .w:nth-child(3){color:var(--wc);-webkit-text-stroke:0}
.Lc .note{position:absolute;z-index:3;left:var(--m);bottom:clamp(20px,4vw,44px);max-width:26rem;color:var(--wc)}
.Lc .note b{display:block;font-size:1.0625rem;margin-top:6px}.Lc .note p{margin:2px 0 0;font-size:1rem;opacity:.85}
.film-on .Lc .note p,.film-on .Lc .note b{display:none}
.film-on .Lc[data-step="0"] .n0,.film-on .Lc[data-step="1"] .n1,.film-on .Lc[data-step="2"] .n2{display:block}
.Lc .tag{position:absolute;right:var(--m);bottom:clamp(20px,4vw,44px);z-index:3;min-width:230px;padding:14px 18px;background:#040404;color:#F2F2F2;border:1px solid #F0733D;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.Lc .tag.on,.calm .Lc .tag,.no-js .Lc .tag{opacity:1;transform:none}
.Lc .tag ul{list-style:none;margin:0;padding:0}
.Lc .tag li{display:flex;justify-content:space-between;gap:18px;padding:3px 0;color:#CFCFCF;font-size:.9375rem;opacity:0;transition:opacity .25s var(--ease)}
.Lc .tag li.on,.calm .Lc .tag li,.no-js .Lc .tag li{opacity:1}
.Lc .tag li b{font:700 .9375rem var(--body);font-variant-numeric:tabular-nums;color:#F2F2F2}
.Lc .tag p{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 0;padding-top:8px;border-top:1px solid #FFFFFF30}
.Lc .tag p span{font:400 .6875rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8B8B8B}
.Lc .tag p b{font:700 1.9rem/1 var(--body);font-variant-numeric:tabular-nums;color:#F0733D}
.film-on .Lc .ip{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.Lc .ip{stroke-dasharray:1;stroke-dashoffset:0}
.film-on .Lc .stip{opacity:0}
.Lc .sten{opacity:0}#mach{opacity:0}
.buzz{animation:buzz .07s linear infinite alternate}
@keyframes buzz{from{transform:translate(-.7px,-.4px)}to{transform:translate(.7px,.5px)}}
.Lc.done .buzz{animation:none}
@media(max-width:899px){
  .Lc .words{top:clamp(76px,14vw,104px);transform:none}
  .Lc .w{font-size:clamp(3rem,18vw,6.5rem)}
  .film-on .Lc .w{display:none}
  .film-on .Lc[data-step="0"] .w:nth-child(1),.film-on .Lc[data-step="1"] .w:nth-child(2),.film-on .Lc[data-step="2"] .w:nth-child(3){display:block}
  .Lc .tag{left:var(--m);right:var(--m);bottom:14px;min-width:0;padding:8px 14px}
  .Lc .note{display:none}
}
.Lc{min-height:100vh}

/* scene D: the six features (bone, bull on the right) */
.Ld{background:var(--lbbg);color:var(--lbink);--bone:var(--lbink);--mut:var(--lbmut);--soft:var(--lbmut);--hotx:var(--lbhot);--line:#00000026;display:flex;flex-direction:column;justify-content:center}
.film-on .Ld{z-index:4;padding:calc(72px + 12px) var(--m) 36px}
:root[data-theme=light] .Ld{--line:#FFFFFF26}
.Ld .eb{color:var(--hotx)}
.Ld ul{list-style:none;margin:clamp(14px,2vw,28px) 0 0;padding:0;max-width:min(62%,56rem)}
.Ld .row{position:relative;padding:clamp(8px,1.3vw,16px) 0}
.Ld .row:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.Ld .row h3{margin:0;font:700 clamp(1.7rem,4.4vw,4.2rem)/.95 var(--body);letter-spacing:-.045em;text-transform:uppercase;color:var(--bone)}
.Ld .row p{margin:2px 0 0;color:var(--soft);max-width:44ch;font-size:.9375rem}
.film-on .Ld .row h3,.film-on .Ld .row p{opacity:0;transform:translateX(-30px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.film-on .Ld .row.in h3,.film-on .Ld .row.in p{opacity:1;transform:none}
.film-on .Ld .row.in p{transition-delay:.1s}
@media(max-width:899px){.Ld ul{max-width:100%}.film-on .Ld .row p{display:none}.Ld .row h3{font-size:clamp(1.6rem,8vw,3rem)}}

/* scene E: download (orange) */
.Le{background:var(--hot);color:#040404;display:flex;flex-direction:column;justify-content:center}
.film-on .Le{z-index:6;padding:calc(72px + 12px) var(--m) 36px}
.Le .eb{color:#040404}
.Le .mega{font-size:clamp(3rem,13vw,13rem)}
@media(min-width:900px){.Le .mega{font-size:clamp(3rem,10vw,12rem)}}
.Le .acts{margin-top:clamp(24px,3.4vw,44px)}
.Le .btn,.after .btn{background:#040404;border-color:#040404;color:#F2F2F2;min-height:72px;padding:0 40px;font-size:1.25rem}
.Le .btn.o,.after .btn.o{background:transparent;color:#040404;border-color:#040404}
.Le .btn.soon,.after .btn.soon{background:transparent;color:#040404;border:1px dashed #040404}
.Le .meta,.after .meta{color:#2b1409}

/* scenes in normal flow (reduced motion or no WebGL) */
html:not(.film-on) .Lb{border-top:1px solid var(--line)}

/* the numbered rail */
.rail{position:absolute;right:clamp(12px,1.6vw,24px);top:50%;transform:translateY(-50%);z-index:8;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.rail button{display:grid;grid-template-columns:auto 20px;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;color:var(--rc,#888);font:400 .6875rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.rail button span{opacity:0;transform:translateX(6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.rail button i{display:block;height:2px;background:currentColor;width:10px;justify-self:end;transition:width .3s var(--ease)}
.rail button[aria-current=true]{color:var(--rcA,#F0733D)}.rail button[aria-current=true] i{width:20px}
@media(hover:hover){.rail:hover button span,.rail button[aria-current=true] span{opacity:1;transform:none}}
@media(max-width:899px){.rail{display:none!important}}

/* floating action */
.pill{position:fixed;left:50%;bottom:22px;z-index:20;display:none;align-items:center;gap:10px;min-height:52px;padding:0 24px 0 20px;border-radius:999px;background:var(--hot);color:#040404;font:700 1rem var(--body);text-decoration:none;box-shadow:0 10px 30px -10px #000a;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.pill i{width:8px;height:8px;border-radius:50%;background:#040404}
.pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media(min-width:900px){.pill{display:inline-flex}}

/* after the film */
.after{background:var(--hot);color:#040404;padding:clamp(60px,9vw,130px) var(--m)}
.after .steps li{background:transparent;border-color:#04040055;color:#040404}.after .steps li:before{color:#040404}
.after h3.sm{font:700 clamp(1.6rem,3.6vw,2.6rem)/1 var(--body);letter-spacing:-.03em;margin:0 0 18px}
.after .small,.after .small a,.after .priv{color:#2b1409}.after .priv a{color:#040404}.after .eb{color:#040404}
.try{padding:clamp(60px,9vw,130px) var(--m);border-top:1px solid var(--line)}
.try .mega{font-size:clamp(2.6rem,9vw,9rem);margin-bottom:clamp(24px,4vw,48px)}
body[data-released=false] .pill{display:none}
@media (prefers-reduced-motion:reduce){.buzz{animation:none}}

.film-on .Lc{z-index:3}
.film-on .Lb .tcol{opacity:var(--tc,1)}

@media(max-width:899px){
  .film-on .La .lead,.film-on .La .meta,.film-on .La .btn.o{display:none}
  .film-on .Lb{padding:96px var(--m) 0}
  .La h1.mega{font-size:clamp(3rem,14.5vw,6rem)}
  .film-on .La{justify-content:flex-start;padding-top:calc(72px + 20px)}
  .Lb{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;align-content:start;padding-top:96px;gap:0}
  .Lb .swap span{font-size:clamp(4.6rem,24vw,9rem)}
  .Lb .cap3 span{display:none}
  .film-on .Lb[data-step="0"] .cap3 span:nth-child(1),.film-on .Lb[data-step="1"] .cap3 span:nth-child(2),.film-on .Lb[data-step="2"] .cap3 span:nth-child(3),html:not(.film-on) .Lb .cap3 span{display:block}
  html:not(.film-on) .Lb .cap3 span:not(:nth-child(3)){display:none}
}

html:not(.film-on) .Lc .w:not(:nth-child(3)),html:not(.film-on) .Lc .n0,html:not(.film-on) .Lc .n1{display:none}
html:not(.film-on) .Lc .note{max-width:22rem}

/* scene C pictures: paper, inking, bare arm, tattooed arm (the owner's own pictures) */
.Lc .ph{position:absolute;inset:0;overflow:hidden;will-change:transform,opacity}
.Lc .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.Lc .ph-bare img,.Lc .ph-tat img{object-position:72% 42%}
.film-on .Lc .ph-ink,.film-on .Lc .ph-bare,.film-on .Lc .ph-tat{visibility:hidden}
.Lc .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#040404e6 0,#040404a6 32%,#04040400 62%),linear-gradient(0deg,#040404cc 0,#04040400 28%)}
html:not(.film-on) .Lc .ph-paper,html:not(.film-on) .Lc .ph-ink,html:not(.film-on) .Lc .ph-bare{display:none}
@media(max-width:899px){.Lc .ph img{object-position:70% 50%}.Lc .scrim{background:linear-gradient(180deg,#040404d9 0,#04040400 45%),linear-gradient(0deg,#040404d9 0,#04040400 30%)}}

/* the two arm pictures: whole picture on the right, feathered into the black (full-bleed on a phone) */
.Lc .fit{position:absolute;inset:0}
.Lc .fit img{object-position:70% 40%}
@media(min-width:900px){
  .Lc .fit{inset:0 3vw 0 auto;height:100%;aspect-ratio:2/3;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0,#000 9%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0,#000 9%,#000 94%,transparent 100%);mask-composite:intersect}
  .Lc .fit img{object-position:center}
}

/* try it: labelled rows, equal-width options, amounts in the page font */
.try .qb{padding:clamp(18px,2.4vw,32px)}
.try .field{display:grid;grid-template-columns:5.5rem minmax(0,1fr);align-items:center;gap:6px 14px;margin:0 0 12px}
.try .fl{font:400 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.try .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:var(--card)}
.try .seg button{min-height:48px;padding:0 8px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:var(--bone);font:700 .9375rem var(--body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.try .seg button:first-child{border-left:0}
.try .seg button:hover{background:#FFFFFF0D}
.try .seg button[aria-pressed=true]{background:var(--hot);color:#040404}
.try .qb button:active{transform:none}
.try .ln{margin-top:22px}
.try .ln li{align-items:baseline}
.try .ln b,.try .tt{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:700}
.try .ln b:before,.try .tt:before{content:"₱"}
.try .tot b{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.03em}
@media(max-width:560px){.try .field{grid-template-columns:1fr}.try .seg button{font-size:.875rem;min-height:46px}}

/* ===== calmer type, the brand tile on every scene, mobile fit (3 Nov) ===== */
:root{--tile:#FFFFFF0F;--tilel:#00000012;--tileo:#0000001F}
.stage,.L{background-image:linear-gradient(var(--tile) 1px,transparent 1px),linear-gradient(90deg,var(--tile) 1px,transparent 1px);background-size:32px 32px}
.Lb,.Ld{background-color:var(--lbbg);--tile:var(--tilel)}
:root[data-theme=light] .Lb,:root[data-theme=light] .Ld{--tile:#FFFFFF14}
.Le{--tile:var(--tileo)}
.Lc{--tile:#FFFFFF0A}
.after,.try{background-image:linear-gradient(var(--tile) 1px,transparent 1px),linear-gradient(90deg,var(--tile) 1px,transparent 1px);background-size:32px 32px}
.after{--tile:var(--tileo)}
.mega{font-size:clamp(2.3rem,7.5vw,5rem)}
.La h1.mega{font-size:clamp(2.4rem,9vw,5.2rem);max-width:none}
@media(min-width:900px){.mega{font-size:clamp(2.6rem,5.6vw,5rem)}.La h1.mega{font-size:clamp(2.8rem,5.2vw,5rem);max-width:46vw}}
.Lb .swap span{font-size:clamp(4.2rem,17vw,8rem)}
@media(min-width:900px){.Lb .swap span{font-size:clamp(5rem,12vw,11rem)}}
.Lc .w{font-size:clamp(2.6rem,12vw,4.4rem)}
@media(min-width:900px){.Lc .w{font-size:clamp(3rem,7.2vw,6.4rem)}}
.Ld .mega{font-size:clamp(1.9rem,6vw,3.4rem)}
.Ld .row h3{font-size:clamp(1.35rem,6vw,2rem)}
@media(min-width:900px){.Ld .row h3{font-size:clamp(1.6rem,3vw,2.6rem)}.Ld .mega{font-size:clamp(2rem,3.6vw,3.2rem)}}
.Le .mega{font-size:clamp(2.6rem,12vw,4.6rem)}
@media(min-width:900px){.Le .mega{font-size:clamp(3rem,7vw,6.4rem)}}
.try .mega,.after .mega{font-size:clamp(2rem,7vw,3.6rem)}
@media(min-width:900px){.try .mega,.after .mega{font-size:clamp(2.4rem,4.4vw,4rem)}}
.Le .btn,.after .btn{min-height:56px;padding:0 28px;font-size:1.0625rem}
.La .acts,.Le .acts{gap:10px}
@media(max-width:899px){
  .La .tag1 span:last-child{display:none}
  .film-on .La{padding-top:calc(72px + 14px)}
  .film-on .Ld{padding:calc(72px + 6px) var(--m) 20px}
  .Ld .row{padding:8px 0}
  .film-on .Le{justify-content:flex-start;padding-top:calc(72px + 150px)}
}

/* PLACED: callouts on the arm (like the app's body map) and a plain total on the black, nothing boxed over the photo */
.Lc .tag{left:var(--m);right:auto;top:calc(72px + 28px);bottom:auto;min-width:0;padding:0;background:none;border:0;transform:translateY(10px)}
.Lc .tag ul{display:none}
.Lc .tag p{display:grid;gap:4px;margin:0;padding:0;border:0}
.Lc .tag p span{font:400 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#a9a9a9}
.Lc .tag p b{font:700 clamp(2rem,4vw,3.2rem)/1 var(--body);color:#F0733D;letter-spacing:-.02em}
.Lc .tag small{display:block;margin-top:8px;font:400 .6875rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8B8B8B}
.Lc .calls{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}
@media(min-width:900px){
  .film-on .Lc .calls{display:block}
  .Lc .calls svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .Lc .calls path{fill:none;stroke:#F0733D;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease)}
  .Lc .calls circle{fill:#F0733D;opacity:0;transition:opacity .3s var(--ease) .5s}
  .Lc .calls .cl{position:absolute;display:grid;gap:2px;width:11.5rem;padding:8px 12px;background:#040404;border:1px solid #FFFFFF38;color:#CFCFCF;font:400 .8125rem var(--body);opacity:0;transform:translateX(-8px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
  .Lc .calls .cl b{color:#F2F2F2;font-size:.9375rem}
  .Lc .calls.on .cl{opacity:1;transform:none}
  .Lc .calls.on path{stroke-dashoffset:0}
  .Lc .calls.on circle{opacity:1}
}
@media(max-width:899px){.Lc .tag{top:auto;left:var(--m);right:var(--m);bottom:14px}}





/* the bull film is the background of the orange scene: white in the video becomes the page's own orange and tile (multiply) */
.Le video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;z-index:0;pointer-events:none;transform-origin:80% 50%;transform:translateX(5vw) scale(.92)}
.Le .flat{position:absolute;z-index:0;opacity:0;pointer-events:none}
.Le > .eb,.Le > .mega,.Le > .acts,.Le > .meta{position:relative;z-index:2}
.Le .snd{display:none;position:absolute;left:var(--m);bottom:clamp(18px,3vw,32px);z-index:3;min-height:44px;padding:0 16px;border:1px solid #040404;background:transparent;color:#040404;font:700 .875rem var(--body);cursor:pointer;align-items:center}
.film-on .Le .snd{display:inline-flex}
.Le .snd[aria-pressed=true]{background:#040404;color:#F2F2F2}
.Le .snd.ask{background:#040404;color:#F2F2F2}
@media(max-width:899px){
  .film-on .Le{padding-top:calc(72px + 20px)}
  .Le video.bg{top:auto;bottom:calc(5vh + 20px);height:auto;aspect-ratio:16/9;transform:none}
  .film-on .Le .meta{display:none}
}
html:not(.film-on) .Le video.bg{display:none}
html:not(.film-on) .Le .flat{position:static;opacity:1;height:120px;margin:24px 0 0;display:block}

/* features scene: the phone shows the app screen for the feature on the left; a connector joins them */
.Ld .conn{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.film-on .Ld .conn{display:block}
.Ld .conn path{fill:none;stroke:var(--hotx);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.Ld .conn circle{fill:var(--hotx)}
.Ld .conn.go path{animation:dr .55s var(--ease) forwards}
@keyframes dr{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.film-on .Ld .row{opacity:.4;transition:opacity .3s var(--ease)}
.film-on .Ld .row.act{opacity:1}
.film-on .Ld .row.act h3{color:var(--hotx)}
.film-on .Ld .hd{opacity:.4;transition:opacity .3s var(--ease)}
.film-on .Ld .hd.act{opacity:1}
@media(max-width:899px){.film-on .Ld .conn{display:none}}

/* mobile (3 Nov): features scene starts at the top and uses the room; the film is bigger */
@media(max-width:899px){
  .film-on .Ld{justify-content:flex-start;padding:calc(72px + 4px) var(--m) 16px}
  .Ld .mega{font-size:clamp(1.7rem,8vw,2.2rem)}
  .Ld .row{padding:6px 0}
  .Ld .row h3{font-size:clamp(1.25rem,6.2vw,1.6rem)}
  .film-on .Ld .row p{display:none;font-size:.875rem;max-width:none;margin-top:2px}
  .film-on .Ld .row.act p{display:block}
  .Ld ul{margin-top:10px}
  .Le video.bg{width:170%;height:auto;aspect-ratio:16/9;inset:auto auto calc(18px + 56px) -51%;transform:none}
}