@font-face{
  font-family:"Farhang";
  src:url("../fonts/FarhangVariable.woff") format("woff-variations"),
      url("../fonts/FarhangVariable.woff") format("woff");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root{
  --paper:#f3f1eb;
  --ink:#11120f;
  --muted:#686a62;
  --line:rgba(17,18,15,.16);
  --red:#ff3b30;
  --acid:#d9ff43;
  --card:#f8f7f2;
  --max:1280px;
  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Farhang",Tahoma,Arial,sans-serif;
  overflow-x:hidden;
  --mx:50vw;
  --my:40vh;
}
body,button{font-family:"Farhang",Tahoma,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{color:inherit}
main{padding-top:74px}
.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
}

/* fixed header */
.topbar{
  position:fixed;inset:0 0 auto;
  height:74px;
  display:flex;align-items:center;
  background:rgba(243,241,235,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  z-index:110;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center}
.brand-logo{display:block;height:42px;width:auto}
.nav{display:flex;gap:26px;font-size:13px;color:var(--muted)}
.nav a{position:relative;transition:color .25s}
.nav a:hover{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;right:0;bottom:-7px;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)
}
.nav a:hover::after{transform:scaleX(1)}

/* universal motion layers */
.scroll-progress{
  position:fixed;top:0;right:0;width:100%;height:3px;z-index:140;
  transform:scaleX(0);transform-origin:right center;background:var(--red);pointer-events:none
}
.pointer-glow{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  pointer-events:none;z-index:1;opacity:.095;
  background:radial-gradient(circle,var(--acid) 0%,rgba(217,255,67,.12) 35%,transparent 68%);
  mix-blend-mode:multiply;will-change:transform
}
.cursor-dot,.cursor-ring{
  position:fixed;left:0;top:0;pointer-events:none;z-index:200;border-radius:50%;opacity:0;will-change:transform
}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink)}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(17,18,15,.46);
  transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s
}
body.has-pointer .cursor-dot,body.has-pointer .cursor-ring{opacity:1}
body.cursor-active .cursor-ring{
  width:58px;height:58px;margin:-29px 0 0 -29px;border-color:transparent;
  background:rgba(217,255,67,.56);mix-blend-mode:multiply
}

/* reveal */
[data-reveal]{
  opacity:0;transform:translate3d(0,32px,0);filter:blur(5px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)
}
[data-reveal].show{opacity:1;transform:none;filter:none}
.mask-reveal{display:block;overflow:hidden}
.mask-reveal>span{
  display:block;transform:translateY(112%);transition:transform 1s var(--ease);will-change:transform
}
.mask-reveal.is-visible>span{transform:none}

/* HERO — 3D object + scroll narrative */
.hero{
  position:relative;height:165svh;isolation:isolate;
  --hero-p:0;
}
.hero-sticky{
  position:sticky;top:74px;height:calc(100svh - 74px);overflow:hidden;display:grid;align-items:center
}
.hero-grid{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);
  gap:clamp(42px,6vw,92px);align-items:end;padding:60px 0
}
.hero-main{min-width:0;will-change:transform,opacity}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:8px 12px;margin-bottom:26px;
  transition:transform .4s var(--ease),background .4s var(--ease)
}
.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--red);display:block}
.eyebrow:hover{transform:translateY(-3px);background:rgba(255,255,255,.48)}
.hero h1{
  width:100%;max-width:820px;margin:0;
  font-size:clamp(64px,8.1vw,118px);line-height:.94;letter-spacing:clamp(-3px,-.18vw,-1px);
  font-weight:800;text-align:right
}
.hero h1 .thin{font-weight:300}
.hero-copy{
  max-width:580px;margin:32px 0 0 auto;font-size:clamp(17px,1.55vw,23px);
  line-height:1.9;letter-spacing:-.45px
}
.hero-side{
  width:100%;max-width:390px;border-top:1px solid var(--ink);padding-top:14px;align-self:end;
  will-change:transform,opacity
}
.hero-side .num{font:500 11px/1 Arial,sans-serif;color:var(--muted);direction:ltr;text-align:right;letter-spacing:1px}
.hero-side p{font-size:15px;line-height:2;color:var(--muted);margin:22px 0 0}

/* abstract physical object */
.hero-object-stage{
  position:absolute;z-index:0;left:clamp(-90px,-4vw,-38px);top:50%;width:clamp(360px,36vw,560px);
  aspect-ratio:1;transform:translateY(-50%);perspective:1200px;pointer-events:none
}
.artifact-shell{
  position:absolute;inset:8%;transform-style:preserve-3d;will-change:transform
}
.artifact{
  position:absolute;inset:10%;transform-style:preserve-3d;
  transform:rotateX(58deg) rotateY(-20deg) rotateZ(-8deg);will-change:transform
}
.artifact-slab{
  position:absolute;left:8%;right:8%;height:28%;border:1px solid rgba(17,18,15,.24);
  display:flex;align-items:flex-end;justify-content:space-between;padding:15px 18px;
  font:700 12px/1 Arial,sans-serif;letter-spacing:2px;direction:ltr;
  box-shadow:0 28px 45px rgba(17,18,15,.08);transform-origin:center;backface-visibility:hidden
}
.artifact-slab span{position:relative;z-index:2}
.artifact-slab i{width:10px;height:10px;border-radius:50%;border:1px solid currentColor;display:block}
.slab-press{
  top:4%;background:#f8f7f2;transform:translateZ(74px) rotateZ(2deg)
}
.slab-asr{
  top:34%;background:var(--red);transform:translateZ(36px) translateX(-18px) rotateZ(-2deg)
}
.slab-media{
  top:64%;background:var(--ink);color:#f6f4ee;transform:translateZ(4px) translateX(12px) rotateZ(1deg)
}
.artifact-spine{
  position:absolute;right:-6%;top:7%;height:84%;width:32px;background:var(--acid);
  border:1px solid rgba(17,18,15,.24);writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;align-items:center;justify-content:center;font:700 9px/1 Arial,sans-serif;letter-spacing:1px
}
.artifact-shadow{
  position:absolute;left:14%;right:2%;bottom:4%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(17,18,15,.18),transparent 70%);
  filter:blur(12px);transform:rotate(-8deg);will-change:transform,opacity
}
.hero-coordinate{
  position:absolute;left:12%;bottom:2%;font:500 9px/1 Arial,sans-serif;letter-spacing:1.4px;
  direction:ltr;color:var(--muted);opacity:.7
}
.scroll-cue{
  position:absolute;z-index:4;right:20px;bottom:20px;display:flex;align-items:center;gap:10px;
  font:600 9px/1 Arial,sans-serif;letter-spacing:1.6px;direction:ltr;color:var(--muted)
}
.scroll-cue i{width:54px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;width:45%;background:var(--ink);animation:cue 1.8s var(--ease) infinite
}
@keyframes cue{from{transform:translateX(-120%)}to{transform:translateX(250%)}}

/* ticker */
.motion-marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper)}
.motion-marquee-track{
  display:flex;width:max-content;padding:15px 0 13px;animation:marqueeMove 24s linear infinite;
  direction:ltr;will-change:transform
}
.motion-marquee span{
  display:flex;align-items:center;gap:28px;padding-inline:28px;white-space:nowrap;
  font:600 12px/1 Arial,sans-serif;letter-spacing:1.5px
}
.motion-marquee i{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}
@keyframes marqueeMove{to{transform:translateX(-50%)}}

/* statement */
.statement{position:relative;background:var(--ink);color:#f7f5ef;padding:110px 0;overflow:hidden}
.statement::after{
  content:"";position:absolute;width:42vw;height:42vw;right:-18vw;bottom:-27vw;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 46px rgba(255,255,255,.018)
}
.kicker{font-size:12px;color:#aaa99f;margin-bottom:28px}
.statement h2{
  margin:0;max-width:1050px;font-size:clamp(38px,6.3vw,88px);line-height:1.22;
  letter-spacing:-1.7px;font-weight:500
}
.statement h2 em{font-style:normal;color:var(--acid)}
.statement-bottom{
  display:flex;justify-content:space-between;align-items:end;gap:40px;
  margin-top:80px;border-top:1px solid #3b3c37;padding-top:22px
}
.statement-bottom p{margin:0;max-width:610px;color:#bdbdb5;line-height:1.9;font-size:14px}
.arrow{font-size:42px;transform:rotate(-45deg);display:block}

/* PINNED BRAND STORY */
.brand-story{
  position:relative;height:320svh;background:var(--paper);--story-p:0
}
.brand-story-sticky{
  position:sticky;top:74px;height:calc(100svh - 74px);display:grid;align-items:center;overflow:hidden
}
.brand-story-grid{
  display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  gap:clamp(44px,7vw,110px);align-items:center
}
.brand-story-copy .kicker{color:var(--muted)}
.brand-story-copy h2{
  margin:0;font-size:clamp(54px,7vw,98px);line-height:.98;letter-spacing:-2.2px
}
.brand-story-copy h2 span{font-weight:300}
.brand-story-copy>p{max-width:350px;margin:28px 0 0;color:var(--muted);font-size:14px;line-height:1.9}
.story-dots{display:grid;gap:0;margin-top:46px;border-top:1px solid var(--line)}
.story-dot{
  appearance:none;border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:15px 0;display:grid;grid-template-columns:46px 1fr;align-items:center;text-align:right;
  cursor:pointer;color:var(--muted);font-size:13px;transition:color .3s,transform .3s
}
.story-dot b{font:600 10px/1 Arial,sans-serif;direction:ltr}
.story-dot.is-active{color:var(--ink);transform:translateX(-7px)}
.story-dot.is-active span{font-weight:700}

.brand-stack{position:relative;height:min(68vh,680px);perspective:1200px}
.brand-panel{
  position:absolute;inset:0;border:1px solid var(--ink);padding:30px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  transform-origin:center bottom;
  opacity:0;pointer-events:none;
  transform:translate3d(0,70px,-120px) rotateX(-5deg) scale(.94);
  transition:opacity .6s var(--ease),transform .75s var(--ease),filter .6s var(--ease);
  filter:blur(5px);will-change:transform,opacity
}
.brand-panel.is-active{
  opacity:1;pointer-events:auto;transform:translate3d(0,0,0) rotateX(0) scale(1);filter:none;z-index:4
}
.brand-panel.is-past{
  opacity:.12;transform:translate3d(0,-38px,-170px) rotateX(4deg) scale(.92);filter:blur(2px);z-index:1
}
.brand-panel.is-next{
  opacity:.18;transform:translate3d(0,48px,-110px) rotateX(-4deg) scale(.95);filter:blur(2px);z-index:2
}
.press-panel{background:#f8f7f2}
.asr-panel{background:var(--red)}
.media-panel{background:var(--ink);color:#f6f4ee;border-color:var(--ink)}
.panel-number{font:600 10px/1 Arial,sans-serif;letter-spacing:1.4px;direction:ltr;opacity:.7}
.panel-copy{position:relative;z-index:3}
.panel-copy h3{
  margin:0 0 16px;font-size:clamp(42px,5.4vw,76px);line-height:.96;letter-spacing:-1.7px
}
.panel-copy p{margin:0;max-width:500px;font-size:16px;line-height:1.9;opacity:.7}
.panel-open{
  align-self:flex-start;position:relative;z-index:3;border-bottom:1px solid currentColor;padding-bottom:6px;font-size:12px
}

/* visual language per brand */
.panel-visual{position:absolute;inset:auto 0 0 auto;width:54%;height:64%;pointer-events:none}
.press-visual{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:0 24px 24px}
.press-visual i{
  width:15%;background:#e3e1d9;border:1px solid rgba(17,18,15,.16);transform-origin:bottom;
  animation:books 4.5s var(--ease) infinite alternate
}
.press-visual i:nth-child(1){height:58%}
.press-visual i:nth-child(2){height:84%;animation-delay:-1s}
.press-visual i:nth-child(3){height:70%;background:var(--acid);animation-delay:-2.2s}
.press-visual i:nth-child(4){height:92%;animation-delay:-.4s}
.press-visual i:nth-child(5){height:64%;animation-delay:-3s}
@keyframes books{to{transform:translateY(-12px) rotate(.8deg)}}

.asr-visual{right:-4%;bottom:-7%;width:56%;height:72%;transform:rotate(-7deg)}
.asr-visual i{position:absolute;border:1px solid rgba(17,18,15,.35);background:rgba(255,255,255,.12)}
.asr-visual i:nth-child(1){inset:0 16% 12% 5%}
.asr-visual i:nth-child(2){inset:9% 8% 6% 13%;transform:rotate(4deg)}
.asr-visual i:nth-child(3){inset:18% 0 0 22%;transform:rotate(8deg)}
.asr-visual b{
  position:absolute;left:18%;bottom:14%;font:900 clamp(64px,9vw,130px)/.8 Arial,sans-serif;
  letter-spacing:-7px;opacity:.16
}

.media-visual{
  right:3%;bottom:7%;width:47%;height:54%;display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.media-visual span{
  border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;
  font-size:13px;animation:feedPulse 4s var(--ease) infinite
}
.media-visual span:nth-child(2){animation-delay:-1s}
.media-visual span:nth-child(3){animation-delay:-2s}
.media-visual span:nth-child(4){animation-delay:-3s}
@keyframes feedPulse{50%{background:rgba(217,255,67,.14);transform:translateY(-4px)}}

/* flow */
.flow{padding:105px 0 120px}
.flow-box{position:relative;overflow:hidden;border:1px solid var(--ink);padding:28px}
.flow-title{font-size:12px;color:var(--muted);margin-bottom:50px}
.flow-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:18px}
.node{padding:32px 10px;border-top:1px solid var(--line)}
.node small{display:block;color:var(--muted);font:500 10px/1 Arial,sans-serif;margin-bottom:12px}
.node strong{font-size:clamp(24px,3vw,40px);letter-spacing:-1px}
.flow-arrow{font-size:32px;color:var(--red)}
.flow-progress{height:2px;background:var(--line);margin-top:12px;overflow:hidden}
.flow-progress i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:right;will-change:transform}
.flow-box::after{
  content:"";position:absolute;inset:0 auto 0 -28%;width:28%;
  background:linear-gradient(90deg,transparent,rgba(217,255,67,.25),transparent);
  transform:skewX(-18deg);animation:flowSweep 5.8s var(--ease) infinite;pointer-events:none
}
@keyframes flowSweep{0%,55%{left:-35%;opacity:0}65%{opacity:1}100%{left:125%;opacity:0}}

/* selection */
.selection{position:relative;overflow:hidden;padding:118px 0;background:#deddd7}
.selection-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}
.selection h2{font-size:clamp(44px,6vw,86px);line-height:1.02;letter-spacing:-2px;margin:0}
.selection-copy{display:flex;flex-direction:column;justify-content:space-between;min-height:330px}
.selection-copy p{font-size:clamp(20px,2.4vw,31px);line-height:1.75;letter-spacing:-.7px;margin:0;max-width:760px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:45px}
.tag{border:1px solid #aaa9a2;border-radius:999px;padding:8px 13px;font-size:12px}
.selection::before{
  content:"WAY2PAY / SHOP / PRESS / ASR";position:absolute;left:-2vw;bottom:-.14em;
  font:800 clamp(72px,12vw,210px)/.8 Arial,sans-serif;letter-spacing:-8px;
  color:rgba(17,18,15,.045);white-space:nowrap;direction:ltr;pointer-events:none;
  transform:translateX(var(--selection-shift,0px));will-change:transform
}

/* group */
.group{position:relative;overflow:hidden;padding:120px 0}
.group::after{content:"";position:absolute;top:0;right:0;width:var(--group-line,0%);height:3px;background:var(--red)}
.group-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.group h2{font-size:clamp(45px,7vw,100px);line-height:.98;letter-spacing:-2.5px;margin:0}
.group-copy{padding-top:8px}
.group-copy p{font-size:18px;line-height:2;margin:0 0 24px}
.group-copy .muted{color:var(--muted);font-size:14px}
.line-link{
  display:inline-flex;align-items:center;gap:14px;margin-top:20px;border-bottom:1px solid var(--ink);
  padding-bottom:7px;font-size:13px
}
.magnetic{will-change:transform;transition:transform .18s ease-out}

/* finale */
.contact{position:relative;height:145svh;background:var(--red);color:#111;overflow:clip}
.contact-sticky{
  position:sticky;top:0;min-height:100svh;padding:110px 0 30px;display:flex;align-items:stretch
}
.contact-sticky>.wrap{display:flex;flex-direction:column}
.contact-title{
  margin:0 0 auto;font-size:clamp(60px,11vw,160px);line-height:.84;letter-spacing:-4px;
  display:flex;flex-direction:column
}
.final-word{
  display:block;opacity:.16;transform:translateY(22px) scale(.985);
  transition:opacity .55s var(--ease),transform .65s var(--ease)
}
.final-word.is-active{opacity:1;transform:none}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid rgba(0,0,0,.45);
  padding-top:20px;margin-top:48px
}
.contact p{line-height:2;margin:0;font-size:14px}
.contact .big{font-size:clamp(20px,2.5vw,34px);font-weight:600;text-align:right}
.phone-number{direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap}
.contact .line-link{transition:transform .35s var(--ease)}
.contact .line-link:hover{transform:translateX(-7px)}
footer{
  display:flex;justify-content:space-between;gap:20px;margin-top:70px;padding-top:18px;
  border-top:1px solid rgba(0,0,0,.3);font:500 10px/1.5 Arial,sans-serif
}
.contact::before{
  content:"";position:absolute;width:48vw;height:48vw;min-width:430px;min-height:430px;
  border:1px solid rgba(0,0,0,.16);border-radius:50%;left:-16vw;top:-14vw;
  transform:translate3d(0,var(--contact-orbit,0px),0);will-change:transform;pointer-events:none
}
.contact::after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--acid);
  left:20%;top:20%;box-shadow:0 0 0 11px rgba(217,255,67,.14);pointer-events:none
}

/* progressive CSS view-timeline enhancement */
@supports (animation-timeline:view()){
  .group h2{
    animation:headingDrift linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 55%
  }
  @keyframes headingDrift{
    from{transform:translateY(38px);letter-spacing:-.5px}
    to{transform:none;letter-spacing:-2px}
  }
}

/* mobile/tablet */
@media(max-width:900px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .nav{display:none}
  .brand-logo{height:34px}
  main{padding-top:64px}
  .topbar{height:64px}

  .hero{height:auto;min-height:calc(100svh - 64px)}
  .hero-sticky{position:relative;top:0;height:auto;min-height:calc(100svh - 64px);overflow:hidden}
  .hero-grid{grid-template-columns:1fr;padding:76px 0 52px;gap:42px}
  .hero h1{font-size:clamp(58px,18vw,94px);letter-spacing:-1.8px}
  .hero-copy{max-width:94%;margin-top:26px}
  .hero-side{max-width:100%}
  .hero-object-stage{
    width:72vw;min-width:330px;max-width:500px;left:-34vw;top:30%;opacity:.62
  }
  .hero-coordinate,.scroll-cue{display:none}

  .statement{padding:78px 0}
  .statement-bottom{align-items:start;flex-direction:column}

  .brand-story{height:auto;padding:84px 0}
  .brand-story-sticky{position:relative;top:0;height:auto;overflow:visible}
  .brand-story-grid{grid-template-columns:1fr;gap:44px}
  .brand-story-copy>p{max-width:520px}
  .story-dots{display:none}
  .brand-stack{height:auto;display:grid;gap:16px}
  .brand-panel,.brand-panel.is-active,.brand-panel.is-past,.brand-panel.is-next{
    position:relative;inset:auto;min-height:500px;opacity:1;pointer-events:auto;
    transform:none;filter:none
  }
  .press-visual,.asr-visual,.media-visual{opacity:.7}

  .flow{padding:40px 0 80px}
  .flow-row{grid-template-columns:1fr}
  .flow-arrow{transform:rotate(90deg);justify-self:center}

  .selection,.group{padding:78px 0}
  .selection-grid,.group-grid{grid-template-columns:1fr;gap:38px}
  .selection-copy{min-height:0}
  .tags{margin-top:32px}
  .selection::before{font-size:24vw;letter-spacing:-4px}

  .contact{height:auto;min-height:100svh}
  .contact-sticky{position:relative;top:0;min-height:100svh;padding:86px 0 28px}
  .final-word{opacity:1;transform:none}
  .contact-grid{grid-template-columns:1fr}
  .contact::before{width:95vw;height:95vw;left:-45vw;top:-30vw}
  footer{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .mask-reveal>span{transform:none}
  .pointer-glow,.cursor-dot,.cursor-ring{display:none!important}
  .brand-panel{filter:none!important}
  .flow-progress i{transform:none!important}
}