/* =========================================================
   FM STUDIO
   Fixed pixel sizes, like Framer, measured from the live site.
   Breakpoints (same as Framer):
     Desktop ≥1200px · Tablet 810–1199px · Phone <810px

   Text is placed by its BASELINE so it lines up with Framer:
     top: calc(<baseline>px - <line-height>/2 - .383em)
   ========================================================= */
:root {
  --bg: #0b0b0d;
  --text: #ffffff;
  --grey: rgba(255, 255, 255, 0.62);
  --dim: rgba(255, 255, 255, 0.42);
  --line: rgba(255, 255, 255, 0.24);
  --font: "Manrope", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: none; }
figure, h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
main, footer { position: relative; z-index: 1; }
main { z-index: 2; } /* stats can sit over the footer's empty top area */
/* (horizontal overflow is clipped on html/body; no clip on <main>, so stats can't be cut off) */

/* ---------- Grain + glows ---------- */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.035; transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow { position: absolute; z-index: -1; pointer-events: none; }
.glow-1 { width: 820px; height: 940px; right: -410px; top: 180px; background: radial-gradient(closest-side, rgba(176, 38, 120, 0.42), rgba(120, 20, 70, 0.14) 45%, rgba(120, 20, 70, 0.04) 75%, transparent); }
.glow-2 { width: 1060px; height: 860px; left: -30px; top: -30px; background: radial-gradient(closest-side, rgba(90, 18, 30, 0.42), rgba(60, 10, 20, 0.14) 45%, rgba(60, 10, 20, 0.04) 75%, transparent); }

/* ---------- Custom cursor dot ---------- */
.cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; opacity: 0;
  transition: opacity .25s ease, scale .3s var(--ease);
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-hidden { opacity: 0; scale: .2; }
@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }

/* ---------- Header ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.logo {
  position: absolute; left: 32px;
  font-size: 30px; line-height: 30px; letter-spacing: -0.01em;
  top: calc(44px - 15px - .383em);
  white-space: nowrap;
}
.logo sup { font-size: .42em; vertical-align: top; position: relative; top: -.42em; margin-left: 3px; }

/* ---------- Social icons + hover ---------- */
.side-socials { display: flex; flex-direction: column; gap: 33px; }
.side-socials a { display: block; color: rgba(255, 255, 255, 0.5); transition: color .35s var(--ease); }
.side-socials svg {
  display: block; width: 28px; height: 28px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--ease);
}
.side-socials .dot { fill: currentColor; stroke: none; }
.side-socials a:hover { color: #fff; }
.side-socials a:hover svg { transform: rotate(-25deg) scale(1.08); }

/* ---------- Boxed link (Request Portfolio / book a call) + hover ---------- */
.link-boxed {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1; letter-spacing: -0.01em; color: rgba(255, 255, 255, .85);
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.link-boxed .arr { display: inline-block; font-size: 1.05em; transition: transform .45s var(--ease); }
.link-boxed:hover { color: #fff; border-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .04); }
.link-boxed:hover .arr { transform: rotate(45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; height: 897px; background: var(--bg); }

.hero-shape { position: absolute; left: calc(50% + 140px); top: 100px; width: 430px; height: 538px; z-index: 0; mix-blend-mode: lighten; }
.hero-shape video, .hero-shape img { width: 100%; height: 100%; object-fit: contain; }
.hero-shape video { position: absolute; inset: 0; }
.hero-shape.has-video .hero-fallback { display: none; }
/* Spline scene: fades in over the video once it has loaded */
.hero-spline { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s var(--ease); }
.hero-shape.has-spline .hero-spline { opacity: 1; }
.hero-shape.is-offscreen .hero-spline { visibility: hidden; }
.hero-shape.has-spline .hero-video,
.hero-shape.has-spline .hero-fallback { opacity: 0; transition: opacity 1s var(--ease); }

.hero-title {
  position: absolute; z-index: 2; left: 126px;
  font-size: 120px; line-height: 120px; letter-spacing: -0.03em; font-weight: 400;
  top: calc(596px - 60px - .383em);
}
.hero-title .line { display: block; white-space: nowrap; }
.line-for { margin-top: 15px; }
.br-tablet { display: none; }
.for { color: rgba(255, 255, 255, .45); font-weight: 300; margin-right: .06em; }

/* Rotating word — letters slide up one by one */
.rotator {
  position: relative; display: inline-block; vertical-align: top;
  width: 4.6em; height: 1em;
  clip-path: inset(-0.17em -1em -0.1em 0);
}
.rotator .word { position: absolute; left: 0; top: 0; white-space: nowrap; }
.rotator .ch { display: inline-block; transform: translateY(135%); }
.rotator.is-animated .ch { transition: transform .75s var(--ease-io); transition-delay: calc(var(--i) * 28ms); }
.rotator .word.is-active .ch { transform: translateY(0); }
.rotator .word.is-leaving .ch { transform: translateY(-135%); }
html:not(.js) .rotator .word:not(:first-child) { display: none; }
html:not(.js) .rotator .ch, html:not(.js) .rotator .word { transform: none; }

.hero-socials { position: absolute; left: 34px; top: 636px; z-index: 2; }

.scroll-arrow { position: absolute; right: 32px; top: 619px; width: 112px; height: 112px; z-index: 2; color: rgba(255, 255, 255, .38); transition: color .4s var(--ease), transform .5s var(--ease); }
.scroll-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; }
.scroll-arrow:hover { color: #fff; transform: translate(4px, 4px); }

/* Intro sequence on load: headline fades up dim, then everything lights up */
html.js .hero-title .line-1,
html.js .hero-title .line-for,
html.js .page-home .logo,
html.js .hero-shape { opacity: 0; }
html.is-ready .hero-title .line-1   { animation: introMain 2s var(--ease) .15s both; }
html.is-ready .hero-title .line-for { animation: introSub 2s var(--ease) .15s both; }
html.is-ready .page-home .logo               { animation: fadeIn .9s var(--ease) 1.45s both; }
html.is-ready .hero-shape           { animation: shapeIn 1.4s var(--ease) 1.35s both; }
@keyframes introMain { 0% { opacity: 0; } 30%, 62% { opacity: .5; } 100% { opacity: 1; } }
@keyframes introSub  { 0% { opacity: 0; } 30%, 62% { opacity: .18; } 100% { opacity: 1; } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes shapeIn   { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* =========================================================
   SERVICES — words light up on scroll, tiles fly out from the centre
   ========================================================= */
.services { position: relative; height: 750px; --k: 1; --cy: 300px; }

.services-text {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 432px; text-align: center;
  font-size: 43px; line-height: 57px; letter-spacing: -0.02em;
  top: calc(166px - 28.5px - .383em);
}
.services-text .w { color: rgba(255, 255, 255, .32); transition: color .22s ease-out; }
.services-text .w.is-lit { color: #fff; }
html:not(.js) .services-text { color: #fff; }

.services-link { position: absolute; left: 50%; transform: translateX(-50%); top: 502px; width: 210px; z-index: 2; }

.tile {
  position: absolute; left: 50%; top: 0; overflow: hidden;
  width: var(--w); height: var(--h);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2);
  transform:
    translate(calc(var(--x) * var(--k)), calc(var(--cy) + (var(--y) - var(--cy)) * var(--k)))
    rotate(calc(var(--r) * (0.4 + 0.6 * var(--k))))
    scale(calc(0.3 + 0.7 * var(--k)));
  will-change: transform;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-tl { --w: 128px; --h: 135px; --x: -348px; --y: 100px; --r: 13deg; }
.tile-tr { --w: 158px; --h: 175px; --x: 334px;  --y: 122px; --r: -8deg; }
.tile-bl { --w: 171px; --h: 175px; --x: -304px; --y: 471px; --r: 13deg; }
.tile-br { --w: 139px; --h: 131px; --x: 310px;  --y: 469px; --r: 10deg; }

/* =========================================================
   INTRO + STATS
   ========================================================= */
.about { position: relative; height: 603px; }

.intro {
  position: absolute; left: 28px; top: 5px;
  max-width: 39vw;
  font-size: 19.5px; line-height: 32px; letter-spacing: -0.01em; color: rgba(255, 255, 255, .72);
}

.stats { position: absolute; right: 5vw; top: 368px; display: flex; flex-direction: column; align-items: flex-end; }
.stat {
  display: flex; align-items: center; gap: 13px;
  font-size: 88px; line-height: 100px; letter-spacing: -0.01em;
}
.stat-flip { flex-direction: row-reverse; }
.badge {
  flex: none; display: grid; place-items: center;
  width: 70px; height: 70px; border-radius: 50%;
  background:
    url("assets/YMd9DYJZY8PQzgfaFwJVGX0pMiM.png") center / cover,
    radial-gradient(circle at 50% 45%, #000 55%, #141416 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(255, 255, 255, .18);
}
.count { font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- Scroll reveal ---------- */
html.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
html.js .reveal.is-visible { opacity: 1; translate: 0 0; }

/* =========================================================
   FOOTER / CONTACT — same component on home and /contact
   ========================================================= */
.footer { position: relative; isolation: isolate; overflow: hidden; height: 997px; }
.page-contact .footer { height: max(997px, 100svh); }
.footer > * { position: absolute; margin: 0; }

.footer::before { /* fallback colour wave if the gradient image is missing */
  content: ""; position: absolute; z-index: -2; inset: 35% -10% -10% -10%;
  background:
    radial-gradient(28% 22% at 78% 42%, rgba(255, 225, 235, 0.5), transparent 70%),
    radial-gradient(45% 18% at 45% 66%, rgba(240, 215, 70, 0.7), transparent 72%),
    radial-gradient(30% 30% at 92% 62%, rgba(200, 50, 170, 0.75), transparent 70%),
    radial-gradient(60% 35% at 25% 75%, rgba(225, 70, 120, 0.7), transparent 70%),
    radial-gradient(70% 40% at 60% 100%, rgba(200, 40, 60, 0.8), transparent 75%);
}
.footer-gradient {
  z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none;
  /* fade the image's top edge into the page so there's no visible seam */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
}

.footer-socials { left: 34px; top: 236px; }
.avatar { left: 132px; top: 232px; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.name  { left: 222px; font-size: 25px; line-height: 25px; letter-spacing: -0.01em; top: calc(263px - 12.5px - .383em); white-space: nowrap; }
.role  { left: 222px; font-size: 16px; line-height: 16px; color: var(--dim); top: calc(291px - 8px - .383em); white-space: nowrap; }
.label { left: 132px; font-size: 18px; line-height: 18px; color: var(--grey); top: calc(352px - 9px - .383em); }
.email { left: 132px; font-size: 31px; line-height: 31px; letter-spacing: -0.01em; top: calc(395px - 15.5px - .383em); white-space: nowrap; transition: opacity .3s ease; }
.email:hover { opacity: .7; }
.book  { left: 132px; top: 460px; width: 158px; font-size: 17px; }

.cta-title {
  left: 50%; width: calc(50% - 40px);
  font-size: 59px; line-height: 60px; letter-spacing: -0.025em; font-weight: 400;
  top: calc(284px - 30px - .383em);
}
.cta-title br { display: none; }
.tagline { left: 50%; font-size: 22.5px; line-height: 22px; letter-spacing: -0.01em; color: var(--grey); top: calc(497px - 11px - .383em); white-space: nowrap; }

.lets-talk { left: 2%; width: 96%; height: auto; bottom: 52px; }
.legal { left: 32px; bottom: 13px; font-size: 16px; line-height: 16px; color: rgba(255, 255, 255, .85); white-space: nowrap; }

/* Desktop shows "Info@…" with a capital I, like the Framer site */
@media (min-width: 1200px) {
  .email { display: block; }
  .email::first-letter { text-transform: uppercase; }
}

/* =========================================================
   TABLET 810–1199px
   ========================================================= */
@media (max-width: 1199px) {
  .logo { font-size: 24px; line-height: 24px; top: calc(43.6px - 12px - .383em); }

  .hero { height: 1300px; }
  .hero-shape { left: calc(50% - 75px); top: 138px; width: 380px; height: 476px; }
  .hero-title { left: 125px; font-size: 100px; line-height: 100px; top: calc(796px - 50px - .383em); }
  .br-tablet { display: inline; }
  .line-for { margin-top: 7px; }
  .hero-socials { left: 36px; top: 921px; }
  .scroll-arrow { right: 24px; top: 920px; width: 90px; height: 90px; }

  .services { height: 929px; --cy: 312px; }
  .services-text { width: 410px; font-size: 40px; line-height: 57px; top: calc(183px - 28.5px - .383em); }
  .services-link { top: 520px; }
  .tile-tl { --w: 108px; --h: 113px; --x: -305px; --y: 112px; }
  .tile-tr { --w: 132px; --h: 146px; --x: 300px;  --y: 140px; }
  .tile-bl { --w: 143px; --h: 147px; --x: -262px; --y: 502px; }
  .tile-br { --w: 117px; --h: 110px; --x: 270px;  --y: 504px; }

  .about { height: 1003px; }
  .intro { left: 29px; top: 0; max-width: 480px; }
  .stats { right: 75px; top: 626px; }
  .stat { font-size: 76px; line-height: 100px; }
  .badge { width: 62px; height: 62px; }
  .count { font-size: 23px; }

  /* footer: centred stack */
  .footer { height: 1176px; }
  .page-contact .footer { height: max(1176px, 100svh); }
  .footer-socials, .avatar, .name, .role, .email, .book, .cta-title, .tagline { left: 50%; transform: translateX(-50%); text-align: center; }
  .label { display: none; }
  .avatar { top: 140px; width: 70px; height: 70px; }
  .name  { top: calc(259px - 12.5px - .383em); }
  .role  { font-size: 16px; line-height: 16px; top: calc(289px - 8px - .383em); }
  .email { top: calc(357px - 15px - .383em); }
  .footer-socials { top: 404px; flex-direction: row; gap: 55px; }
  .cta-title { width: 92%; top: calc(553px - 30px - .383em); }
  .cta-title br.bt { display: inline; }
  .tagline { top: calc(744px - 11px - .383em); }
  .book { top: 839px; width: 156px; }
  .lets-talk { left: 3%; width: 93%; bottom: 40px; }
  .legal { left: 32px; bottom: 15px; }
}

/* =========================================================
   PHONE <810px
   ========================================================= */
@media (max-width: 809px) {
  .logo { left: 15px; font-size: 22px; line-height: 22px; top: calc(43px - 11px - .383em); }

  .hero { height: 790px; }
  .hero-shape { left: calc(50% - 195px); top: 230px; width: 390px; height: 489px; }
  .hero-title { left: 14px; font-size: 61px; line-height: 61px; top: calc(548px - 30.5px - .383em); }
  .line-for { margin-top: 25px; }
  .hero-socials, .scroll-arrow { display: none; }

  .services { height: 692px; --cy: 247px; }
  .services-text { width: 320px; font-size: 29px; line-height: 43px; top: calc(150.6px - 21.5px - .383em); }
  .services-link { top: 426px; width: 160px; height: 46px; font-size: 14px; }
  .tile-tl { --w: 72px; --h: 76px; --x: -120px; --y: 76px; }
  .tile-tr { --w: 84px; --h: 92px; --x: 110px;  --y: 100px; }
  .tile-bl { --w: 96px; --h: 98px; --x: -105px; --y: 520px; }
  .tile-br { --w: 84px; --h: 79px; --x: 113px;  --y: 505px; }
  .glow-1 { width: 460px; height: 620px; right: -250px; top: 120px; }
  .glow-2 { width: 620px; height: 560px; left: -160px; top: 20px; }

  .about { height: 588px; }
  .intro { left: 14px; max-width: calc(100% - 28px); font-size: 18px; line-height: 32px; }
  .stats { left: 29px; right: auto; top: 215px; align-items: flex-start; gap: 40px; }
  .stat, .stat-flip { flex-direction: row-reverse; gap: 25px; font-size: 46px; line-height: 47px; }
  .stat-label { max-width: 4.6em; }
  .badge { width: 46px; height: 46px; }
  .count { font-size: 17px; }

  .footer { height: 1043px; }
  .page-contact .footer { height: max(1043px, 100svh); }
  .avatar { top: 99px; }
  .name  { font-size: 21px; line-height: 21px; top: calc(214px - 10.5px - .383em); }
  .role  { font-size: 14px; line-height: 14px; top: calc(240px - 7px - .383em); }
  .email { font-size: 23px; line-height: 23px; top: calc(300px - 11.5px - .383em); }
  .footer-socials { top: 345px; gap: 53px; }
  .cta-title { width: 96%; font-size: 49px; line-height: 50px; top: calc(485px - 25px - .383em); }
  .cta-title br.bt { display: none; }
  .cta-title br.bp { display: inline; }
  .tagline { font-size: 18px; line-height: 18px; top: calc(744px - 9px - .383em); }
  .book { top: 780px; width: 158px; height: 53px; font-size: 15px; }
  .lets-talk { left: 3.3%; width: 92.6%; bottom: 40px; }
  .legal { left: 15px; bottom: 22px; font-size: 14px; line-height: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal, html.js .hero-title .line-1, html.js .hero-title .line-for, html.js .logo, html.js .hero-shape { opacity: 1; translate: none; }
  .services { --k: 1 !important; }
  .services-text .w { color: #fff; }
}