/* ===================================================================== INFIN DIGITAL — Interactive Experience Design System & Styles ===================================================================== */ /* ---------- Fonts ---------- */ /* Loaded via in : Space Grotesk, Space Mono, Inter */ /* ---------- Design Tokens ---------- */ :root{ /* Base */ --ink:#0B0B0C; --ink-2:#141416; --paper:#EFECE6; --paper-2:#E4DFD5; --white:#FFFFFF; --taupe:#B8AEA2; --stone:#6D6D5D; --char:#2A2721; /* Accents — used sparingly as visual events */ --blue:#2B4DFF; --cyan:#16E0E0; --violet:#7A3CFF; --magenta:#FF2E7E; --lime:#C6FF3A; --orange:#FF6A2C; --yellow:#FFD23F; /* Semantic */ --bg:var(--ink); --fg:var(--paper); --accent:var(--lime); /* Type */ --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"Space Mono","SFMono-Regular",Menlo,monospace; --font-serif:"Playfair Display",Georgia,"Times New Roman",serif; /* Matches the INFIN "in/fin" logo lettering (heavy neutral grotesque) */ --font-logo:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif; /* Rhythm */ --pad-x:clamp(1.25rem,5vw,6rem); --maxw:1600px; --radius:18px; /* Motion */ --ease:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --dur:.7s; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:auto} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} body{ font-family:var(--font-sans); background:var(--ink); color:var(--paper); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-feature-settings:"ss01","cv01"; } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:none;background:none;cursor:pointer} ul{list-style:none} ::selection{background:var(--lime);color:var(--ink)} /* Hide default cursor when custom cursor active */ body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none} /* ---------- Typography helpers ---------- */ .font-mono{font-family:var(--font-mono)} .label{ font-family:var(--font-mono); font-size:clamp(.68rem,.8vw,.78rem); letter-spacing:.22em; text-transform:uppercase; font-weight:400; } .display{ font-family:var(--font-display); font-weight:700; line-height:.92; letter-spacing:-.03em; text-wrap:balance; } h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.95} .eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--font-mono); font-size:.75rem;letter-spacing:.2em;text-transform:uppercase; opacity:.7; } .eyebrow::before{content:"";width:2.4em;height:1px;background:currentColor;opacity:.5} /* ---------- Layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)} section{position:relative} .section-pad{padding-block:clamp(5rem,12vh,11rem)} /* Split words for reveal */ .reveal-line{display:block;overflow:hidden} .reveal-line > span{display:block;will-change:transform} .word{display:inline-block} .char{display:inline-block;will-change:transform} /* ============================================================ LOADER ============================================================ */ #loader{ position:fixed;inset:0;z-index:1000; background:var(--ink); display:grid;place-items:center; } #loader .loader-inner{text-align:center;overflow:hidden} #loader .loader-mark{ font-family:var(--font-display);font-weight:700; font-size:clamp(3rem,9vw,7rem);letter-spacing:-.04em; color:var(--paper);line-height:1; } #loader .loader-mark .slash{color:var(--lime)} #loader .loader-sub{ font-family:var(--font-mono);font-size:.8rem;letter-spacing:.35em; text-transform:uppercase;color:var(--taupe);margin-top:1.2rem; } #loader .loader-bar{ margin:1.6rem auto 0;height:2px;width:min(240px,60vw); background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px; } #loader .loader-bar i{display:block;height:100%;width:0;background:var(--lime)} #loader .loader-count{ position:absolute;bottom:clamp(1.5rem,4vw,3rem);right:var(--pad-x); font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,12vw,9rem); color:var(--paper);line-height:1;letter-spacing:-.04em; } .loading{overflow:hidden;height:100vh} /* ============================================================ CUSTOM CURSOR ============================================================ */ #cursor{ position:fixed;top:0;left:0;z-index:900;pointer-events:none; width:14px;height:14px;border-radius:50%; background:var(--lime); transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .3s var(--ease),height .3s var(--ease),background .3s; display:none; } #cursor.big{width:96px;height:96px;background:var(--lime);mix-blend-mode:normal} #cursor.ring{width:56px;height:56px;background:transparent;border:1px solid var(--paper);mix-blend-mode:difference} #cursor .cursor-label{ position:absolute;inset:0;display:grid;place-items:center; font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink);opacity:0;transition:opacity .25s;text-align:center;font-weight:700; } #cursor.big .cursor-label{opacity:1} body.show-cursor #cursor{display:block} /* ============================================================ HEADER ============================================================ */ #header{ position:fixed;top:0;left:0;width:100%;z-index:500; padding:clamp(1rem,2.2vw,1.6rem) var(--pad-x); display:flex;align-items:center;justify-content:space-between; transition:background .5s var(--ease),backdrop-filter .5s,padding .4s,transform .5s var(--ease); } #header.scrolled{ background:rgba(255,255,255,.78); backdrop-filter:blur(16px) saturate(1.15); padding-block:clamp(.7rem,1.4vw,1rem); border-bottom:1px solid #EAEAEA; } #header.hide{transform:translateY(-110%)} .brand{display:flex;align-items:center;gap:.55rem;z-index:2;perspective:600px} .brand-logo{height:clamp(21px,2.3vw,28px);width:auto;display:block} /* The site is white throughout, so the header keeps the dark logo in every state */ .brand-logo--light{display:none!important} .footer-logo .brand-logo{height:clamp(26px,3vw,34px)} /* Plain white INFIN wordmark */ .logo3d{ font-family:var(--font-display);font-weight:700; font-size:clamp(1.7rem,2.8vw,2.4rem); letter-spacing:-.045em;line-height:1;color:#fff; display:inline-block;text-shadow:none; } .logo3d .sl{color:#fff;display:inline-block} .nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem)} .nav a.nav-link{ font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; position:relative;padding:.3rem 0;opacity:.85;transition:opacity .3s; } .nav a.nav-link::after{ content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease); } .nav a.nav-link:hover{opacity:1} .nav a.nav-link:hover::after{transform:scaleX(1);transform-origin:left} .cta-pill{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase; padding:.7em 1.3em;border-radius:100px; background:var(--lime);color:var(--ink);font-weight:700; transition:transform .4s var(--ease),background .3s; will-change:transform; } .cta-pill:hover{background:var(--paper)} .cta-pill .arrow{transition:transform .4s var(--ease)} .cta-pill:hover .arrow{transform:translateX(4px)} .menu-toggle{display:none} /* Header sits on the WHITE editorial hero by default → dark marks. Once scrolled over the darker sections below it reverts to the light glass. */ /* White site → dark header marks in every state */ #header .nav a.nav-link{color:#111;opacity:.66} #header .nav a.nav-link:hover{opacity:1} #header .cta-pill{background:transparent;color:#111;border:1px solid rgba(17,17,17,.85);font-weight:600} #header .cta-pill:hover{background:#111;color:#fff} #header .cta-pill:hover .arrow{transform:translateX(4px)} /* ============================================================ MOBILE MENU ============================================================ */ #mobile-menu{ position:fixed;inset:0;z-index:490; background:var(--ink); clip-path:circle(0% at calc(100% - 3rem) 3rem); transition:clip-path .8s var(--ease); display:flex;flex-direction:column;justify-content:center; padding:var(--pad-x); visibility:hidden; } #mobile-menu.open{clip-path:circle(150% at calc(100% - 3rem) 3rem);visibility:visible} #mobile-menu nav{display:flex;flex-direction:column;gap:.2rem} #mobile-menu nav a{ font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,13vw,5rem); letter-spacing:-.03em;line-height:1.02;color:var(--paper); overflow:hidden;display:block; } #mobile-menu nav a span{display:inline-block;transform:translateY(110%)} #mobile-menu .mm-foot{ margin-top:clamp(2rem,5vh,4rem);display:flex;flex-wrap:wrap;gap:1.4rem; font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe); } #mobile-menu .mm-foot a{transition:color .3s} #mobile-menu .mm-foot a:hover{color:var(--lime)} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;gap:.8em; font-family:var(--font-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700; padding:1.1em 1.8em;border-radius:100px; transition:transform .5s var(--ease),background .35s,color .35s; will-change:transform; } .btn-primary{background:var(--lime);color:var(--ink)} .btn-primary:hover{background:var(--white)} .btn-ghost{border:1px solid rgba(255,255,255,.28);color:var(--paper)} .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn .arrow{display:inline-block;transition:transform .45s var(--ease)} .btn:hover .arrow{transform:translate(4px,-4px)} .btn.on-light.btn-ghost{border-color:rgba(11,11,12,.25);color:var(--ink)} .btn.on-light.btn-ghost:hover{background:var(--ink);color:var(--paper)} .magnetic{will-change:transform} /* ============================================================ HERO ============================================================ */ /* ============================================================ 01 · HERO — white editorial canvas A pure-white, typography-led hero. The word IN/FIN is set in a high-contrast display serif at massive scale. It is two stacked layers clipped to the same glyphs: a solid ink layer, and an imagery layer beneath it revealed only through a soft, cursor- following spotlight — subtle editorial movement, letters stay fully readable. A few quiet image panels sit in the white space. ============================================================ */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #hero.hero-editorial{ position:relative;min-height:100svh;background:#fff;overflow:hidden; display:flex;flex-direction:column;justify-content:center;align-items:center; padding:clamp(7rem,15vh,10rem) var(--pad-x) clamp(2.4rem,6vh,3.6rem); /* cursor spotlight position (%, within .infin) + hole radius, written by JS */ --sx:50%;--sy:50%;--hole:0%;--mx:0;--my:0; } /* tiny art-directed markers */ .hero-mark{ position:absolute;z-index:5; font-family:var(--font-mono);font-size:clamp(.56rem,.72vw,.72rem); letter-spacing:.26em;text-transform:uppercase;color:#8d8d88;line-height:1.5; } .hm-tl{left:var(--pad-x);top:clamp(6.4rem,13vh,8.4rem)} .hm-tr{right:var(--pad-x);top:clamp(6.4rem,13vh,8.4rem);text-align:right} /* the giant wordmark */ .infin-stage{ position:relative;z-index:2;width:100%;display:grid;place-items:center; } .infin{ position:relative;isolation:isolate;display:flex;justify-content:center; justify-self:start;width:100vw;margin-left:calc(50% - 50vw); transform:translateZ(0); } /* The giant wordmark uses the EXACT logo lettering: heavy neutral grotesque, lowercase "in/fin", ink letters with the brand's grey slash. */ .infin-word{ font-family:var(--font-logo);font-weight:800;font-style:normal; font-size:clamp(3.6rem,25vw,25rem);line-height:.9; letter-spacing:-.045em;text-transform:lowercase; color:#111;white-space:nowrap; transform:translate3d(calc(var(--mx)*8px),calc(var(--my)*6px),0); will-change:transform; } .infin-word .sl{color:#9a9a9a;font-weight:800} /* positioning copy + CTA */ .hero-say{ position:relative;z-index:3;width:100%;max-width:var(--maxw); margin-top:clamp(1.6rem,4vh,3rem); display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem; } .hero-tag{ font-family:var(--font-display);font-weight:600;letter-spacing:-.02em; font-size:clamp(1.15rem,2.6vw,2rem);line-height:1.05;color:#111; } .hero-sub{ font-family:var(--font-sans);font-weight:400; font-size:clamp(.86rem,1.1vw,1rem);line-height:1.55;color:#666; max-width:46ch; } .hero-cta{ display:inline-flex;align-items:center;gap:.5em;margin-top:.4rem; font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; color:#111;padding-bottom:.3em;position:relative; } .hero-cta::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:#111;transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ease)} .hero-cta:hover::after{transform:scaleX(0);transform-origin:right} .hero-cta .ar{transition:transform .45s var(--ease)} .hero-cta:hover .ar{transform:translate(3px,-3px)} .hero-scroll{ position:absolute;left:50%;bottom:clamp(1.2rem,3vh,2rem);transform:translateX(-50%); z-index:3;color:#9a9a95; } .scroll-cue{ display:flex;align-items:center;gap:.75rem; font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#9a9a95; } .scroll-cue .dot{width:22px;height:34px;border:1px solid rgba(17,17,17,.28);border-radius:20px;position:relative} .scroll-cue .dot::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:#111;animation:scrolldot 1.8s var(--ease) infinite} @keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}} /* ============================================================ MARQUEE ============================================================ */ .marquee{ overflow:hidden;white-space:nowrap;border-block:1px solid rgba(255,255,255,.1); padding-block:clamp(1rem,2vw,1.6rem); } .marquee.on-light{border-color:rgba(11,11,12,.14)} .marquee-track{display:inline-flex;will-change:transform} .marquee-track span{ font-family:var(--font-display);font-weight:700; font-size:clamp(1.8rem,5vw,4.2rem);letter-spacing:-.02em;text-transform:uppercase; padding-inline:clamp(1rem,2vw,2rem);display:inline-flex;align-items:center;gap:clamp(1rem,2vw,2rem); } .marquee-track .sep{color:var(--lime);font-size:.6em} .marquee.outline .marquee-track span{color:transparent;-webkit-text-stroke:1px currentColor} /* ============================================================ SECTION THEMING ============================================================ */ .sec-dark{background:var(--ink);color:var(--paper)} .sec-paper{background:var(--paper);color:var(--ink)} .sec-paper .eyebrow,.sec-paper .label{color:var(--char)} .sec-blue{background:var(--blue);color:var(--white)} .sec-violet{background:var(--violet);color:var(--white)} .sec-lime{background:var(--lime);color:var(--ink)} /* ============================================================ STATEMENT ============================================================ */ #statement{padding-block:clamp(6rem,16vh,14rem)} .statement-h{ font-family:var(--font-display);font-weight:700; font-size:clamp(2.6rem,9vw,9rem);line-height:.94;letter-spacing:-.035em;text-transform:uppercase; } .statement-h .ln{display:block;overflow:hidden} .statement-h .muted{color:var(--taupe)} .statement-h em{font-style:normal;color:var(--blue)} .statement-sub{ margin-top:clamp(2rem,5vw,3.5rem);max-width:52ch;margin-left:auto; font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.5;color:var(--stone); } /* ============================================================ ABOUT — floating plates ============================================================ */ #about{overflow:hidden} .about-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start} @media(min-width:960px){.about-grid{grid-template-columns:0.9fr 1.1fr}} .about-copy h2{ font-size:clamp(2.2rem,5vw,4.6rem);line-height:.98;margin-top:1.4rem;text-transform:uppercase; } .about-copy p{margin-top:1.6rem;max-width:46ch;color:var(--stone);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.6} .about-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem} .about-tags span{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; padding:.5em 1em;border:1px solid rgba(11,11,12,.2);border-radius:100px; } .plates{ position:relative;height:clamp(420px,60vw,640px);perspective:1400px; } .plate{ position:absolute;width:clamp(200px,34vw,340px);border-radius:14px;overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);will-change:transform; border:1px solid rgba(255,255,255,.08); } .plate img{width:100%;display:block} .plate.p1{top:0;left:2%;z-index:4} .plate.p2{top:14%;right:0;z-index:3} .plate.p3{bottom:8%;left:0;z-index:2} .plate.p4{bottom:0;right:6%;z-index:1} /* ============================================================ TRUST / CLIENTS ============================================================ */ #trust{padding-block:clamp(4rem,9vh,7rem)} .trust-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,3.5rem)} .trust-head h2{font-size:clamp(1.9rem,4.6vw,4rem);text-transform:uppercase;max-width:16ch} .trust-badges{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .trust-badges img{height:clamp(38px,4vw,54px);width:auto;border-radius:8px} .logo-wall{display:flex;flex-direction:column;gap:.5rem;overflow:hidden} .logo-row{display:flex;gap:0;white-space:nowrap;will-change:transform} .logo-chip{ flex:0 0 auto;display:grid;place-items:center; height:clamp(60px,6.5vw,84px);min-width:clamp(130px,16vw,190px);padding:0 1rem; background:var(--white);border-radius:10px;border:1px solid rgba(11,11,12,.06); } .logo-chip img{max-height:82%;max-width:88%;width:auto;opacity:1;transition:transform .4s var(--ease)} .logo-chip:hover img{transform:scale(1.06)} /* ============================================================ SERVICES INTRO ============================================================ */ #svc-intro{padding-block:clamp(6rem,16vh,13rem);text-align:center} .svc-intro-h{ font-family:var(--font-display);font-weight:700; font-size:clamp(4rem,20vw,20rem);line-height:.82;letter-spacing:-.05em;text-transform:uppercase; } .svc-intro-words{ display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,4vw,4rem); margin-top:clamp(2rem,6vw,4rem); } .svc-intro-words span{ font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,4vw,3.4rem); letter-spacing:-.02em;text-transform:uppercase; } .svc-intro-words span:nth-child(1){color:var(--blue)} .svc-intro-words span:nth-child(2){color:var(--magenta)} .svc-intro-words span:nth-child(3){color:var(--orange)} .svc-intro-words span:nth-child(4){color:var(--lime)} /* ============================================================ SERVICES — sticky ============================================================ */ #services{background:var(--ink)} .svc-layout{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:1024px){.svc-layout{grid-template-columns:1.15fr .85fr}} .svc-list{border-top:1px solid rgba(255,255,255,.12)} .svc-item{ border-bottom:1px solid rgba(255,255,255,.12); padding-block:clamp(1.6rem,3.4vw,2.8rem); display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.4rem);align-items:center; cursor:pointer;position:relative;transition:padding .4s var(--ease); } .svc-item .svc-num{font-family:var(--font-mono);font-size:.9rem;color:var(--taupe);align-self:start;padding-top:.5rem} .svc-item .svc-name{ font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4.4vw,3.4rem); letter-spacing:-.03em;text-transform:uppercase;line-height:.98;transition:transform .5s var(--ease),color .4s; } .svc-item .svc-arrow{font-size:1.6rem;color:var(--taupe);transition:transform .5s var(--ease),color .4s;justify-self:end} .svc-item .svc-desc{ grid-column:2/3;max-height:0;overflow:hidden;opacity:0; transition:max-height .6s var(--ease),opacity .5s,margin .5s; color:var(--taupe);max-width:52ch;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.55; } .svc-item .svc-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .svc-item .svc-tags b{font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.4em .8em;border:1px solid rgba(255,255,255,.2);border-radius:100px;color:var(--paper)} .svc-item .svc-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.6rem;margin-top:1.3rem;max-width:56ch} .svc-item .svc-points li{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.01em;color:var(--paper);opacity:.82;padding-left:1.3em;position:relative;line-height:1.35} .svc-item .svc-points li::before{content:"→";position:absolute;left:0;color:var(--lime)} .svc-item.active{padding-block:clamp(2rem,4vw,3.2rem)} .svc-item.active .svc-name{transform:translateX(clamp(.6rem,2vw,1.6rem));color:var(--lime)} .svc-item.active .svc-arrow{transform:rotate(45deg);color:var(--lime)} .svc-item.active .svc-desc{max-height:520px;opacity:1;margin-top:1rem} @media(max-width:520px){.svc-item .svc-points{grid-template-columns:1fr}} .svc-item:hover .svc-name{color:var(--paper)} .svc-visual-col{position:relative;display:none} @media(min-width:1024px){.svc-visual-col{display:block}} .svc-visual-sticky{ position:sticky;top:0;height:100vh;display:grid;place-items:center; } .svc-visual-stage{position:relative;width:100%;aspect-ratio:4/5;max-width:460px;border-radius:20px;overflow:hidden} .svc-visual-stage .svc-shot{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .7s var(--ease),transform .9s var(--ease)} .svc-visual-stage .svc-shot.show{opacity:1;transform:scale(1)} .svc-visual-stage .svc-shot img{width:100%;height:100%;object-fit:cover} .svc-visual-badge{ position:absolute;left:1rem;bottom:1rem;z-index:3; display:flex;align-items:center;gap:.7rem; background:rgba(11,11,12,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14); padding:.7rem 1rem;border-radius:100px; } .svc-visual-badge .chip{width:36px;height:36px;border-radius:8px;background:var(--white);display:grid;place-items:center;overflow:hidden} .svc-visual-badge .chip img{width:74%;height:74%;object-fit:contain} .svc-visual-badge span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} /* Tablet + phone: show the preview image ABOVE the list. It sticks under the header and swaps as each service scrolls to centre (same behaviour as desktop), so "what we do" always has its matching visual. */ @media(max-width:1023px){ .svc-visual-col{display:block;order:-1;margin-bottom:clamp(1.6rem,5vw,2.4rem)} .svc-visual-sticky{position:sticky;top:clamp(64px,9vh,84px);height:auto;display:block} .svc-visual-stage{width:100%;max-width:100%;height:clamp(230px,44vh,380px);aspect-ratio:auto} } /* ============================================================ GROWTH SYSTEM — sticky steps ============================================================ */ #growth{background:var(--paper);color:var(--ink);overflow:hidden} .growth-head{text-align:center;margin-bottom:clamp(2rem,5vw,4rem)} .growth-head h2{font-size:clamp(2.6rem,8vw,7rem);text-transform:uppercase;line-height:.9} .growth-stage{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden} .growth-track{display:flex;width:100vw;flex:none;will-change:transform} .growth-step{ flex:0 0 100vw;width:100vw;min-width:100vw;height:100vh;display:grid;align-content:center;gap:1.4rem; padding-inline:var(--pad-x);position:relative;overflow:hidden; } .growth-step .gs-num{ font-family:var(--font-display);font-weight:700;font-size:clamp(6rem,26vw,24rem);line-height:.8;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:2px var(--ink);opacity:.14; position:absolute;top:8%;right:var(--pad-x);pointer-events:none; } .growth-step .gs-index{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.2em;color:var(--stone)} .growth-step h3{font-size:clamp(2.6rem,10vw,9rem);text-transform:uppercase;line-height:.9} .growth-step p{max-width:44ch;font-size:clamp(1rem,1.5vw,1.35rem);color:var(--stone);line-height:1.55} .growth-step .gs-accent{color:var(--blue)} .growth-progress{position:absolute;left:var(--pad-x);bottom:clamp(2rem,5vh,4rem);display:flex;gap:.5rem;z-index:4} .growth-progress i{width:34px;height:3px;background:rgba(11,11,12,.2);border-radius:3px;overflow:hidden;position:relative} .growth-progress i b{position:absolute;inset:0;width:0;background:var(--ink);display:block} /* --- Growth: per-step colour + 3D, layout unchanged --- */ .growth-step[data-accent="blue"]{--gs:var(--blue)} .growth-step[data-accent="violet"]{--gs:var(--violet)} .growth-step[data-accent="cyan"]{--gs:var(--cyan)} .growth-step[data-accent="orange"]{--gs:var(--orange)} .growth-step[data-accent="magenta"]{--gs:var(--magenta)} .growth-step[data-accent="lime"]{--gs:var(--lime)} .growth-step::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(42% 55% at 72% 46%,var(--gs),transparent 70%);opacity:.16} .growth-step .gs-index,.growth-step h3,.growth-step p{position:relative;z-index:3} .growth-step .gs-index{color:var(--gs);font-weight:700;display:inline-flex;align-items:center;gap:.65em} .growth-step .gs-dot{width:.6em;height:.6em;border-radius:50%;background:var(--gs);box-shadow:0 0 14px var(--gs);flex:0 0 auto} .growth-step .gs-accent{color:var(--gs)} .growth-step .gs-num{color:transparent;-webkit-text-stroke:2px var(--gs);opacity:.62;z-index:1; filter:drop-shadow(4px 7px 7px rgba(11,11,12,.14))} /* Floating 3D cube (desktop/tablet enhancement) */ .gs-cube-wrap{--cs:clamp(120px,15vw,230px);position:absolute;right:clamp(4%,9vw,11%);top:50%;transform:translateY(-50%); width:var(--cs);height:var(--cs);perspective:1000px;pointer-events:none;z-index:2} .gs-cube{position:absolute;inset:0;transform-style:preserve-3d;animation:gs-spin 17s linear infinite;will-change:transform} .gs-cube .gf{position:absolute;width:var(--cs);height:var(--cs);border-radius:16px;background:var(--gs); border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 0 55px rgba(255,255,255,.22)} .gs-cube .gf-front{transform:translateZ(calc(var(--cs)/2))} .gs-cube .gf-back{transform:rotateY(180deg) translateZ(calc(var(--cs)/2));filter:brightness(.8)} .gs-cube .gf-right{transform:rotateY(90deg) translateZ(calc(var(--cs)/2));filter:brightness(.9)} .gs-cube .gf-left{transform:rotateY(-90deg) translateZ(calc(var(--cs)/2));filter:brightness(.82)} .gs-cube .gf-top{transform:rotateX(90deg) translateZ(calc(var(--cs)/2));filter:brightness(1.2)} .gs-cube .gf-bottom{transform:rotateX(-90deg) translateZ(calc(var(--cs)/2));filter:brightness(.68)} @keyframes gs-spin{from{transform:rotateX(-22deg) rotateY(0deg)}to{transform:rotateX(-22deg) rotateY(360deg)}} @media(max-width:767px){ /* On phones keep the cube paired with its number on the right (same as desktop), just sized down. It sits directly under the big outlined number, above the centred copy. */ .gs-cube-wrap{--cs:clamp(92px,24vw,148px);right:clamp(6%,9vw,11%);top:22%;bottom:auto;transform:none} } /* ============================================================ WORK — horizontal scroll ============================================================ */ #work{background:var(--ink);overflow:hidden} .work-intro{padding-top:clamp(4rem,9vh,7rem);padding-bottom:clamp(2rem,5vh,3rem)} .work-intro h2{font-size:clamp(3rem,11vw,10rem);text-transform:uppercase;line-height:.86} .work-intro .wi-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap} .work-intro p{max-width:40ch;color:var(--taupe);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.55} /* All-visible editorial work grid */ .work-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(4rem,9vh,7rem)} @media(min-width:820px){ .work-grid{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,3vw,3rem);row-gap:clamp(3rem,5vw,5rem)} .work-grid .work-card:nth-child(even){margin-top:clamp(2.5rem,7vw,7rem)} } .work-card{display:block;color:var(--paper);will-change:transform} .wc-media{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--ink-2)} .wc-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .8s var(--ease)} .work-card:hover .wc-media img{transform:scale(1.1)} .wc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(11,11,12,.4));opacity:.6;transition:opacity .5s} .wc-cat{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,11,12,.55);backdrop-filter:blur(8px);padding:.45em .9em;border-radius:100px;color:var(--paper)} .wc-body{margin-top:1.4rem;display:grid;gap:.7rem} .wc-idx-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .wc-idx{font-family:var(--font-mono);font-size:.8rem;color:var(--taupe)} .wc-arrow{font-size:1.3rem;color:var(--taupe);transition:transform .4s var(--ease)} .work-card:hover .wc-arrow{transform:translate(5px,-5px);color:var(--lime)} .wc-body h3{font-size:clamp(1.7rem,3.2vw,2.8rem);text-transform:uppercase;line-height:1;transition:color .3s} .work-card:hover .wc-body h3{color:var(--lime)} .wc-body p{color:var(--taupe);max-width:46ch;font-size:.98rem;line-height:1.55} /* Trusted & Certified — colourful 3D cards */ .cert{background:var(--ink);color:var(--paper);padding-block:clamp(4rem,10vh,8rem)} .cert-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)} .cert-head h2{font-size:clamp(2.4rem,6.5vw,5.5rem);text-transform:uppercase;line-height:.9} .cert-cards{display:grid;grid-template-columns:1fr;gap:clamp(1.1rem,2vw,1.6rem);perspective:1600px} @media(min-width:600px){.cert-cards{grid-template-columns:1fr 1fr}} @media(min-width:1120px){.cert-cards{grid-template-columns:repeat(4,1fr)}} .cert-card{ position:relative;overflow:hidden;border-radius:24px; padding:clamp(1.4rem,2vw,1.9rem); min-height:clamp(290px,30vw,360px); display:flex;flex-direction:column;justify-content:space-between;gap:1rem; transform-style:preserve-3d;will-change:transform; box-shadow:0 24px 44px -26px rgba(0,0,0,.7); transition:box-shadow .5s var(--ease);isolation:isolate; } .cert-card:hover{box-shadow:0 46px 80px -22px rgba(0,0,0,.75)} .c-blue{background:var(--blue);color:#fff} .c-lime{background:var(--lime);color:var(--ink)} .c-orange{background:var(--orange);color:var(--ink)} .c-violet{background:var(--violet);color:#fff} .cc-top{display:flex;align-items:flex-start;justify-content:space-between;transform:translateZ(45px)} .cc-badge{width:82px;height:60px;background:#fff;border-radius:12px;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 18px -8px rgba(0,0,0,.4)} .cc-badge img{max-width:92%;max-height:84%;object-fit:contain} .cc-arrow{font-size:1.4rem;transition:transform .4s var(--ease)} .cert-card:hover .cc-arrow{transform:translate(5px,-5px)} .cc-big{font-family:var(--font-display);font-weight:700;font-size:clamp(3.6rem,6vw,5.2rem);line-height:.88;letter-spacing:-.045em;display:flex;align-items:baseline;gap:.08em;transform:translateZ(35px)} .cc-big.cc-word{font-size:clamp(2.2rem,3.6vw,3.2rem);text-transform:uppercase} .cc-unit{font-size:.42em;letter-spacing:0} .cc-foot{display:flex;flex-direction:column;gap:.3rem;transform:translateZ(25px)} .cc-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.05;letter-spacing:-.01em} .cc-src{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.72} .cc-glow{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;right:-22%;bottom:-28%;background:rgba(255,255,255,.2);filter:blur(34px);pointer-events:none;z-index:-1} .c-lime .cc-glow,.c-orange .cc-glow{background:rgba(255,255,255,.35)} /* Footer logo */ .footer-logo{margin-bottom:1.6rem} .footer-logo .logo3d{font-size:clamp(2rem,4vw,3rem)} .hscroll{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden} .hscroll-track{display:flex;gap:clamp(1.5rem,3vw,3rem);padding-inline:var(--pad-x);will-change:transform} .project{ flex:0 0 auto;width:clamp(280px,80vw,720px);position:relative; } .project .p-media{ position:relative;width:100%;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--ink-2); } .project .p-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .8s var(--ease)} .project:hover .p-media img{transform:scale(1.12)} .project .p-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.55));opacity:.7;transition:opacity .5s} .project .p-top{position:absolute;top:1rem;left:1rem;right:1rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-start} .project .p-idx{font-family:var(--font-mono);font-size:.8rem;color:var(--paper);letter-spacing:.1em} .project .p-cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,11,12,.5);backdrop-filter:blur(8px);padding:.4em .8em;border-radius:100px;color:var(--paper)} .project .p-info{margin-top:1.2rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem} .project .p-info h3{font-size:clamp(1.5rem,3vw,2.6rem);text-transform:uppercase;line-height:.98} .project .p-info .p-services{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);text-align:right;line-height:1.7} .hscroll-progress{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:clamp(1.5rem,4vh,3rem);height:2px;background:rgba(255,255,255,.14);z-index:3} .hscroll-progress i{display:block;height:100%;width:0;background:var(--lime)} /* ============================================================ CREATIVE LAB — parallax collage ============================================================ */ #lab{background:var(--ink);overflow:hidden;min-height:100vh;position:relative;display:flex;align-items:center} .lab-title{ position:relative;z-index:5;text-align:center;width:100%;pointer-events:none; font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,15vw,15rem); line-height:.84;letter-spacing:-.05em;text-transform:uppercase;mix-blend-mode:difference; } .lab-title .accent{color:var(--magenta)} .lab-note{position:absolute;left:var(--pad-x);top:clamp(5rem,12vh,8rem);z-index:7;display:inline-flex;align-items:center;gap:.6rem; color:var(--ink);background:var(--paper);padding:.75em 1.2em;border-radius:100px; font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700; box-shadow:0 10px 30px -12px rgba(0,0,0,.5)} .lab-note .ln-dot{color:var(--magenta);font-size:1.1em} .lab-layer{position:absolute;inset:0;z-index:1;pointer-events:none} .lab-img{position:absolute;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.6);will-change:transform;pointer-events:auto;cursor:pointer} .lab-img img{width:100%;height:100%;object-fit:cover;display:block} .lab-img.zoomed{box-shadow:0 50px 100px -20px rgba(0,0,0,.8)} /* Phone: the scattered absolute collage doesn't work in a tall section — the posters bunch at the top and the title is stranded below. Lay the six posters out as a tidy 2-column grid beneath the title instead, so every poster is visible and easy to tap. Tapping one still enlarges it to full view (handled in JS; the scroll parallax is disabled on mobile there). */ @media(max-width:767px){ #lab{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-content:start; min-height:auto;padding:clamp(7rem,24vw,9.5rem) 5% clamp(3rem,10vw,4.5rem)} .lab-note{position:static;grid-column:1/-1;order:-2;justify-self:start; margin-bottom:.3rem;font-size:.66rem;padding:.65em 1em} .lab-title{position:static;grid-column:1/-1;order:-1;margin-bottom:1.1rem; font-size:clamp(3.4rem,21vw,6.5rem);line-height:.86} .lab-layer{display:contents} .lab-img{position:static!important;width:100%!important;height:auto!important; top:auto!important;left:auto!important;right:auto!important;bottom:auto!important; aspect-ratio:4/5} } /* ============================================================ RESULTS — counters ============================================================ */ #results{background:var(--blue);color:var(--white)} .results-head{margin-bottom:clamp(2.5rem,6vw,5rem)} .results-head h2{font-size:clamp(3rem,11vw,10rem);text-transform:uppercase;line-height:.86} .results-head .muted{color:rgba(255,255,255,.5)} .results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(255,255,255,.25)} @media(min-width:900px){.results-grid{grid-template-columns:repeat(4,1fr)}} .result{padding:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2vw,1.6rem);border-bottom:1px solid rgba(255,255,255,.25);border-right:1px solid rgba(255,255,255,.25)} .result .r-num{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,8vw,6.4rem);line-height:.9;letter-spacing:-.04em;display:flex;align-items:baseline} .result .r-suffix{font-size:.5em;margin-left:.05em} .result .r-label{margin-top:.8rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)} .result .r-note{margin-top:.4rem;font-size:.85rem;color:rgba(255,255,255,.55)} /* ============================================================ CASE STUDY — click to conversion ============================================================ */ #case{background:var(--ink);color:var(--paper);overflow:hidden} .case-h{font-size:clamp(2.6rem,9vw,8rem);text-transform:uppercase;line-height:.9;margin-bottom:clamp(2.5rem,6vw,4rem)} .case-h em{font-style:normal;color:var(--orange)} .case-stage{position:relative;height:clamp(340px,55vw,620px)} .case-card{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08);will-change:transform} .case-card img{width:100%;display:block} .case-card .cc-tag{position:absolute;top:.8rem;left:.8rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,11,12,.6);backdrop-filter:blur(8px);padding:.4em .7em;border-radius:100px} .case-card.cc1{width:clamp(200px,42vw,520px);top:0;left:0;z-index:1} .case-card.cc2{width:clamp(180px,36vw,440px);top:18%;right:2%;z-index:2} .case-card.cc3{width:clamp(160px,32vw,400px);bottom:0;left:12%;z-index:3} /* Phone: the overlapping collage becomes a clean staggered stack so every step reads in order without cards sitting on top of each other. */ @media(max-width:767px){ .case-stage{height:auto;display:flex;flex-direction:column;gap:clamp(1rem,4vw,1.6rem)} .case-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:86%!important;box-shadow:0 24px 50px -26px rgba(0,0,0,.7)} .case-card.cc2{align-self:flex-end} .case-card.cc3{align-self:center} } /* ============================================================ WHY INFIN ============================================================ */ #why{background:var(--ink)} .why-item{ min-height:100vh;display:grid;align-content:center;gap:1.2rem; border-top:1px solid rgba(255,255,255,.1);position:relative; transition:background .8s var(--ease),color .8s var(--ease); } .why-item .wy-num{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.2em;opacity:.6} .why-item h3{font-size:clamp(2.8rem,12vw,11rem);text-transform:uppercase;line-height:.86;letter-spacing:-.04em} .why-item p{max-width:44ch;font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.55;opacity:.7} .why-item[data-accent="blue"]{--wy:var(--blue)} .why-item[data-accent="magenta"]{--wy:var(--magenta)} .why-item[data-accent="orange"]{--wy:var(--orange)} .why-item[data-accent="lime"]{--wy:var(--lime)} .why-item h3 .hl{color:var(--wy)} /* ============================================================ TESTIMONIALS ============================================================ */ #testimonials{background:var(--paper);color:var(--ink);overflow:hidden} .tst-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,3.5rem)} .tst-head h2{font-size:clamp(2.2rem,6vw,5rem);text-transform:uppercase;line-height:.9} .tst-stage{position:relative;min-height:clamp(360px,44vw,460px)} .tst-card{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s var(--ease);display:grid;grid-template-columns:1fr;gap:2rem;align-content:center} @media(min-width:800px){.tst-card{grid-template-columns:auto 1fr;align-items:center;gap:clamp(2rem,5vw,4rem)}} .tst-card.show{opacity:1;pointer-events:auto} .tst-avatar{width:clamp(90px,12vw,150px);height:clamp(90px,12vw,150px);border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--taupe);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)} .tst-avatar img{width:100%;height:100%;object-fit:cover;display:block} .tst-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.02em} .tst-meta{margin-top:1.6rem;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)} .tst-meta b{color:var(--ink);font-weight:700} .tst-controls{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(2rem,5vw,3rem)} .tst-dots{display:flex;gap:.6rem} .tst-dots button{width:34px;height:3px;background:rgba(11,11,12,.2);border-radius:3px;transition:background .3s} .tst-dots button.on{background:var(--ink)} .tst-nav{display:flex;gap:.8rem} .tst-nav button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(11,11,12,.25);display:grid;place-items:center;transition:background .3s,color .3s} .tst-nav button:hover{background:var(--ink);color:var(--paper)} /* ============================================================ INSIGHTS ============================================================ */ #insights{background:var(--ink);color:var(--paper)} .ins-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,6vw,4rem)} .ins-head h2{font-size:clamp(3rem,10vw,9rem);text-transform:uppercase;line-height:.86} .ins-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem)} @media(min-width:820px){.ins-grid{grid-template-columns:1fr 1fr}} .article{display:block;border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem} .article .a-media{aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin-bottom:1.4rem;background:var(--ink-2)} .article .a-media img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .7s var(--ease)} .article:hover .a-media img{transform:scale(1.04)} .article .a-cat{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);transition:color .3s} .article:hover .a-cat{color:var(--lime)} .article h3{font-size:clamp(1.5rem,3.4vw,2.6rem);text-transform:none;letter-spacing:-.02em;margin-top:.8rem;line-height:1.02} .article p{margin-top:1rem;color:var(--taupe);max-width:52ch;font-size:.98rem;line-height:1.55} .article .a-foot{margin-top:1.4rem;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)} .article .a-foot .arrow{transition:transform .4s var(--ease);font-size:1.2rem} .article:hover .a-foot .arrow{transform:translateX(6px)} /* ============================================================ FINAL CTA ============================================================ */ #cta{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--violet);color:var(--white);padding-bottom:clamp(4.5rem,12vh,9rem)} #cta-canvas{position:absolute;inset:0;z-index:1} #cta .cta-inner{position:relative;z-index:3;width:100%;text-align:center} #cta .cta-label{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8} #cta h2{font-size:clamp(3.2rem,15vw,16rem);text-transform:uppercase;line-height:.84;letter-spacing:-.045em;margin-top:1.4rem} #cta .cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:clamp(2.5rem,6vw,4rem)} #cta .btn-primary{background:var(--white);color:var(--violet)} #cta .btn-primary:hover{background:var(--lime);color:var(--ink)} #cta .btn-ghost{border-color:rgba(255,255,255,.5);color:var(--white)} #cta .btn-ghost:hover{background:var(--white);color:var(--violet);border-color:var(--white)} /* ============================================================ FOOTER ============================================================ */ #footer{background:var(--ink);color:var(--paper);padding-top:clamp(3rem,7vh,6rem);overflow:hidden} .footer-big{ font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,22vw,22rem);line-height:.82; letter-spacing:-.05em;text-transform:uppercase; } .footer-big .accent{color:var(--lime)} .footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:clamp(3rem,7vw,5rem);padding-bottom:3rem;border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(2rem,4vw,3rem)} @media(min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.4fr}} .footer-col h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:1.2rem;font-weight:400} .footer-col a,.footer-col p{display:block;color:var(--paper);margin-bottom:.6rem;font-size:.98rem;transition:color .3s} .footer-col a:hover{color:var(--lime)} .footer-col .muted{color:var(--taupe)} .footer-brand p{color:var(--taupe);max-width:34ch;font-size:1rem;line-height:1.55} .footer-brand .tagline{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--paper);margin-bottom:1rem;text-transform:uppercase;line-height:1} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:2rem;border-top:1px solid rgba(255,255,255,.14);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)} .footer-bottom a:hover{color:var(--lime)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:900px){ .nav .nav-link,.nav .cta-pill{display:none} .menu-toggle{display:flex;flex-direction:column;gap:5px;z-index:2;padding:.5rem;width:44px;align-items:flex-end} .menu-toggle i{display:block;height:2px;width:28px;background:currentColor;transition:transform .4s var(--ease),opacity .3s} .menu-toggle.open i:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle.open i:nth-child(2){opacity:0} .menu-toggle.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .plate{width:clamp(150px,42vw,220px)} } /* Phone: stack IN/ over FIN so the wordmark stays huge, and let the eye grow to match the taller stacked letters. Meta copy stacks and left-aligns. */ /* ---- Hero: art-directed mobile ---- */ @media(max-width:820px){ #hero.hero-editorial{padding-top:clamp(6rem,16vh,8rem)} .hm-tl,.hm-tr{top:auto;bottom:auto} } @media(max-width:680px){ /* Mobile is re-composed, not shrunk: markers stacked at the top, the giant serif IN/FIN as the anchor, copy centred below, imagery removed for calm. The word keeps the same fill-ratio as desktop (~one line, edge margins). */ #hero.hero-editorial{ justify-content:center;text-align:center; padding:clamp(6.5rem,16vh,8.5rem) var(--pad-x) clamp(2.4rem,6vh,3.2rem); } .hero-mark{position:static;display:block;text-align:center;margin:0 auto} .hm-tl{margin-bottom:.5rem} .hm-tr{margin-bottom:clamp(1.6rem,5vh,2.4rem);color:#a6a6a1} .infin-word{font-size:clamp(3rem,26vw,16rem)} .hero-say{margin-top:clamp(1.6rem,4vh,2.4rem)} .hero-sub{max-width:34ch} .hero-scroll{display:none} } @media(max-width:620px){ .plates{height:clamp(360px,90vw,460px)} .trust-badges img{height:34px} .growth-step .gs-num{font-size:32vw} .result{border-right:none} .result:nth-child(odd){border-right:1px solid rgba(255,255,255,.25)} } /* ============================================================ REDUCED MOTION ============================================================ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .scroll-cue .dot::after{animation:none} /* Hero: keep the composition, drop the motion. No spotlight follow; the ink word sits fully solid and readable, imagery layer stays hidden. */ #hero.hero-editorial{--sx:50%;--sy:50%;--hole:0%;--mx:0;--my:0} } /* Utility to hide until JS ready for split reveals */ .js .pre-reveal{opacity:0} /* ===================================================================== LIGHT THEME Black/dark sections become white with dark text; sections that carry a real colour (violet CTA, the colourful certification cards) are kept. The old blue "numbers" band becomes lime with dark text. Appended last so these declarations win over the dark rules above. Lime is unreadable as text on white, so functional accents (hovers, active states, links, the in/fin slash) use --pop (violet); the vivid per-section accents (magenta lab, colourful cards) stay as they are. ===================================================================== */ :root{ --pop:var(--violet); /* Darken the secondary / description greys — the light-theme page needs stronger body copy than the dark theme did. Both tokens now only sit on light surfaces, so this lifts every description at once. */ --stone:#3d3d3b; --taupe:#4a4844; } /* Base surface */ body{background:var(--white);color:var(--ink)} /* Service preview badge sits on a dark glass pill over the image */ .svc-visual-badge span{color:var(--white)} ::selection{background:var(--pop);color:#fff} /* Loader */ #loader{background:var(--white)} #loader .loader-mark{color:var(--ink)} #loader .loader-mark .slash{color:var(--pop)} #loader .loader-sub{color:var(--stone)} #loader .loader-bar{background:rgba(11,11,12,.1)} #loader .loader-count{color:var(--ink)} /* Custom cursor — solid dark so it reads on white (no difference-blend, which would turn a dark dot near-white and make it invisible on the light theme) */ #cursor{background:var(--ink);mix-blend-mode:normal} #cursor.big{background:var(--pop);mix-blend-mode:normal} #cursor.big .cursor-label{color:var(--white)} #cursor.ring{border-color:var(--ink);mix-blend-mode:normal} /* Header */ #header.scrolled{background:rgba(255,255,255,.72);border-bottom:1px solid rgba(11,11,12,.08)} .logo3d,.logo3d .sl{color:var(--ink)} /* dark wordmark so it reads on white */ /* Mobile menu */ #mobile-menu{background:var(--white)} #mobile-menu nav a{color:var(--ink)} #mobile-menu .mm-foot{color:var(--stone)} #mobile-menu .mm-foot a:hover{color:var(--pop)} /* Ghost button on white */ .btn-ghost{border-color:rgba(11,11,12,.25);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink)} /* Hero — the IN/FIN universe is authored white-first in the main block above, so the light-theme layer only needs to keep the surface white. */ #hero{background:var(--white)} /* Marquee (dark → white) */ .marquee{border-color:rgba(11,11,12,.14)} .marquee-track .sep{color:var(--pop)} /* Section theming */ .sec-dark{background:var(--white);color:var(--ink)} .sec-paper{background:var(--white)} #growth{background:var(--white)} /* was warm paper — unify to white */ #testimonials{background:var(--white)} /* Services (dark → white) */ #services{background:var(--white)} .svc-list{border-top-color:rgba(11,11,12,.14)} .svc-item{border-bottom-color:rgba(11,11,12,.14)} .svc-item .svc-num{color:var(--stone)} .svc-item .svc-arrow{color:var(--stone)} .svc-item .svc-desc{color:var(--stone)} .svc-item .svc-tags b{border-color:rgba(11,11,12,.2);color:var(--ink)} .svc-item .svc-points li{color:var(--char);opacity:1} .svc-item .svc-points li::before{color:var(--pop)} .svc-item.active .svc-name{color:var(--pop)} .svc-item.active .svc-arrow{color:var(--pop)} .svc-item:hover .svc-name{color:var(--pop)} /* Growth cube faces read on the light page */ .growth-step .gs-num{filter:drop-shadow(4px 7px 7px rgba(11,11,12,.14))} /* Work (dark → white) */ #work{background:var(--white)} .work-card{color:var(--ink)} .wc-idx{color:var(--stone)} .wc-arrow{color:var(--stone)} .work-card:hover .wc-arrow{color:var(--pop)} .work-card:hover .wc-body h3{color:var(--pop)} .wc-body p{color:var(--stone)} /* Certification band (dark → white; colourful cards kept) */ .cert{background:var(--white);color:var(--ink)} /* Creative Lab (dark → white) */ #lab{background:var(--white)} .lab-title{mix-blend-mode:normal;color:var(--ink)} .lab-title .accent{color:var(--magenta)} .lab-note{background:var(--ink);color:var(--white)} .lab-note .ln-dot{color:var(--magenta)} /* Results — the "numbers move" band: blue → lime, text → dark */ #results{background:var(--lime);color:var(--ink)} .results-head .muted{color:rgba(11,11,12,.4)} .results-grid{border-top-color:rgba(11,11,12,.22)} .result{border-bottom-color:rgba(11,11,12,.22);border-right-color:rgba(11,11,12,.22)} .result .r-label{color:rgba(11,11,12,.65)} .result .r-note{color:rgba(11,11,12,.5)} /* Case study (dark → white) */ #case{background:var(--white);color:var(--ink)} .case-card{border-color:rgba(11,11,12,.1)} /* Why (dark → white) */ #why{background:var(--white)} .why-item{border-top-color:rgba(11,11,12,.1)} /* Insights (dark → white) */ #insights{background:var(--white);color:var(--ink)} .article{border-top-color:rgba(11,11,12,.14)} .article .a-cat{color:var(--stone)} .article:hover .a-cat{color:var(--pop)} .article p{color:var(--stone)} /* Horizontal-scroll progress (if present) */ .hscroll-progress{background:rgba(11,11,12,.14)} .hscroll-progress i{background:var(--pop)} /* Footer (dark → white) */ #footer{background:var(--white);color:var(--ink)} .footer-big .accent{color:var(--pop)} .footer-grid{border-top-color:rgba(11,11,12,.14)} .footer-col h4{color:var(--stone)} .footer-col a,.footer-col p{color:var(--ink)} .footer-col a:hover{color:var(--pop)} .footer-col .muted{color:var(--stone)} .footer-brand p{color:var(--stone)} .footer-brand .tagline{color:var(--ink)} .footer-bottom{border-top-color:rgba(11,11,12,.14);color:var(--stone)} .footer-bottom a:hover{color:var(--pop)} /* Results odd-cell border on small screens */ @media(max-width:620px){ .result:nth-child(odd){border-right-color:rgba(11,11,12,.22)} } /* ============================================================ LEGAL PAGES (Privacy Policy / Terms & Conditions) Lightweight, white, readable. Reuses the site header/footer and type tokens; no JS-driven reveals so the pages work without GSAP. ============================================================ */ .legal-page{background:var(--white);color:var(--ink)} /* mobile-menu link text is GSAP-revealed on the homepage; on the legal pages (no GSAP) show it directly. The menu is still hidden when closed. */ .legal-page #mobile-menu nav a span{transform:none} .legal-main{padding-top:clamp(6.5rem,13vh,9rem)} /* Centre the reading column so whitespace is balanced (not all on the right) */ .legal-hero,.legal-body{max-width:860px;margin-inline:auto} .legal-hero{padding-bottom:clamp(1.8rem,4vh,2.8rem);border-bottom:1px solid #EAEAEA} .legal-hero h1{ font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; font-size:clamp(2.4rem,6vw,4.6rem);margin:.7rem 0 1.1rem;color:var(--ink); } .legal-intro{max-width:62ch;color:var(--stone);line-height:1.65; font-size:clamp(1rem,1.4vw,1.15rem)} .legal-updated{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--stone);margin-top:1.4rem} .legal-body{max-width:860px;margin-top:clamp(2.4rem,6vh,3.6rem); padding-bottom:clamp(3.5rem,9vh,6rem)} .legal-body p,.legal-body li{max-width:none} .legal-body section{margin-bottom:clamp(1.8rem,3.5vh,2.6rem)} .legal-body h2{ font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.18; font-size:clamp(1.25rem,2.3vw,1.65rem);margin-bottom:.75rem;color:var(--ink); display:flex;gap:.55em;align-items:baseline; } .legal-body h2 .num{font-family:var(--font-mono);font-weight:400;font-size:.72em;color:var(--pop);flex:none} .legal-body h3{font-family:var(--font-display);font-weight:600;font-size:1.05rem; color:var(--ink);margin:1.25rem 0 .5rem} .legal-body p{color:var(--char);font-size:1rem;line-height:1.72;margin-bottom:.9rem;max-width:70ch} .legal-body ul,.legal-body ol{margin:0 0 1.1rem;padding:0} .legal-body li{position:relative;padding-left:1.5em;margin-bottom:.5rem;color:var(--char);line-height:1.6;max-width:70ch} .legal-body ul li::before{content:"";position:absolute;left:.25em;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pop)} .legal-body ol{counter-reset:li} .legal-body ol li{counter-increment:li} .legal-body ol li::before{content:counter(li);position:absolute;left:0;top:.02em;font-family:var(--font-mono);font-size:.82em;color:var(--pop)} .legal-body a{color:var(--ink);border-bottom:1px solid var(--pop);transition:color .2s} .legal-body a:hover{color:var(--pop)} .legal-body strong{font-weight:600;color:var(--ink)} .legal-contact{margin-top:2.2rem;padding:clamp(1.4rem,3vw,2rem); border:1px solid #EAEAEA;border-radius:var(--radius)} .legal-contact h2{margin-bottom:.7rem} .legal-contact address{font-style:normal;color:var(--char);line-height:1.75} .legal-contact a{color:var(--ink);border-bottom:1px solid var(--pop)} .legal-contact a:hover{color:var(--pop)} .legal-note{margin-top:2rem;padding-top:1.2rem;border-top:1px solid #EAEAEA; font-size:.82rem;color:var(--stone);line-height:1.65} /* Clear, visible keyboard focus on the legal pages */ .legal-page a:focus-visible,.legal-page button:focus-visible{outline:2px solid var(--pop);outline-offset:3px} @media(max-width:600px){ .legal-body{margin-top:2rem} .legal-body h2{gap:.4em} }