/* =============================================================================
   VERSO - theme-forge "fr-firma" design system (likeness build, horizontal-scroll
   creative agency). Original CSS by Ziwi.
   Exact reference families (Playfair Display 400, Playfair 500, Geist, Caveat) and
   measured hexes are allowed for this wave (see the repo README addendum).
   Desktop = sideways 100vh bands positioned on a 900px design grid.
   Vertical layout = <= 1024px OR prefers-reduced-motion (complete page, no engine).
   ============================================================================= */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair";src:url("../fonts/playfair-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Metric-matched fallbacks. Fix round 2: with the REAL Latin faces in place, font-display:swap
   started reflowing the mobile hero (the fallback h1 wrapped to two lines, then jumped back to
   one when Playfair arrived: CLS 0.251). size-adjust makes each fallback measure like the face
   it stands in for, so the swap no longer changes line counts. Ratios measured in-browser at
   100px: Playfair/Georgia .965, Playfair Display/Georgia .935, Geist/Helvetica 1.022,
   Caveat/cursive .845. */
@font-face{font-family:"PF-fb";src:local("Georgia"),local("Times New Roman");size-adjust:96.5%;ascent-override:104%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"PFD-fb";src:local("Georgia"),local("Times New Roman");size-adjust:93.5%;ascent-override:104%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"GS-fb";src:local("Helvetica Neue"),local("Helvetica"),local("Arial");size-adjust:102.2%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"CV-fb";src:local("Snell Roundhand"),local("Brush Script MT"),local("Georgia");size-adjust:84.5%;ascent-override:100%;descent-override:30%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --paper:#ffffff;      /* page ground */
  --ink:#000000;        /* text */
  --muted:#757575;      /* body copy */
  --line:#cccccc;       /* hairlines, dim text on dark */
  --mist:#eeeeee;       /* ghost ticker type */
  --card:#fafafa;       /* testimonial cards */
  --wash:rgba(0,0,0,.04);
  --dark:#000000;       /* black bands */
  --dark-2:#111111;     /* menu overlay */
  --dark-3:#1a1a1a;     /* giant pattern letters on black */
  --accent:#ff7a6e;     /* coral */
  --accent-2:#20c983;   /* green (rotating word alt) */
  --accent-deep:#ee5f4c;   /* coral for text on white: 3.3:1 (ref coral 2.4:1) */
  --accent-2-deep:#139c6c; /* green for text on white: 3.6:1 (ref green 2.2:1) */
  --dim:#8c8c8c;        /* 24px index numbers on white: 3.4:1 (ref #ccc 1.6:1) */
  --muted-deep:#666666; /* 12-16px copy on #f4-#fa greys: 5.2:1 (ref #757575 4.1:1) */
  --ff-display:"Playfair Display","PFD-fb",Georgia,serif;
  --ff-serif:"Playfair","PF-fb",Georgia,serif;  /* fix round 2: "Playfair Display" must NOT sit in this chain. It is preloaded and lands first, so the 64/52px headings painted in the 400 face (wider), then jumped a line when playfair-500 arrived: CLS 0.251 on the throttled 390 run. */
  --ff-sans:"Geist","GS-fb",system-ui,-apple-system,sans-serif;
  --ff-script:"Caveat","CV-fb",cursive;
  --rail:64px;          /* nav inset */
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--ff-sans);-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{background:var(--paper);min-height:100vh}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0;font-weight:inherit}
ul{list-style:none;margin:0;padding:0}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--accent);color:#fff}

/* ---------- horizontal engine (desktop) ---------- */
html.h,html.h body{height:100vh;overflow:hidden}
.site{display:flex;flex-direction:row;height:100vh;width:100vw;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:none}
.site::-webkit-scrollbar{display:none}
.band{position:relative;flex:none;height:100vh;overflow:hidden;background:var(--paper)}
.band--dark{background:var(--dark);color:#fff}
.abs{position:absolute}

/* ---------- typography ---------- */
.t-giant{font:400 180px/144px var(--ff-display);letter-spacing:-10.8px;text-transform:uppercase;text-align:center}
.t-giant .ln{display:block;white-space:nowrap}
.t-giant.abs,.t-104.abs.pd__title{z-index:2}
.pd__block{z-index:2}
.t-104{font:400 104px/104px var(--ff-display);letter-spacing:-5.2px;text-transform:uppercase}
.t-64{font:500 64px/57.6px var(--ff-serif);letter-spacing:-3.2px}
.t-48{font:500 48px/48px var(--ff-serif);letter-spacing:-1.92px}
.t-32{font:500 32px/38.4px var(--ff-serif);letter-spacing:-.96px}
.t-24{font:400 24px/33.6px var(--ff-sans);letter-spacing:-.24px;color:var(--muted)}
.t-24 b,.t-16 b,.t-lead b{font-weight:700;color:var(--ink)}
.t-16{font:400 16px/26.4px var(--ff-sans);color:var(--muted)}
.t-12{font:400 12px/21.6px var(--ff-sans);letter-spacing:.12px;text-transform:uppercase;color:var(--muted)}
.t-script{font:400 180px/162px var(--ff-script);letter-spacing:-12.6px}
.c-accent{color:var(--accent-deep)}
.band--dark .c-accent{color:var(--accent)}
.c-ink{color:var(--ink)}
.band--dark .t-16,.band--dark .t-24,.band--dark .t-12{color:var(--line)}
.band--dark .t-16 b,.band--dark .t-24 b,.band--dark .t-lead b{color:#fff}
.band--dark .t-64,.band--dark .t-48,.band--dark .t-104{color:#fff}
.para+ .para{margin-top:0}

/* underline link ("Case Study", "Read Article"...) = bullet + bold + hairline */
.ul{position:relative;display:inline-block;font:700 16px/26px var(--ff-sans);color:var(--ink);padding-bottom:2px;white-space:nowrap}
.ul::before{content:"";position:absolute;left:-14px;top:12px;width:4px;height:4px;border-radius:50%;background:currentColor}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .45s var(--ease)}
.ul:hover::after{animation:ulSweep .7s var(--ease)}
@keyframes ulSweep{0%{transform:scaleX(1);transform-origin:right}50%{transform:scaleX(0);transform-origin:right}51%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.band--dark .ul{color:#fff}

/* icons */
.ico{width:32px;height:32px;color:var(--accent)}
.ico svg{width:100%;height:100%}

/* ---------- fixed navigation layer ---------- */
.nav{position:fixed;inset:0;z-index:50;pointer-events:none;color:#fff;mix-blend-mode:difference}
.nav>*{pointer-events:auto}
.brand{position:absolute;left:var(--rail);top:45px;font:900 20px/18px var(--ff-sans);letter-spacing:-.6px;text-transform:uppercase;display:flex;gap:8px;align-items:baseline}
.brand .crumb{color:#b3b3b3}
.brand .crumb-sep{color:#b3b3b3}
.vnav{position:absolute;left:66px;top:250px;display:flex;flex-direction:column;gap:48px;transition:opacity .4s var(--ease)}
.nav.away .vnav{opacity:0;pointer-events:none}
.vnav a{writing-mode:vertical-rl;transform:rotate(180deg);font:900 14px/13px var(--ff-sans);letter-spacing:-.14px;text-transform:uppercase;position:relative}
.vnav a::after{content:"";position:absolute;top:0;bottom:0;right:-3px;width:1px;background:currentColor;transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.vnav a:hover::after{transform:scaleY(1)}
.social{position:absolute;left:var(--rail);bottom:48px;display:flex;gap:48px}
.social a{width:24px;height:24px;transition:opacity .3s}
.social a:hover{opacity:.6}
.social svg{width:24px;height:24px}
.burger{position:absolute;right:var(--rail);top:38px;width:40px;height:40px;display:grid;place-items:center}
.burger span{display:block;width:30px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:30px;height:2px;background:currentColor;transition:transform .3s var(--ease),width .3s var(--ease)}
.burger span{background:transparent}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger:hover span::after{width:20px}
.progress{position:absolute;left:0;bottom:0;height:8px;width:0;background:#fff;transition:width .1s linear}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:60;background:var(--dark-2);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.menu.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.menu ul{display:flex;flex-direction:column;align-items:center;gap:0}
.menu a{font:900 117px/117px var(--ff-sans);letter-spacing:-3px;text-transform:uppercase;display:block;transform:translateY(30px);opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease),color .3s}
.menu.open a{opacity:1;transform:none}
.menu.open li:nth-child(2) a{transition-delay:.06s}.menu.open li:nth-child(3) a{transition-delay:.12s}.menu.open li:nth-child(4) a{transition-delay:.18s}
.menu a:hover{color:var(--accent)}
.menu .close{position:absolute;right:var(--rail);top:38px;width:40px;height:40px;display:grid;place-items:center}
.menu .close svg{width:28px;height:28px}

/* custom cursor */
.cursor{position:fixed;left:0;top:0;z-index:70;width:20px;height:20px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;transform:translate(-50%,-50%);display:grid;place-items:center;font:900 14px/1 var(--ff-sans);letter-spacing:-.28px;text-transform:uppercase;color:#000;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),opacity .3s}
.cursor span{opacity:0;transition:opacity .2s}
.cursor.on{opacity:1}
.cursor.big{width:96px;height:96px}
.cursor.big span{opacity:1;transition-delay:.15s}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- reveal ---------- */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*.08s)}
html.js .rv{opacity:0;transform:translateY(24px)}
html.js .rv.in{opacity:1;transform:none}
.rv-w .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.rv-w .w i{display:inline-block;font-style:normal;transition:transform .9s var(--ease);transition-delay:calc(var(--i,0)*.06s)}
html.js .rv-w .w i{transform:translateY(110%)}
html.js .rv-w.in .w i{transform:none}

/* ---------- vertical ticker (ghost words) ---------- */
.ticker{position:absolute;top:0;left:14px;width:340px;height:100%;overflow:hidden;pointer-events:none}
.ticker__in{position:absolute;left:0;top:0;writing-mode:vertical-rl;transform:rotate(180deg);font:300 240px/312px var(--ff-serif);letter-spacing:-12px;color:var(--mist);white-space:nowrap;animation:tick 26s linear infinite}
.band--dark .ticker__in{color:rgba(255,255,255,.12)}
@keyframes tick{from{transform:rotate(180deg) translateY(0)}to{transform:rotate(180deg) translateY(50%)}}

/* ---------- rotating arc text ---------- */
.arc{position:absolute;width:450px;height:450px;pointer-events:none}
.arc svg{width:100%;height:100%;animation:spin 18s linear infinite}
.arc text{font:900 34px var(--ff-sans);letter-spacing:5px;text-transform:uppercase;fill:#e6e6e6}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- parallax media ---------- */
.px{position:absolute;overflow:hidden}
.px img,.px video{width:120%;height:100%;object-fit:cover;max-width:none;position:absolute;left:-10%;top:0}

/* ============================================================================
   HOME
   ============================================================================ */
.hero{width:2200px}
.hero__title{left:360px;top:163px;white-space:nowrap}
.hero__title .rw{display:inline-block;position:relative;min-width:129px;text-align:left;vertical-align:top}
.hero__title .rw span{position:absolute;left:0;top:0;white-space:nowrap}
.hero__title .rw span i{display:inline-block;font-style:normal;opacity:0;transform:translateY(-14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero__title .rw span.on i{opacity:1;transform:none}
.hero__title .rw span.off i{opacity:0;transform:translateY(14px)}
.hero__script{left:621px;top:212px;line-height:126px}
.hero__lead{left:643px;top:370px;width:412px}
.hero__name{left:355px;top:490px;width:1700px;height:532px;clip-path:url(#heroClip)}
.hero__name video,.hero__name img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero__svg{position:absolute;width:0;height:0}
.hero__svg text{font:900 540px var(--ff-sans);letter-spacing:-27px;text-transform:uppercase}
.hero__play{left:355px;top:540px;width:1700px;height:360px;cursor:none}
.hero__msvg{display:none}
.hero__msvg text{font:900 200px var(--ff-sans);letter-spacing:-10px;text-transform:uppercase}

/* reel lightbox */
.reel{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.reel.open{opacity:1;visibility:visible;transition:opacity .4s}
.reel video{width:min(1200px,84vw);aspect-ratio:16/9;object-fit:cover}
.reel .close{position:absolute;right:var(--rail);top:38px;color:#fff;width:40px;height:40px;display:grid;place-items:center}
.reel .close svg{width:28px;height:28px}

/* work band */
.work{width:5629px}
.sec-title{top:249px}
.sec-title .cnt{display:block;font:500 64px/58px var(--ff-serif);letter-spacing:-3.2px;color:var(--accent-deep);text-transform:none;margin-top:56px}
.pcard{position:absolute;top:0;height:900px;width:1644px;z-index:1}
.pcard:nth-of-type(2){z-index:2}.pcard:nth-of-type(3){z-index:3}.pcard:nth-of-type(4){z-index:4}.pcard:nth-of-type(5){z-index:5}.pcard:nth-of-type(6){z-index:6}.pcard:nth-of-type(7){z-index:7}.pcard:nth-of-type(8){z-index:8}
.pcard__img{left:0;top:0;width:1100px;height:900px}
.pcard__panel{position:absolute;left:1036px;top:166px;width:608px;height:569px;background:var(--paper);padding:64px 64px 64px 64px}
.pcard__panel .t-64{margin-top:23px}
.pcard__panel .t-16{margin-top:16px}
.pcard__panel .ul{position:absolute;left:78px;top:407px}
.pcard__link{position:absolute;inset:0;z-index:2}

/* about / quote band */
.quote{position:relative}
.quote__portrait{top:108px;height:792px}
.quote__portrait img{width:100%;height:100%;object-fit:cover}
.quote__text{top:158px;width:900px}
.quote__by{top:385px;width:900px}
.quote__p1{top:637px;width:370px}
.quote__p2{top:637px;width:370px}
.quote__p2 .ul{margin-top:20px;margin-left:14px}
.team{width:2278px}
.team__name{width:auto;z-index:2}
.team__name .t-64{white-space:nowrap}
.team__name .t-12{margin-top:8px}
.team__img{z-index:1}
.team__img img{width:100%;height:100%;object-fit:cover}

/* principles band */
.princ{width:2025px}
.princ__bg{position:absolute;inset:0;overflow:hidden}
.princ__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.34) contrast(.9);animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.princ__idx{left:993px;top:118px;font:400 24px/33.6px var(--ff-sans);letter-spacing:-.24px;color:#fff;width:40px}
.princ__h{left:532px;top:294px;width:960px;text-align:center;color:#fff}
.princ__h .s{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease);transform:translateY(12px)}
.princ__h .s.on{opacity:1;transform:none}
.princ__why{left:960px;top:573px;width:104px;color:#fff}
.princ__cap{left:864px;top:756px;width:296px;text-align:center;color:var(--line)}

/* numbers band */
.nums{width:2300px}
.nums__can{left:330px;top:113px;width:438px;height:675px;animation:floaty 7s ease-in-out infinite}
.nums__can img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.08) contrast(1.04)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
.nums__lead{left:730px;top:157px;width:480px}
.nums__cta{left:744px;top:296px}
.counter{top:428px;text-align:center}
.counter .n{display:block;font:400 240px/216px var(--ff-script);letter-spacing:-16.8px;color:var(--ink);text-align:right}
.counter .l{display:block;margin-top:12px;font:400 24px/33.6px var(--ff-sans);letter-spacing:-.24px;color:var(--ink)}
.counter .s{display:block;margin-top:12px;font:400 12px/21.6px var(--ff-sans);letter-spacing:.12px;text-transform:uppercase;color:var(--muted)}

/* services band */
.svc{width:3607px}
.svc__img{left:537px;top:0;width:650px;height:900px}
.svc__intro{left:1347px;top:158px;width:480px}
.svc__arc{left:2442px;top:-153px}
.scard{top:482px;width:540px}
.scard .t-48{margin-top:24px}
.scard .t-16{margin-top:24px}

/* pricing band */
.price{width:2366px}
.price__bg{position:absolute;left:-300px;top:0;width:2666px;height:900px}
.price__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.2) contrast(.95)}
.price__lead{left:360px;top:158px;width:360px}
.price__ico{left:360px;top:540px}
.price__ask{left:360px;top:603px;width:360px}
.price__cta{left:374px;top:709px}
.plan{top:158px;width:340px;height:585px}
.plan::before{content:"";position:absolute;left:-57px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.plan:first-of-type::before{display:none}
.plan .t-48{color:#fff}
.plan .p{margin-top:16px;font:400 100px/70px var(--ff-script);letter-spacing:-7px;color:var(--accent)}
.plan .pm{display:block;font:400 40px/36px var(--ff-script);letter-spacing:-2.8px;color:#fff;text-align:center}
.plan ul{position:absolute;left:18px;top:261px;width:322px}
.plan li{position:relative;font:400 16px/34.4px var(--ff-sans);color:var(--line);margin-bottom:4.5px}
.plan li::before{content:"";position:absolute;left:-18px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.plan li b{color:#fff;font-weight:700}
.plan .tag{position:absolute;left:0;top:541px;width:340px;color:var(--line)}

/* articles band */
.news{width:2456px}
.acard{top:158px;height:585px}
.acard__img{position:absolute;left:0;top:0;width:490px;height:585px;overflow:hidden}
.acard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.acard:hover .acard__img img{transform:scale(1.05)}
.acard__txt{position:absolute;left:538px;top:0;width:480px;height:585px}
.acard__txt .t-48{margin-top:31px}
.acard__txt .t-16{margin-top:16px}
.acard__txt .ul{position:absolute;left:14px;bottom:8px}
.acard__link{position:absolute;inset:0;z-index:2}

/* newsletter band */
.nl{width:1781px}
.keys{left:200px;top:140px;width:700px;height:640px}
.key{position:absolute;width:212px;height:212px;border-radius:26px;background:linear-gradient(145deg,#3a3a3a,#111 55%,#050505);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -14px 24px rgba(0,0,0,.6),0 30px 50px rgba(0,0,0,.28);display:grid;place-items:center;color:#fff;font:400 92px var(--ff-sans);animation:floaty 9s ease-in-out infinite}
.key::before{content:"";position:absolute;inset:16px 16px 26px;border-radius:18px;background:linear-gradient(160deg,#2a2a2a,#161616);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.key span{position:relative}
.key--blur{filter:blur(4px);opacity:.9}
.nl__h{left:1000px;top:158px;white-space:nowrap}
.nl__script{left:1042px;top:170px;white-space:nowrap}
.nl__p{left:1066px;top:333px;width:438px}
.field{display:block;width:476px;padding:0 0 10px;border-bottom:1px solid var(--line);font:400 22px/26.4px var(--ff-sans);color:var(--ink);background:transparent;outline:0;transition:border-color .3s}
.field::placeholder{color:var(--muted)}
.field:focus{border-color:var(--ink)}
.nl__f1{left:1066px;top:497px}
.nl__f2{left:1066px;top:600px}
.nl__btn{left:1080px;top:709px}
.form-ok{font:400 16px/26px var(--ff-sans);color:var(--ink);display:none}
form.sent .form-ok{display:block}
form.sent .ul,form.sent .field{display:none}

/* testimonials band */
.testi{width:1640px}
.testi__lead{left:160px;top:158px;width:360px}
.testi__ico{left:160px;top:545px}
.testi__ask{left:160px;top:604px;width:360px}
.testi__cta{left:174px;top:711px}
.testi__col{left:824px;top:0;width:656px;height:900px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.testi__run{animation:vrun 28s linear infinite}
.testi__col:hover .testi__run{animation-play-state:paused}
@keyframes vrun{to{transform:translateY(-50%)}}
.tcard{background:var(--card);padding:64px;margin-bottom:40px;min-height:425px}
.tcard__av{display:flex;height:78px;margin-bottom:40px}
.tcard__av img,.tcard__av .lg{width:78px;height:78px;border-radius:50%;object-fit:cover}
.tcard__av .lg{margin-left:-14px;display:grid;place-items:center;color:#fff;font:900 22px var(--ff-sans);letter-spacing:-1px;border:2px solid var(--card)}
.tcard .t-32{color:var(--ink)}
.tcard .t-12{margin-top:40px;color:var(--muted-deep)}

/* awards band */
.awards{width:2310px;overflow:visible}
.awards__img{left:-200px;top:0;width:1100px;height:900px;z-index:1}
.awards__img img{width:100%;height:100%;object-fit:cover}
.awards__h{left:870px;top:158px;width:480px;color:#fff;z-index:2}
.awards__list{left:870px;top:450px;width:420px;z-index:2}
.awards__list li{display:grid;grid-template-columns:320px 60px 24px;white-space:nowrap;align-items:center;height:64px;font:700 24px/33.6px var(--ff-sans);letter-spacing:-.24px;color:var(--line)}
.awards__list li svg{width:18px;height:18px;color:#777;transition:transform .3s var(--ease),color .3s}
.awards__list li:hover svg{transform:translate(2px,-2px);color:#fff}
.awards__p{left:1590px;top:451px;width:480px}
.awards__p .t-16+.t-16{margin-top:20px}
.awards__cta{left:1604px;top:711px}

/* faq band */
.faq{width:1600px}
.faq__h{left:160px;top:158px;color:var(--ink)}
.faq__p{left:160px;top:303px;width:400px}
.faq__cta{left:174px;top:431px}
.faq__arc{left:-60px;top:600px}
.acc{left:800px;top:158px;width:720px}
.acc__item{position:relative;display:grid;grid-template-columns:81px 1fr 40px;align-items:start;padding-bottom:81px}
.acc__n{font:400 24px/33.6px var(--ff-sans);letter-spacing:-.24px;color:var(--dim)}
.acc__q{font:700 24px/33.6px var(--ff-sans);letter-spacing:-.24px;color:var(--ink);text-align:left;width:100%;cursor:pointer}
.acc__t{width:40px;height:34px;display:grid;place-items:center;justify-self:end}
.acc__t svg{width:18px;height:18px;color:var(--ink);transition:transform .35s var(--ease)}
.acc__item.open .acc__t svg{transform:rotate(45deg)}
.acc__a{grid-column:2;overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.acc__a p{padding-top:16px;width:512px}
.acc__item.open .acc__a{max-height:220px}
.acc__item.open{padding-bottom:82px}

/* footer band */
.foot{width:1695px}
.foot__grad{position:absolute;left:0;top:0;width:1295px;height:900px;background:linear-gradient(90deg,#fff 0%,#f4f4f4 40%,#e9e9e9 100%)}
.foot__k{left:160px;top:159px}
.foot__v{left:160px;top:180px;white-space:nowrap;display:flex;align-items:center;gap:20px}
.foot__v .t-48{color:var(--ink)}
.copy{width:32px;height:32px;color:var(--accent);display:grid;place-items:center;position:relative}
.copy svg{width:22px;height:22px}
.copy .tip{position:absolute;left:44px;top:6px;font:400 12px/22px var(--ff-sans);letter-spacing:.12px;text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .3s}
.copy:hover .tip,.copy.done .tip{opacity:1}
.foot__k2{left:160px;top:267px}
.foot__v2{left:160px;top:288px;white-space:nowrap}
.foot__v2 .t-48{color:var(--ink)}
.foot__p{left:160px;top:585px;width:400px}
.foot__legal{left:160px;top:741px;display:flex;gap:64px}
.foot__legal a{font:400 12px/16px var(--ff-sans);letter-spacing:.12px;text-transform:uppercase;color:var(--ink)}
.foot__cap{left:676px;top:200px;width:361px;height:253px;animation:floaty 8s ease-in-out infinite reverse}
.foot__cap img{width:100%;height:100%;object-fit:contain;filter:brightness(1.04) contrast(1.03)}
.foot__credit{left:1259px;top:158px;width:360px;display:flex;gap:12px;align-items:flex-start}
.foot__credit svg{width:24px;height:24px;flex:none;color:var(--ink)}
.foot__credit p{font:400 12px/22px var(--ff-sans);letter-spacing:.12px;text-transform:uppercase;color:var(--ink)}
.foot__credit p span{color:var(--muted-deep)}
.foot .t-16,.foot .t-12,.foot__disc{color:var(--muted-deep)}
.foot__disc{left:1259px;top:232px;width:355px;font:400 12px/19px var(--ff-sans)}
.foot__links{left:1234px;top:460px;display:grid;grid-template-columns:177px 177px;row-gap:33px}
.foot__links .ul{padding-bottom:1px}
.foot__copy{left:1220px;top:748px;white-space:nowrap}

/* ============================================================================
   INNER PAGES
   ============================================================================ */
/* page hero */
.phero__title{top:249px}
.phero__img{top:0;width:1100px;height:900px}
.phero__img img{width:100%;height:100%;object-fit:cover}

/* project detail */
.pd{width:9882px}
.pd__title{left:240px;top:158px;width:800px;color:var(--ink)}
.meta{width:400px}
.meta li{display:flex;justify-content:space-between;height:46px;align-items:flex-start}
.meta li span:last-child{color:var(--ink)}
.pd__block{top:158px;width:480px;height:585px}
.pd__block .t-48{color:var(--ink)}
.pd__block .t-16{margin-top:32px}
.pd__block .t-16+.t-16{margin-top:26px}
.pd__block .idx{position:absolute;left:0;top:558px;font:500 16px/26px var(--ff-sans);color:var(--ink)}
.res{margin-top:32px}
.res li{display:grid;grid-template-columns:384px 1fr;align-items:center;height:64px;font:400 16px/26px var(--ff-sans);color:var(--ink)}
.res li span:last-child{font:500 40px/40px var(--ff-script);color:var(--accent-deep);padding-left:24px}
.pd__close{top:158px;width:640px}
.pd__close .ul{margin:44px 0 0 14px}
.credits{position:absolute;top:472px;width:400px}
.credits li{display:flex;justify-content:space-between;height:46px}
.credits li span:last-child{color:var(--ink)}
.next__title{top:258px;width:682px}
.next__title .ul{margin-top:44px}

/* studio */
.studio{width:21811px}
.studio__intro{left:1842px;top:158px;width:400px}
.studio__p{left:1842px;top:590px;width:520px}
.studio__p .t-16+.t-16{margin-top:22px}
.member{top:158px;width:640px;height:585px}
.member .t-12{margin-top:7px}
.member .t-16{margin-top:40px}
.member .ff{position:absolute;left:0;top:427px;width:400px}
.member .ff .ico{margin-bottom:22px}
.clients{width:2160px;position:relative}
.pattern{display:none}
  .clients,.cform{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260'%3E%3Cg fill='%231a1a1a' font-family='Helvetica Neue,Helvetica,Arial,sans-serif' font-weight='900' font-size='110' transform='rotate(-12 210 130)'%3E%3Ctext x='-40' y='70'%3EVERSO VERSO%3C/text%3E%3Ctext x='-200' y='190'%3EVERSO VERSO%3C/text%3E%3Ctext x='-120' y='310'%3EVERSO VERSO%3C/text%3E%3C/g%3E%3C/svg%3E");background-size:420px 260px}
  .pattern-x{position:absolute!important;inset:-300px;pointer-events:none;overflow:hidden;transform:rotate(-12deg)}
.pattern div{font:900 200px/180px var(--ff-sans);letter-spacing:-8px;text-transform:uppercase;color:var(--dark-3);white-space:nowrap}
.pattern div:nth-child(even){margin-left:-330px}
.clients__h{left:240px;top:158px;width:480px}
.clients__p{left:240px;top:618px;width:440px}
.clients__cta{left:254px;top:769px}
.logos{left:920px;top:117px;width:999px;display:grid;grid-template-columns:repeat(3,333px);grid-auto-rows:222px}
.logos div{display:grid;place-items:center;color:#fff;opacity:.9}
.logos svg{width:200px;height:60px}
.process{width:5257px}
.step__n{font:500 48px/48px var(--ff-serif);letter-spacing:-1.92px;color:var(--accent-deep);text-transform:uppercase}
.step__h{color:var(--ink)}
.step__p{width:440px}
.pic{overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}

/* journal */
.journal{width:12034px}

/* contact */
.contact{width:11241px}
.cinfo{left:1721px;top:0;width:1103px;height:900px;background:var(--paper)}
.cinfo__k{position:absolute;left:120px}
.cinfo__v{position:absolute;left:120px;white-space:nowrap;display:flex;align-items:center;gap:20px}
.cinfo__v .t-48{color:var(--ink);white-space:normal}
.cform{width:1636px}
.cform__h{left:240px;top:158px;width:480px;color:#fff}
.cform__p{left:240px;top:663px;width:440px}
.cform__f{left:920px;top:182px;width:476px}
.cform .field{color:#fff;border-color:rgba(255,255,255,.35)}
.cform .field::placeholder{color:rgba(255,255,255,.55)}
.cform .field:focus{border-color:#fff}
.cform .field+.field{margin-top:63px}
.cform textarea.field{height:288px;resize:none;margin-top:63px}
.cform__btn{position:absolute;left:934px;top:709px}
.cform .form-ok{color:#fff}

/* ============================================================================
   VERTICAL LAYOUT (mobile and reduced motion): complete page, no engine.
   ============================================================================ */
@media (max-width:1024px),(prefers-reduced-motion:reduce){
  html.h,html.h body{height:auto;overflow:visible}
  .site{display:block;height:auto;width:auto;overflow:visible}
  .band{width:auto!important;height:auto;overflow:hidden;padding:120px 16px 64px}
  .abs{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .ul{position:relative!important;display:inline-block}
  .ico{width:32px!important;height:32px!important}
  .copy{width:32px!important;height:32px!important;position:relative!important}
  .arc{display:none!important}
  .px{position:relative!important;width:auto!important;height:auto!important;aspect-ratio:1/1;overflow:hidden}
  .px img,.px video{position:static;width:100%;height:100%;left:0;transform:none!important}
  .ticker,.arc{display:none}
  .nav{mix-blend-mode:difference}
  .vnav{display:none}
  .brand{left:16px;top:38px}
  .burger{right:16px;top:32px}
  .social{display:none}
  .progress{display:none}
  .cursor{display:none}
  .rv,.rv-w .w i,html.js .rv,html.js .rv-w .w i{opacity:1;transform:none;transition:none}
  .menu a{font-size:52px;line-height:64px;letter-spacing:-1.5px}
  .menu .close{right:16px;top:32px}
  .t-giant{font-size:64px;line-height:51px;letter-spacing:-3.8px}
  .t-104{font-size:48px;line-height:48px;letter-spacing:-2.4px}
  .t-64{font-size:52px;line-height:47px;letter-spacing:-2.6px}
  .t-48{font-size:40px;line-height:40px;letter-spacing:-1.6px}
  .t-script{font-size:120px;line-height:100px;letter-spacing:-8.4px}
  .sec-title .cnt{font-size:52px;margin-top:24px}
  /* hero */
  .hero{padding-top:120px}
  .hero__title{white-space:normal;font-size:52px;line-height:47px;letter-spacing:-3.4px}
  .hero__title .rw{min-width:0;position:static;display:inline-grid;vertical-align:top}
  .hero__title .rw span{position:static;grid-area:1/1;visibility:hidden}
  .hero__title .rw span.on{visibility:visible}
  .hero__script{text-align:right;margin:8px 0 22px}
  .hero__lead{margin-bottom:56px}
  .hero__name{display:none}
  .hero__msvg{display:block;width:100%;height:auto;transform:rotate(-3deg);margin:40px 0 24px}
  .hero__play{display:block;position:static;width:100%;min-width:100%;height:auto;text-align:center;font:900 14px/25px var(--ff-sans);letter-spacing:-.28px;text-transform:uppercase;color:var(--ink);padding:24px 0 0;cursor:pointer}
  .hero__play .sr{position:static!important;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal}
  /* work cards */
  .pcard{position:static;height:auto;width:auto;margin-top:40px}
  .pcard__img{aspect-ratio:1/1;position:relative!important;width:auto!important;height:auto!important}
  .pcard__panel{position:static;height:auto;width:auto;padding:32px 0 0}
  .pcard__panel .ul{position:relative!important;left:auto!important;top:auto!important;margin:34px 0 0 14px}
  .pcard__link{display:none}
  /* quote + team */
  .quote__portrait{display:none}
  .quote__text{width:auto}
  .quote__by{margin-top:24px;width:auto}
  .quote__p1{margin-top:56px;width:auto}
  .quote__p2{margin-top:22px;width:auto}
  .team{display:grid;grid-template-columns:1fr 1fr;gap:40px 16px;padding:56px 16px 64px}
  .team__img{width:auto!important;height:auto!important;aspect-ratio:2/3;position:relative!important;left:auto!important;top:auto!important;order:1}
  .team__name{order:2;width:auto!important}
  .team__name .t-64{font-size:32px;line-height:32px;letter-spacing:-1.3px;white-space:normal}
  .team__name .t-12{margin-top:6px}
  /* principles */
  .princ{position:relative!important;min-height:664px;padding:120px 16px 64px}
  .princ__bg{position:absolute!important}
  .princ__bg img{animation:none;transform:none;filter:grayscale(1) brightness(.22) contrast(.9)}  /* fix round 2: the 390 crop of the film still is brighter than the 1440 one; the coral display word measured p10 2.76:1 by glyph mask, under the 3:1 display floor */
  .princ__idx{text-align:center;color:#fff}
  .princ__h{position:relative!important;min-height:200px;text-align:center;margin-top:16px}
  .princ__h .s{position:absolute!important}
  .princ__why{margin:40px auto 0;display:block;text-align:center;width:auto}
  .princ__cap{margin-top:24px;width:auto;text-align:center}
  /* numbers */
  .nums__can{width:100%;height:auto;aspect-ratio:438/675;max-width:420px;margin:0 auto 64px}
  .nums__cta{margin:24px 0 0 14px;display:inline-block}
  .counter{margin-top:48px;text-align:center}
  .counter .n{text-align:center;font-size:160px;line-height:144px;letter-spacing:-11px}
  /* services */
  .svc__img{display:none}
  .svc__intro{margin:32px 0 64px}
  .scard{margin-top:56px}
  /* pricing */
  .price{position:relative!important}
  .price__bg{position:absolute!important;left:0!important;width:100%!important;height:100%!important}
  .price__lead,.price__ask,.price__ico{position:relative!important}
  .price__ico{margin-top:64px}
  .price__ask{margin-top:40px}
  .price__cta{position:relative!important;margin:24px 0 0 14px;display:inline-block}
  .plan{position:relative!important;height:auto!important;width:auto!important;margin-top:64px}
  .plan::before{display:none}
  .plan ul{position:static!important;margin:24px 0 0 18px}
  .plan .tag{position:static!important;margin-top:24px;width:auto!important}
  /* articles */
  .acard{position:relative;height:auto;margin-top:40px}
  .acard__img{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:490/585}
  .acard__txt{position:static;height:auto;width:auto;margin-top:24px}
  .acard__txt .ul{position:relative!important;left:auto!important;bottom:auto!important;margin:34px 0 0 14px}
  .acard__link{display:none}
  /* newsletter */
  .keys{display:none}
  .nl__h,.nl__script{white-space:normal}
  .nl__script{margin:8px 0 0 40px;font-size:100px;line-height:92px;letter-spacing:-7px}
  .nl__p{margin:40px 0 0 40px;width:auto}
  .field{width:100%}
  .nl__f1{margin-top:64px}
  .nl__f2{margin-top:56px}
  .nl__btn{margin:56px 0 0 14px}
  /* testimonials */
  .testi__ico{margin-top:64px}
  .testi__ask{margin-top:24px;width:auto}
  .testi__cta{margin:24px 0 0 14px;display:inline-block}
  .testi__col{position:relative!important;height:auto!important;width:auto!important;margin-top:64px;-webkit-mask-image:none;mask-image:none}
  .testi__run{animation:none}
  .testi__run>.tcard:nth-child(n+4){display:none}
  .tcard{padding:32px;min-height:0}
  /* awards */
  .awards__img{position:relative;width:auto;height:auto;aspect-ratio:1/1;margin-bottom:56px}
  .awards__list{margin-top:56px;width:auto}
  .awards__list li{grid-template-columns:1fr 60px 24px;white-space:normal}
  .awards__p{margin-top:64px;width:auto}
  .awards__cta{margin:24px 0 0 14px;display:inline-block}
  /* faq */
  .faq__p{margin-top:24px;width:auto}
  .faq__cta{margin:24px 0 0 14px;display:inline-block}
  .acc{margin-top:64px;width:auto}
  .acc__item{grid-template-columns:56px 1fr 40px;padding-bottom:48px}
  .acc__a p{width:auto}
  .acc__item.open{padding-bottom:48px}
  /* footer */
  .foot{background:#f4f4f4}
  .foot__grad{display:none}
  .foot__v,.foot__v2,.cinfo__v{white-space:normal;flex-wrap:wrap;gap:12px}
  .cinfo__v .t-48,.foot__v .t-48,.foot__v2 .t-48{font-size:32px;line-height:34px;letter-spacing:-1.2px;overflow-wrap:anywhere}
  .copy .tip{display:none}
  .foot__v .t-48,.foot__v2 .t-48{font-size:32px;line-height:34px}
  .foot__k2{margin-top:32px}
  .foot__p{margin-top:64px;width:auto}
  .foot__legal{margin-top:32px}
  .foot__cap{width:100%;height:auto;aspect-ratio:774/532;max-width:330px;margin:40px auto}
  .foot__credit{margin-top:24px;width:auto}
  .foot__disc{margin-top:24px;width:auto}
  .foot__links{margin:48px 0 0 14px;grid-template-columns:1fr 1fr}
  .foot__copy{margin-top:56px;white-space:normal}
  /* inner */
  .phero__img{position:relative;width:auto;height:auto;aspect-ratio:1/1;margin-top:40px}
  .pd__title{width:auto}
  .meta{width:auto;margin-top:40px}
  .pd__block{position:relative;height:auto;width:auto;margin-top:64px}
  .pd__block .idx{position:static!important;margin-top:24px}
  .res li{grid-template-columns:1fr auto}
  .pd__close{width:auto;margin-top:64px}
  .credits{position:static!important;width:auto!important;margin-top:40px}
  .next__title{width:auto;margin-top:64px}
  .studio__intro{margin-top:40px;width:auto}
  .studio__p{margin-top:40px;width:auto}
  .member{position:relative;height:auto;width:auto;margin-top:40px}
  .member .ff{position:static;width:auto;margin-top:40px}
  .clients{position:relative!important}
  .clients__h,.clients__p{position:relative;width:auto}
  .clients__p{margin-top:40px}
  .clients__cta{position:relative!important;margin:24px 0 0 14px;display:inline-block}
  .logos{position:relative!important;width:auto!important;grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;margin-top:48px}
  .logos svg{width:140px;max-width:100%}
  .step__n{margin-top:64px}
  .step__p{width:auto;margin-top:24px}
  .pic{position:relative!important;width:auto!important;height:auto!important;aspect-ratio:4/3;margin-top:24px}
  .cinfo{position:static!important;width:auto!important;height:auto!important;padding:0}
  .cinfo__k,.cinfo__v{position:static!important;left:auto!important;top:auto!important;width:auto!important;margin-top:8px}
  .cinfo__k{margin-top:32px}
  .cform{position:relative!important}
  .cform__h,.cform__p,.cform__f{position:relative!important;width:auto!important}
  .cform__p{margin-top:40px}
  .cform__f{margin-top:56px}
  .cform__btn{position:relative!important;left:auto!important;top:auto!important;display:inline-block;margin:48px 0 0 14px}
}
@media (max-width:1024px){
  html{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .princ__bg img{animation:none}
}