/*
Theme Name: Sociogram Custom
Theme URI: https://sociogram.co.in/
Author: Sociogram
Description: Custom WordPress theme converted from the supplied Sociogram static design.
Version: 1.0.0
Requires at least: 6.0
Text Domain: sociogram
*/


/* Inline styles preserved from original Claude design */

/* ============ TOKENS ============ */
:root{
  --ink:#000000;
  --ink-2:#040404;
  --ink-3:#0D0D0D;
  --line:#242424;
  --sun:#F7A44A;
  --coral:#F4735E;
  --hot:#F5308C;
  --heart:#EC1F86;
  --paper:#F2EFE9;
  --mist:#8E8E8E;
  --accent:#F7A44A;
  --grad:linear-gradient(135deg,var(--sun) 0%,var(--coral) 45%,var(--hot) 100%);
  --grad-flat:linear-gradient(90deg,var(--sun),var(--hot));
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --poster:'Oswald','Arial Narrow', 'Haettenschweiler',sans-serif;
  --brandfont:'Poppins','Segoe UI',system-ui,sans-serif;
  --body:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;
  --pen:'Caveat','Segoe Print','Bradley Hand',cursive;
  --pad:clamp(18px,5vw,72px);
}
/* highlighter swipe behind every word of a heading */
.hw{position:relative;display:inline-block}
.hw .wd{position:relative;z-index:1}
.hw .hl{position:absolute;left:-4%;top:10%;width:108%;height:82%;z-index:0;overflow:visible;pointer-events:none}
.hw .hl path{fill:none;stroke:url(#hlGrad);stroke-linecap:round;stroke-width:15;opacity:.34;
  vector-effect:non-scaling-stroke;stroke-dasharray:260;stroke-dashoffset:260}
.hero h1 .hw .hl path{stroke-width:26}
.form-side .big .hw .hl path{stroke-width:20}
.draw .hw .hl path{animation:hlDraw .55s cubic-bezier(.4,.8,.4,1) forwards}
@keyframes hlDraw{to{stroke-dashoffset:0}}
@media(max-width:620px){.hw .hl path{stroke-width:11}.hero h1 .hw .hl path{stroke-width:17}}

/* ============ AMBIENT BACKGROUND ============ */
/* faint branded light drifting under the whole site */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#000}
.ambient b{position:absolute;display:block;border-radius:50%;will-change:transform;
  mix-blend-mode:screen;filter:blur(66px)}
.ambient::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 90% at 50% 50%,transparent 32%,rgba(0,0,0,.55) 78%,#000 100%)}
.ambient .a1{width:78vw;height:78vw;left:-22vw;top:-14vh;
  background:radial-gradient(circle,rgba(232,126,84,.26),transparent 54%);
  animation:amb1 31s ease-in-out infinite alternate}
.ambient .a2{width:70vw;height:70vw;right:-24vw;top:18vh;
  background:radial-gradient(circle,rgba(218,56,124,.25),transparent 54%);
  animation:amb2 27s ease-in-out infinite alternate}
.ambient .a3{width:88vw;height:88vw;left:8vw;bottom:-30vh;
  background:radial-gradient(circle,rgba(158,40,96,.22),transparent 56%);
  animation:amb3 35s ease-in-out infinite alternate}
.ambient .a4{width:56vw;height:56vw;right:6vw;bottom:6vh;
  background:radial-gradient(circle,rgba(238,162,92,.17),transparent 52%);
  animation:amb4 23s ease-in-out infinite alternate}
@keyframes amb1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,7vh,0) scale(1.16)}}
@keyframes amb2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-9vw,10vh,0) scale(.92)}}
@keyframes amb3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(10vw,-8vh,0) scale(1.14)}}
@keyframes amb4{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-7vw,-6vh,0) scale(.9)}}
@media(max-width:700px){.ambient b{filter:blur(44px)}.ambient .a4{display:none}}

/* ============ LOGO ============ */
.logo{position:relative;display:block;width:100%;line-height:0}
.logo img{display:block;width:100%;height:auto}
.logo .lg-heart{position:absolute;left:49.486%;top:0.0%;width:8.377%;height:auto;
  transform-origin:50% 80%;animation:heartbeat 1s ease-in-out infinite}
@keyframes heartbeat{
  0%  {transform:scale(1);filter:none}
  10% {transform:scale(1.34);filter:drop-shadow(0 0 9px rgba(240,41,139,.75))}
  20% {transform:scale(1.02)}
  30% {transform:scale(1.22);filter:drop-shadow(0 0 7px rgba(240,41,139,.5))}
  44% {transform:scale(1);filter:none}
  100%{transform:scale(1)}
}

.offscr,.offscr *,.offscr *::before,.offscr *::after{animation-play-state:paused!important}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#000;color-scheme:dark}
body{
  margin:0;background:#000;color:var(--paper);min-height:100%;
  transition:background-color .4s ease,color .4s ease;
  font-family:var(--body);font-size:16px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--hot);color:#fff}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:3px}

/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.wrap{width:min(1280px,100%);margin-inline:auto;padding-inline:var(--pad)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ LOGO MARK ============ */
.mark{display:inline-block;font-family:var(--brandfont);font-weight:800;line-height:.9;letter-spacing:-.02em;position:relative}
.mark .r{display:flex;align-items:flex-end}
.mark .r1{position:relative}
.mark .r2{margin-left:.92em;margin-top:-.24em}
.mark .o{width:.76em;height:.76em;border-radius:50%;background:linear-gradient(150deg,#F9B25C,#F4735E);margin-left:-.02em;flex:none}
.mark .a{width:.76em;height:.7em;border-radius:.38em .38em .07em .07em;background:linear-gradient(160deg,#F26EA0,#F5117F);margin-inline:-.01em;flex:none}
.mark .hrt{position:absolute;width:.32em;height:.32em;right:.21em;top:-.26em;color:var(--heart);rotate:-6deg}
.mark.light .r{color:var(--paper)}
.mark.dark .r{color:var(--ink)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;
  min-height:100svh;display:grid;align-items:center;
  padding-top:clamp(54px,8vh,96px);padding-bottom:clamp(50px,8vh,96px)}
/* flowing organic gradient shapes — deeper, darker tones */
.blobs{position:absolute;inset:-14% -8%;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;width:clamp(300px,58vw,820px);aspect-ratio:1;filter:blur(46px);
  mix-blend-mode:screen;will-change:border-radius,transform}
.b1{top:-14%;left:-10%;opacity:.62;
  background:radial-gradient(circle at 40% 36%,#C4703A,#8E2E4E 46%,transparent 74%);
  border-radius:62% 38% 46% 54%/58% 44% 56% 42%;
  animation:driftA 23s ease-in-out infinite alternate}
.b2{top:-6%;right:-14%;opacity:.6;
  background:radial-gradient(circle at 58% 42%,#B02168,#54103A 48%,transparent 74%);
  border-radius:44% 56% 63% 37%/38% 62% 38% 62%;
  animation:driftB 27s ease-in-out infinite alternate}
.b3{bottom:-34%;left:20%;opacity:.5;
  background:radial-gradient(circle at 45% 55%,#8E1B55,#2A0A1C 56%,transparent 78%);
  border-radius:55% 45% 34% 66%/52% 36% 64% 48%;
  animation:driftC 25s ease-in-out infinite alternate}
.b4{top:22%;left:30%;opacity:.34;width:clamp(220px,38vw,520px);
  background:radial-gradient(circle at 50% 50%,#D98A46,transparent 68%);
  border-radius:48% 52% 58% 42%/56% 48% 52% 44%;
  animation:driftA 20s ease-in-out infinite alternate-reverse}
@keyframes driftA{0%{transform:translate(0,0) rotate(0) scale(1)}100%{transform:translate(7%,6%) rotate(22deg) scale(1.1)}}
@keyframes driftB{0%{transform:translate(0,0) rotate(0) scale(1.05)}100%{transform:translate(-8%,8%) rotate(-24deg) scale(.94)}}
@keyframes driftC{0%{transform:translate(0,0) rotate(0) scale(.96)}100%{transform:translate(9%,-7%) rotate(18deg) scale(1.12)}}

.hero-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}

/* the logo, floating on its own */
.hero-logo{display:block;width:clamp(126px,17vw,186px);margin-bottom:clamp(18px,3.4vh,34px);
  animation:logoFloat 4.2s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}

/* everything blurs up into place, one after the other */
@keyframes blurUp{
  from{opacity:0;translate:0 34px;filter:blur(14px)}
  to  {opacity:1;translate:0 0;filter:blur(0)}
}
.hero-in .anim{animation:blurUp .95s cubic-bezier(.22,.68,.24,1) backwards;animation-delay:var(--d,0s)}

/* trust pill */
.trust{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  font-size:12.5px;color:#D8D2CC;font-weight:500;letter-spacing:.01em}
.trust .stars{display:flex;gap:2px;color:var(--sun);font-size:11px}
.trust .stars i{font-style:normal;display:inline-block;opacity:0;
  animation:starPop .5s cubic-bezier(.3,1.5,.4,1) var(--s,0s) both}
@keyframes starPop{
  0%{opacity:0;transform:scale(.2) rotate(-40deg)}
  60%{opacity:1;transform:scale(1.35) rotate(6deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(58px,min(12.6vw,14.6vh),148px);line-height:.98;letter-spacing:-.015em;
  margin:clamp(16px,2.4vw,26px) 0 0;text-transform:uppercase;max-width:14ch}
.hero h1 .l{display:block}
.hero h1 em{font-style:normal;position:relative;display:inline-block;color:#fff}
.hero h1 em .grad{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(158deg,#F39958,#F2707A 46%,#F04287);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-in.clicked h1 em .grad{opacity:1}
.hero h1 em::after{content:"";position:absolute;left:2%;right:2%;bottom:-.05em;height:.07em;border-radius:99px;
  background:linear-gradient(90deg,#F39958,#F2707A,#F04287);
  transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hero-in.clicked h1 em::after{transform:scaleX(1)}

/* the pointer that comes in and clicks the word */
.cursor{position:absolute;right:-.24em;bottom:-.30em;width:.52em;height:.52em;z-index:4;
  opacity:0;translate:1.7em 1.8em;pointer-events:none}
.cursor svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.75)) drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.hero-in.cursoring .cursor{animation:curIn .75s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes curIn{from{opacity:0;translate:1.7em 1.8em;scale:1.2}to{opacity:1;translate:0 0;scale:1}}
.hero-in.clicked .cursor{animation:curClick 2.3s cubic-bezier(.3,.9,.35,1) forwards}
@keyframes curClick{
  0%  {opacity:1;scale:1;translate:0 0}
  9%  {scale:.7}
  20% {scale:1.06}
  30% {scale:1}
  52% {opacity:1;translate:0 0}
  100%{opacity:0;translate:2em 2.2em;scale:.94}
}
.cursor .ring{position:absolute;left:8%;top:6%;width:170%;aspect-ratio:1;border-radius:50%;
  border:2.5px solid rgba(249,178,92,.95);opacity:0;translate:-50% -50%}
.hero-in.clicked .cursor .ring{animation:curRing .7s ease-out forwards}
@keyframes curRing{0%{opacity:1;scale:.15}100%{opacity:0;scale:2.1}}

.hero-copy{max-width:46ch;margin:clamp(16px,2.4vw,24px) auto 0;color:#B8B3AE;
  font-size:clamp(13.5px,1.5vw,16px);line-height:1.72}
.hero-copy span,.hero-copy b{display:block}
.hero-copy b{color:var(--paper);font-weight:700}
.hero-actions{display:flex;justify-content:center;margin-top:clamp(22px,3.4vw,32px)}

/* CTA with light travelling round the border */
.callbtn{position:relative;display:inline-flex;padding:2px;border-radius:999px;overflow:hidden;
  background:rgba(245,48,140,.28);box-shadow:0 0 34px rgba(245,48,140,.32);
  border:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:transform .25s,box-shadow .3s}
.callbtn:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(245,48,140,.5)}
.callbtn::before{content:"";position:absolute;inset:-150%;
  background:conic-gradient(from 0deg,transparent 0 56%,#F9B25C 70%,#FFF3E0 79%,#F5308C 88%,transparent 97%);
  animation:orbit 3.2s linear infinite}
@keyframes orbit{to{rotate:360deg}}
.callbtn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--paper);
  background:linear-gradient(160deg,#1E1218,#120A10);white-space:nowrap}
.callbtn .dot{width:7px;height:7px;border-radius:50%;background:#3BE07A;box-shadow:0 0 10px #3BE07A;flex:none}

/* scroll cue — nudges you downward */
.scrollcue{margin-top:clamp(28px,5vh,54px);display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:#7C7770;
  background:none;border:0;cursor:pointer;animation:cueFloat 2.2s ease-in-out infinite}
@keyframes cueFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
.scrollcue:hover{color:var(--accent)}
.scrollcue .mouse{width:23px;height:36px;border-radius:14px;border:1.6px solid currentColor;position:relative}
.scrollcue .mouse i{position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;
  background:var(--grad-flat);translate:-50%;animation:wheel 1.7s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;translate:-50% 0}25%{opacity:1}70%{opacity:1;translate:-50% 13px}100%{opacity:0;translate:-50% 15px}}
.scrollcue .chevs{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:1px}
.scrollcue .chevs svg{animation:chev 1.7s ease-in-out infinite}
.scrollcue .chevs svg:nth-child(2){animation-delay:.18s}
@keyframes chev{0%,100%{opacity:.15;translate:0 -3px}50%{opacity:1;translate:0 3px}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.02em;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn-primary{background:var(--grad-flat);color:#0A0A0A}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(245,48,140,.38)}
.btn-ghost{border-color:#6E6E6E;color:var(--paper);background:rgba(255,255,255,.06)}
.btn-ghost:hover{border-color:var(--sun);color:var(--sun);background:rgba(247,164,74,.10)}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}

/* ============ TICKER ============ */
.ticker{border-block:1px solid var(--line);background:rgba(0,0,0,.7);overflow:hidden;
  padding-block:13px;pointer-events:none;user-select:none;touch-action:none}
.ticker-track{display:flex;gap:34px;width:max-content;will-change:transform;
  animation:tickSlide linear infinite}
@keyframes tickSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ticker span{font-family:var(--display);font-size:clamp(17px,2.6vw,26px);text-transform:uppercase;letter-spacing:.02em;color:#3E3E3E;display:flex;align-items:center;gap:34px;white-space:nowrap}
.ticker span i{width:9px;height:9px;border-radius:50%;background:var(--grad-flat);flex:none}
.ticker span:nth-child(3n+2){color:var(--paper)}
.ticker span:nth-child(4n+3){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ SECTION FURNITURE ============ */
.sec{padding-block:clamp(56px,9vw,124px);position:relative;background:transparent}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,50px)}
.sec-head:not(.rail-head){flex-direction:column;align-items:center;text-align:center}
.sec-head:not(.rail-head) .tag{justify-content:center}
.sec-head:not(.rail-head) h2{max-width:20ch}
.sec-head:not(.rail-head) .sec-note{max-width:52ch}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:9px}
.tag::before{content:"";width:22px;height:1px;background:var(--grad-flat)}
.sec h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(36px,7.4vw,88px);margin:.16em 0 0;max-width:16ch}
.sec-note{max-width:38ch;color:var(--mist);font-size:15px}
.pen{font-family:var(--pen);color:var(--accent);font-size:clamp(19px,2.4vw,26px);display:inline-block}

/* ============ SERVICES — GALLERY ============ */
.gal{margin-top:clamp(26px,5vw,52px)}
.galRail{display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scroll-padding-inline:var(--pad);padding:4px var(--pad) clamp(20px,3vw,32px);
  width:100vw;margin-inline:calc(50% - 50vw);
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;cursor:grab}
.galRail::-webkit-scrollbar{display:none}
.galRail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.galCard{flex:0 0 clamp(258px,78vw,392px);scroll-snap-align:center;margin:0}
@media(min-width:700px){.galCard{flex-basis:clamp(320px,44vw,392px)}}
.galShot{position:relative;border-radius:clamp(20px,2.6vw,30px);overflow:hidden;
  aspect-ratio:3/4;background:#0A0A0A;border:1px solid rgba(255,255,255,.07)}
.galShot img,.galShot video{width:100%;height:100%;object-fit:cover;display:block;
  transition:scale .7s cubic-bezier(.22,1,.36,1)}
.galShot video{position:absolute;inset:0;opacity:0;transition:opacity .6s ease,scale .7s cubic-bezier(.22,1,.36,1)}
.galShot video.live{opacity:1}
@media(hover:hover){.galCard:hover .galShot img,.galCard:hover .galShot video{scale:1.03}}
@media(prefers-reduced-motion:reduce){.galShot video{display:none}}
.galShot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.34))}
.galTxt{margin:clamp(16px,2.2vw,22px) 2px 0;
  color:#8A857F;font-size:clamp(14px,1.65vw,17px);line-height:1.48;max-width:34ch}
.galTxt b{color:#F2EFE9;font-weight:600}
.galFoot{display:flex;align-items:center;gap:16px;margin-top:clamp(4px,1vw,10px)}
.galBar{flex:1;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.galBar i{display:block;height:100%;width:100%;border-radius:2px;background:var(--grad-flat);
  transform-origin:left;transform:scaleX(.2);
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
.galNav{display:none;gap:8px}
@media(min-width:900px){.galNav{display:flex}}

/* ============ FOUNDERS ============ */
.fnd{background:rgba(0,0,0,.55);border-block:1px solid var(--line);overflow:hidden}
.fndStage{position:relative;width:min(440px,80%);margin:0 auto}
.fndGlow{position:absolute;left:50%;top:40%;width:132%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(243,153,88,.36),rgba(240,66,135,.22) 40%,transparent 64%);
  filter:blur(34px)}
.fndCut{position:relative;z-index:1;width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.6))}
/* deep shadow rising from the base so the photograph melts into the page */
.fndFade{position:absolute;left:-12%;right:-12%;bottom:-2%;height:56%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 52%,#000 88%)}

/* two invisible halves — tap either side of the picture */
.fndHalf{position:absolute;top:0;bottom:0;z-index:4;width:50%;border:0;background:none;padding:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.fndHalfL{left:0}
.fndHalfR{right:0}

/* the pointer drifts from one of them to the other on its own */
.fndPtr{position:absolute;z-index:5;width:clamp(30px,7.4vw,46px);pointer-events:none;
  left:var(--px,30%);top:var(--py,30%);translate:-50% -50%;
  transition:left 1.5s cubic-bezier(.33,.02,.15,1),top 1.5s cubic-bezier(.33,.02,.15,1)}
.fndPtr i{display:block;will-change:transform;
  animation:fndBob 3.4s cubic-bezier(.42,0,.58,1) infinite alternate,
            fndSway 5.2s cubic-bezier(.42,0,.58,1) infinite alternate}
.fndPtr svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.9)) drop-shadow(0 2px 5px rgba(0,0,0,.75))}
@keyframes fndBob{from{translate:0 -7px;rotate:-3deg}to{translate:0 7px;rotate:3deg}}
@keyframes fndSway{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
.fndPtr.tapping i{animation:fndTap .55s cubic-bezier(.3,.9,.35,1),
  fndSway 5.2s cubic-bezier(.42,0,.58,1) infinite alternate}
@keyframes fndTap{0%{transform:scale(1)}26%{transform:scale(.7)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* the card sits well over the faded base */
.fndGrid{position:relative;z-index:6;max-width:620px;margin:min(-24%,-88px) auto 0;padding-inline:2px}
.fndCard{display:none}
.fndCard.on{display:block;position:relative;border-radius:22px;
  padding:clamp(24px,4.2vw,34px);min-height:clamp(250px,52vw,270px);background:rgba(9,9,9,.9);
  border:1px solid var(--line);box-shadow:0 26px 64px rgba(0,0,0,.75);
  animation:fndIn .45s cubic-bezier(.22,1,.36,1) both}
@keyframes fndIn{from{opacity:0}to{opacity:1}}
.fndCard::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(140deg,rgba(240,66,135,.42),transparent 46%,rgba(243,153,88,.30));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.fndTop{display:flex;align-items:center;gap:15px;
  padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--line)}
/* a plain black-and-white button that opens their profile */
.fndIco{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#F2EFE9;color:#0A0A0A;border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 16px rgba(0,0,0,.55),inset 0 -2px 6px rgba(0,0,0,.10);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background .22s}
.fndIco svg{width:21px;height:21px;display:block}
.fndIco:active{transform:scale(.93)}
.fndIco:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
@media(hover:hover){.fndIco:hover{transform:translateY(-2px) scale(1.06);
  background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.6)}}
.fndCard h3{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(19px,2.4vw,24px);line-height:1;margin:0}
.fndRole{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);margin:6px 0 0}
.fndBio{color:#948F89;font-size:clamp(14px,1.7vw,15.5px);line-height:1.72;margin:0;letter-spacing:.002em}
@media(prefers-reduced-motion:reduce){.fndPtr{display:none}}

/* ============ STUDIO — EDITORIAL POSTER ============ */
.office{background:#000;border-block:1px solid var(--line);overflow:hidden}
.office.sec{padding-block:clamp(50px,10vh,120px)}
.poster{width:min(1240px,100%);margin-inline:auto;
  padding-inline:clamp(8px,2.2vw,22px);position:relative}
.office h2.pLine{font-family:var(--poster);font-weight:600;text-transform:lowercase;
  font-size:clamp(64px,22vw,240px);line-height:.78;letter-spacing:-.044em;
  color:#EFEBE4;margin:0;max-width:none;position:relative;z-index:1;
  white-space:nowrap;text-shadow:none}
.office h2.pLine + h2.pLine{margin-top:-.05em}
.pLine .wd{display:inline-block;position:relative;
  opacity:0;translate:var(--fx,0) var(--fy,40px);rotate:var(--fr,0deg);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),translate 1s cubic-bezier(.22,1,.36,1),
             rotate 1s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fd,0s)}
.pLine.in .wd{opacity:1;translate:0 0;rotate:0deg}
.pBot{padding-left:.04em}

/* two words turn to the brand gradient when the pointer clicks them.
   the gradient is painted on the text itself — no overlay to clip the letters. */
.pLine .gword{position:relative;
  padding:.26em 0;margin:-.26em 0;          /* paint box taller than the glyphs */
  background:linear-gradient(100deg,#F39958 0%,#F26E7A 50%,#F04287 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:#EFEBE4;
  text-shadow:none;
  transition:-webkit-text-fill-color .6s ease,color .6s ease}
.poster.clicked .gword{-webkit-text-fill-color:transparent;color:transparent}
.pCursor{position:absolute;right:-.16em;bottom:-.20em;width:.30em;height:.30em;z-index:9;
  opacity:0;translate:130% 140%;pointer-events:none}
.pCursor svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.75)) drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.pCursor .ring{position:absolute;left:8%;top:6%;width:170%;aspect-ratio:1;border-radius:50%;
  border:.035em solid rgba(249,178,92,.95);opacity:0;translate:-50% -50%}
.poster.cursoring .pCursor{animation:pCurIn .8s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes pCurIn{from{opacity:0;translate:130% 140%;scale:1.2}to{opacity:1;translate:0 0;scale:1}}
.poster.clicked .pCursor{animation:pCurClick 2.4s cubic-bezier(.3,.9,.35,1) forwards}
@keyframes pCurClick{
  0%{opacity:1;scale:1;translate:0 0}
  9%{scale:.7} 20%{scale:1.06} 30%{scale:1}
  54%{opacity:1;translate:0 0}
  100%{opacity:0;translate:170% 180%;scale:.94}
}
.poster.clicked .pCursor .ring{animation:pCurRing .75s ease-out forwards}
@keyframes pCurRing{0%{opacity:1;scale:.15}100%{opacity:0;scale:2.1}}

/* the photographs drift in the gap and just clip the type */
.pStage{position:relative;z-index:5;width:82%;margin:-6% auto -21%;
  aspect-ratio:5/4;pointer-events:none;user-select:none}
@media(min-width:900px){.pStage{width:56%;margin:-5% auto -16%}}
.fcard{position:absolute;width:var(--w);border-radius:6px;overflow:hidden;
  box-shadow:0 34px 66px rgba(0,0,0,.8),0 6px 16px rgba(0,0,0,.7);
  animation:driftCard var(--fd,9s) ease-in-out infinite alternate;
  animation-delay:var(--dl,0s)}
.fcard img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  pointer-events:none;user-select:none;-webkit-user-drag:none}
.fcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 44%)}
@keyframes driftCard{
  0%  {transform:translate3d(0,-10px,0) rotate(calc(var(--rot) - 1.1deg))}
  100%{transform:translate3d(0,10px,0)  rotate(calc(var(--rot) + 1.1deg))}
}
@media(prefers-reduced-motion:reduce){
  .fcard{animation:none;transform:rotate(var(--rot))}
  .pCursor{display:none}
  .poster .gword{-webkit-text-fill-color:transparent;color:transparent}
  .pLine .wd{transition:opacity .4s;translate:0 0;rotate:0deg}
}

/* ============ RAILS ============ */
.rail-head{display:flex;align-items:center;gap:12px}
.rail-nav{display:flex;gap:8px;margin-left:auto}
.rnav{width:44px;height:44px;border-radius:50%;border:1px solid #5A5A5A;background:var(--ink-2);color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.rnav:hover{border-color:var(--accent);color:var(--accent)}
.rail{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 22px;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none}

/* the card takes the reel's own ratio; nothing to tap, it just plays */
.reel{flex:none;height:clamp(300px,54vw,430px);width:calc(clamp(300px,54vw,430px) * var(--ar,0.5634));border-radius:16px;overflow:hidden;position:relative;display:block;background:var(--ink-3);border:1px solid rgba(255,255,255,.06)}
.reel .reelv,.reel .reelt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
a.reel{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a.reel:hover{transform:translateY(-8px)}
.reel .reelig{position:absolute;top:11px;right:11px;z-index:2;opacity:.9;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));line-height:0}
.reel:hover{transform:translateY(-8px)}
.reel .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 34%,rgba(0,0,0,.6) 100%)}
.reel .rttl{position:absolute;left:14px;right:14px;bottom:14px;z-index:2}
.reel .rnum{font-family:var(--display);font-size:clamp(28px,4vw,40px);line-height:.8;display:block;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.reel .rc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-top:8px;display:block}
.reel .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:56px;height:56px;border-radius:50%;
  background:rgba(10,10,10,.42);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.8);color:#fff;display:grid;place-items:center;z-index:2;
  transition:transform .3s,background .3s,border-color .3s,color .3s}
.reel:hover .play{transform:translate(-50%,-50%) scale(1.12);background:var(--grad-flat);border-color:transparent;color:#0A0A0A}
.reel .igbadge{position:absolute;top:12px;right:12px;z-index:2}

/* each card takes its own image's shape, so nothing is cropped or stretched */
.post{flex:none;height:clamp(330px,58vw,460px);width:calc(clamp(330px,58vw,460px) * var(--ar,0.75));border-radius:12px;overflow:hidden;position:relative;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1);background:var(--ink-3);border:1px solid rgba(255,255,255,.06)}
.post:hover{transform:translateY(-8px) rotate(-1deg)}
.post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============ REVIEWS ============ */
.revs{display:flex;gap:clamp(14px,2vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 20px;
  margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);
  overscroll-behavior-x:contain;cursor:grab}
.revs::-webkit-scrollbar{display:none}
.revs.grabbing{cursor:grabbing}
.rev{width:clamp(272px,31vw,368px);flex:none;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px;background:var(--ink-2);padding:22px;display:flex;flex-direction:column;gap:16px;transition:border-color .3s,background .3s}
.rev.on{border-color:var(--hot);background:var(--ink-3)}
.rev-top{display:flex;align-items:center;gap:13px}
.rev-av{width:50px;height:50px;border-radius:50%;flex:none;object-fit:cover;background:var(--grad);padding:2px}
.rev-name{font-weight:700;font-size:15px;line-height:1.2}
.rev-biz{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-top:3px}
.rev-player{display:flex;align-items:center;gap:14px}
.pbtn{width:48px;height:48px;border-radius:50%;flex:none;border:0;background:var(--grad-flat);color:#0A0A0A;display:grid;place-items:center;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pbtn:hover{transform:scale(1.07);box-shadow:0 8px 22px rgba(245,48,140,.4)}
.wave{display:flex;align-items:center;gap:2.5px;height:44px;flex:1;overflow:hidden}
.wave i{flex:1;min-width:2px;border-radius:2px;background:#3A3A3A;transition:background .2s;transform-origin:center;height:20%}
.rev.on .wave i{background:var(--grad-flat)}
.rev-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5C5C5C}
.rev-quote{font-family:var(--pen);font-size:20px;color:var(--accent);line-height:1.35;margin:0}
.demo-flag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5C5C5C}

/* ============ PACKAGES ============ */
.packs{display:flex;gap:clamp(14px,1.8vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 20px;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);cursor:grab}
.packs::-webkit-scrollbar{display:none}
.packs.grabbing{cursor:grabbing}
.pack{width:clamp(258px,29vw,318px);flex:none;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px;background:var(--ink-2);padding:26px 22px 22px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s,border-color .3s,background .3s;display:flex;flex-direction:column;gap:14px;font-family:inherit}
.pack:hover{transform:translateY(-6px);border-color:#3E3E3E;background:var(--ink-3)}
.pack:focus-visible{border-color:var(--sun)}
.pack::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:soft-light}
.pack:hover::after{opacity:.16}
.pack .pnum{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--mist)}
.pack .ptitle{font-family:var(--display);text-transform:uppercase;font-size:clamp(21px,2.6vw,27px);line-height:.94;display:block}
.pack ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.pack li{font-size:13.5px;color:#B4B4B4;display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.pack li svg{flex:none;margin-top:3px;color:var(--accent)}
.price-lock{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.blurprice{font-family:var(--display);font-size:30px;filter:blur(7px);user-select:none;-webkit-user-select:none;color:var(--paper);line-height:1}
.unlock{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px;text-align:right}
.pack.wide li{color:var(--mist)}

/* ============ FORM ============ */
.form-sec{background:rgba(0,0,0,.6);border-block:1px solid var(--line);scroll-margin-top:80px}
.form-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:start}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
.form-card{border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.74);backdrop-filter:blur(6px);padding:clamp(20px,3vw,34px)}
.picked{display:none;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;background:rgba(245,48,140,.12);border:1px solid rgba(245,48,140,.4);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#FFB9DA;margin-bottom:20px}
.picked.show{display:flex}
.picked button{background:none;border:0;color:inherit;cursor:pointer;margin-left:auto;opacity:.7;font-size:15px;line-height:1}
.f{margin-bottom:18px}
.f label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.f input,.f select{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:14px 15px;font-size:15px;transition:border-color .2s,background .2s}
.f input::placeholder{color:#5A5A5A}
.f input:focus,.f select:focus{border-color:var(--hot);background:#161616;outline:none}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238E8E8E' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.f select option{background:#161616;color:#F2EFE9}
.ig-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--ink-2);overflow:hidden;transition:border-color .2s}
.ig-input:focus-within{border-color:var(--hot)}
.ig-input .at{padding:14px 4px 14px 15px;color:var(--mist);font-size:15px;font-weight:500;user-select:none}
.ig-input input{border:0;background:transparent;padding-left:2px;border-radius:0}
.ig-input input:focus{background:transparent}
.ig-input .goig{flex:none;padding:0 14px;color:var(--mist);display:grid;place-items:center;align-self:stretch;transition:color .2s}
.ig-input .goig:hover{color:var(--hot)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.hint{font-size:12px;color:#6A6A6A;margin-top:7px}
.err{color:#FF6B8E;font-size:12px;margin-top:7px;display:none}
.err.show{display:block}
#otherWrap{display:none}
#otherWrap.show{display:block}
.submit{width:100%;justify-content:center;margin-top:6px}
.form-side .big{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,6vw,74px);line-height:.98;margin:.14em 0 0;font-weight:400}
.pts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px}
.pts li{display:flex;gap:12px;align-items:flex-start;color:#B4B4B4;font-size:14.5px}
.pts .n{font-family:var(--mono);font-size:11px;color:var(--accent);padding-top:3px;flex:none}
.sent{display:none;text-align:center;padding:30px 10px}
.sent.show{display:block}
.sent .tick{width:64px;height:64px;border-radius:50%;background:var(--grad-flat);display:grid;place-items:center;margin:0 auto 18px;color:#0A0A0A}
.sent h3{font-family:var(--display);text-transform:uppercase;font-size:30px;margin:0 0 10px;font-weight:400}
.sent p{color:var(--mist);margin:0 auto;max-width:36ch;font-size:14.5px}

/* ============ FOOTER ============ */
.foot{padding-block:clamp(50px,7vw,86px) 34px;position:relative;overflow:hidden;background:transparent}
.foot-logo{display:block;width:clamp(112px,13vw,142px);margin-bottom:4px}
.foot::before{content:"";position:absolute;left:50%;bottom:-38%;width:120%;aspect-ratio:2/1;
  translate:-50% 0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(212,58,120,.16),transparent 62%);
  filter:blur(50px)}
.foot>.wrap{position:relative;z-index:1}
.foot-mark{font-family:var(--display);text-transform:uppercase;font-size:clamp(52px,15.5vw,220px);line-height:.92;letter-spacing:-.02em;margin:0 0 clamp(28px,4vw,48px);font-weight:400}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;padding-top:30px;border-top:1px solid var(--line)}
.foot-cols h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin:0 0 14px;font-weight:400}
.foot-cols a,.foot-cols p{display:block;color:#C4C4C4;font-size:14.5px;margin:0 0 10px;transition:color .2s}
.foot-cols a:hover{color:var(--accent)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5A5A5A}
.floats{position:fixed;right:18px;bottom:18px;z-index:790;display:flex;flex-direction:column;gap:12px}
.floats-l{right:auto;left:18px;position:fixed}
.tel{background:#F2EFE9;color:#0A0A0A}

.floats a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s;position:relative}
.floats a:hover{transform:scale(1.08)}
.floats .igf:hover{transform:scale(1.08)}
.wa{background:#25D366;color:#0A0A0A}
.igf{background:var(--grad);color:#fff;bottom:0;animation:igFloat 3.4s ease-in-out infinite;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 22px rgba(245,48,140,.45),0 0 44px rgba(247,164,74,.22)}
/* backlight glow sitting behind the button */
.igf::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:var(--grad);filter:blur(9px);opacity:.5;z-index:-1;animation:igGlow 3.4s ease-in-out infinite}
.igf svg{position:relative;z-index:1}
.igf:hover{animation-play-state:paused;box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 30px rgba(245,48,140,.7),0 0 60px rgba(247,164,74,.35)}
.igf:hover::before{opacity:.8}
@keyframes igFloat{0%,100%{bottom:0}50%{bottom:9px}}
@keyframes igGlow{0%,100%{opacity:.42;transform:scale(.94)}50%{opacity:.75;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.igf,.igf::before{animation:none}}
@media(max-width:520px){.floats a{width:50px;height:50px}}

/* ============ PEEPING MASCOT ============ */
.peep{position:fixed;width:clamp(120px,17vw,228px);z-index:700;pointer-events:none;
  opacity:0;visibility:hidden;will-change:transform,opacity}
.peep svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 34px rgba(0,0,0,.5));overflow:visible}
.peep.r>.inner{transform:scaleX(-1)}
.peep.go{visibility:visible}
.peep.l.go{animation:zipL 2.9s cubic-bezier(.32,1.25,.45,1) forwards}
.peep.r.go{animation:zipR 2.9s cubic-bezier(.32,1.25,.45,1) forwards}
.peep.b.go{animation:zipB 2.9s cubic-bezier(.32,1.25,.45,1) forwards}
@keyframes zipL{
  0%  {transform:translateX(-106%) rotate(-15deg) scale(.9);opacity:0}
  16% {transform:translateX(-6%)   rotate(6deg)   scale(1.06);opacity:1}
  26% {transform:translateX(-18%)  rotate(-3deg)  scale(1)}
  40% {transform:translateX(-13%)  rotate(1deg)   scale(1)}
  72% {transform:translateX(-15%)  rotate(-1deg)  scale(1);opacity:1}
  84% {transform:translateX(-3%)   rotate(8deg)   scale(1.04);opacity:1}
  100%{transform:translateX(-114%) rotate(-18deg) scale(.92);opacity:0}
}
@keyframes zipR{
  0%  {transform:translateX(106%) rotate(15deg) scale(.9);opacity:0}
  16% {transform:translateX(6%)   rotate(-6deg) scale(1.06);opacity:1}
  26% {transform:translateX(18%)  rotate(3deg)  scale(1)}
  40% {transform:translateX(13%)  rotate(-1deg) scale(1)}
  72% {transform:translateX(15%)  rotate(1deg)  scale(1);opacity:1}
  84% {transform:translateX(3%)   rotate(-8deg) scale(1.04);opacity:1}
  100%{transform:translateX(114%) rotate(18deg) scale(.92);opacity:0}
}
@keyframes zipB{
  0%  {transform:translateY(104%) rotate(0)     scale(.9);opacity:0}
  16% {transform:translateY(12%)  rotate(-6deg) scale(1.06);opacity:1}
  26% {transform:translateY(30%)  rotate(3deg)  scale(1)}
  40% {transform:translateY(22%)  rotate(0)     scale(1)}
  72% {transform:translateY(25%)  rotate(-1deg) scale(1);opacity:1}
  84% {transform:translateY(10%)  rotate(6deg)  scale(1.04)}
  100%{transform:translateY(110%) rotate(0)     scale(.92);opacity:0}
}
/* the prop rises into position */
.peep .prop{opacity:0;transform:translateY(44px) scale(.72);transform-origin:100px 150px}
.peep.go .prop{animation:propUp 2.9s cubic-bezier(.3,1.1,.35,1) forwards}
@keyframes propUp{
  0%,14%{opacity:0;transform:translateY(44px) scale(.72)}
  26%   {opacity:1;transform:translateY(-3px) scale(1.04)}
  32%   {opacity:1;transform:translateY(0) scale(1)}
  74%   {opacity:1;transform:translateY(0) scale(1)}
  86%   {opacity:0;transform:translateY(38px) scale(.8)}
  100%  {opacity:0;transform:translateY(44px) scale(.72)}
}
/* PHOTO — flash, no picture shown */
.peep .flash{opacity:0;transform-origin:100px 132px}
.peep.task-photo.go .flash{animation:snap .85s ease-out 1.18s}
@keyframes snap{
  0%{opacity:0;transform:scale(.2)} 10%{opacity:1;transform:scale(1.8)}
  30%{opacity:.3;transform:scale(2.7)} 100%{opacity:0;transform:scale(3.4)}
}
.peep .bulb{opacity:.55}
.peep.task-photo.go .bulb{animation:bulb .85s ease-out 1.18s}
@keyframes bulb{0%{opacity:.55}10%{opacity:1;fill:#fff}100%{opacity:.55}}
/* VIDEO — rec light blinks */
.peep.task-video.go .recdot{animation:blink .42s steps(1) 4 1.05s}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.15}}
/* LAPTOP — keys tapping */
.peep.task-laptop.go .keys rect{animation:typing .26s ease-in-out 6 alternate 1.05s}
.peep.task-laptop.go .keys rect:nth-child(2){animation-delay:1.14s}
.peep.task-laptop.go .keys rect:nth-child(3){animation-delay:1.22s}
@keyframes typing{from{opacity:.35;transform:scaleX(.86)}to{opacity:1;transform:scaleX(1)}}
.peep .keys rect{transform-origin:62px center}
/* CALL — ring waves */
.peep .rings path{opacity:0}
.peep.task-call.go .rings path{animation:ring .9s ease-out 3 1s}
.peep.task-call.go .rings path:nth-child(2){animation-delay:1.14s}
@keyframes ring{0%{opacity:0;transform:translateX(-8px)}35%{opacity:1}100%{opacity:0;transform:translateX(6px)}}
/* speed lines on the way out */
.peep .lines rect{opacity:0}
.peep.go .lines rect{animation:zip .5s ease-out 2.34s}
.peep.go .lines rect:nth-child(2){animation-delay:2.40s}
.peep.go .lines rect:nth-child(3){animation-delay:2.37s}
.peep.go .lines rect:nth-child(4){animation-delay:2.44s}
@keyframes zip{
  0%{opacity:0;transform:translateX(-40px) scaleX(.2)}
  30%{opacity:.95;transform:translateX(10px) scaleX(1)}
  100%{opacity:0;transform:translateX(90px) scaleX(1.25)}
}
@media(max-width:620px){.peep{width:104px}}

/* the page briefly looks like it's being filmed — never blocks anything */
.recscreen{position:fixed;inset:0;z-index:720;pointer-events:none;opacity:0;visibility:hidden}
.recscreen.on{visibility:visible;animation:recIn 1.7s ease forwards}
@keyframes recIn{0%{opacity:0}12%{opacity:1}78%{opacity:1}100%{opacity:0;visibility:hidden}}
.recscreen::after{content:"";position:absolute;inset:0;border:4px solid rgba(255,59,59,.7);
  box-shadow:inset 0 0 110px rgba(255,59,59,.18)}
.recchip{position:absolute;top:calc(env(safe-area-inset-top) + 84px);left:50%;translate:-50%;
  display:flex;align-items:center;gap:9px;background:rgba(10,10,10,.82);border:1px solid rgba(255,59,59,.55);
  border-radius:999px;padding:8px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#FF7A7A;backdrop-filter:blur(8px)}
.recchip i{width:9px;height:9px;border-radius:50%;background:#FF3B3B;animation:blink .8s steps(1) infinite}
.recbrk{position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.7)}
.recbrk.a{top:22px;left:22px;border-right:0;border-bottom:0}
.recbrk.b{top:22px;right:22px;border-left:0;border-bottom:0}
.recbrk.c{bottom:22px;left:22px;border-right:0;border-top:0}
.recbrk.d{bottom:22px;right:22px;border-left:0;border-top:0}

/* ============ SCROLL MOTION ============ */
/* uses `translate`/`scale`, never `transform`, so hover transforms keep working */
.fx{opacity:0;translate:0 30px;
  transition:opacity .9s cubic-bezier(.22,.68,.24,1),translate .9s cubic-bezier(.22,.68,.24,1),scale .9s cubic-bezier(.22,.68,.24,1);
  transition-delay:var(--d,0s)}
.fx.in{opacity:1;translate:0 0;scale:1}
.fx-l{translate:-40px 0}
.fx-r{translate:40px 0}
.fx-s{scale:.94;translate:0 20px}
.fx-slow{transition-duration:1.3s}

/* ============ PHONE SHOWCASE — CUTOUT COLLAGE ============ */
.grids{background:rgba(0,0,0,.6);border-block:1px solid var(--line);overflow:hidden}
/* full width, and anchored right so the forearm leaves the screen instead of
   stopping mid-air. the pointing hand enters from the opposite edge. */
.phonestage{position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  margin-top:clamp(34px,6vw,72px);display:flex;justify-content:flex-end;overflow:hidden}
.scene{position:relative;width:clamp(390px,95vw,1020px);aspect-ratio:760/778;
  margin-right:-4vw;flex:none;
  opacity:0;translate:0 40px;scale:.95;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1),
             scale .9s cubic-bezier(.22,1,.36,1)}
.phonestage.on .scene{opacity:1;translate:0 0;scale:1}
@media(min-width:900px){.scene{width:clamp(560px,62vw,1560px)}}

.hpDot{position:absolute;left:50%;top:62%;width:78%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;background:linear-gradient(158deg,#F39958,#F26E7A 48%,#F04287)}

.hpScreen{position:absolute;left:41.243%;top:48.13%;width:43.554%;
  aspect-ratio:0.4901;translate:-50% -50%;rotate:-29.15deg;
  overflow:hidden;background:#000;z-index:2;border-radius:2.5%/1.2%}
.hpTrack{position:absolute;inset:0;display:flex;will-change:transform}
.hpTrack img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.hpHand{position:absolute;inset:0;width:100%;height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.6))}
/* long enough to start off the left edge of the screen and still reach the phone */
.hpFinger{position:absolute;left:-76%;top:47%;width:104%;z-index:4;pointer-events:none;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.55));
  transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .4s}

.gdots{display:none}
.gdots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.16);
  transition:width .45s cubic-bezier(.22,1,.36,1),background .45s}
.gdots i.on{width:22px;background:linear-gradient(90deg,#F39958,#F04287)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes softIn{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .blob,.ambient b{animation:none!important}
  .logo .lg-heart{animation:none!important}
  .peep.go{animation:softIn 2.9s ease forwards!important}
  .peep .prop{opacity:1!important;transform:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


@keyframes vu{from{transform:scaleY(.18)}to{transform:scaleY(1)}}

/* WordPress compatibility */
.wp-header, .wp-footer { display:none; }
.wp-page { min-height: 50vh; }
.aligncenter { margin-left:auto; margin-right:auto; }
img { max-width:100%; height:auto; }