/* =========================================================
   Nilanjan — Portfolio
   Built from Figma "flutrr ERP" › Portfolio (node 49:1451)
   Desktop reference width: 1440px
   ========================================================= */

:root {
  --ink: #111212;
  --white: #ffffff;
  --blue: #36c5f0;
  --sky: #a4e5f8;
  --yellow: #ecb22e;
  --red: #e01e5a;
  --green: #2fbc81;
  --brown: #522e29;
  --mint: #a1dfc5;
  --sand: #f5dda1;
  --line: #c6c6c7;
  --chip: #ededed;
  --muted: #767777;
  --grid-line: #f6f6f6;
  --grid-size: 100px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: 100px;
  --header-h: 49px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  /* 100px blueprint grid behind the whole page */
  background-color: var(--white);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  /* Match Figma's Inter metrics (text optical size) */
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { overflow-x: clip; }

img { display: block; max-width: none; }

a { color: inherit; }

/* ---------- Type helpers ---------- */
.mono-14,
.mono-16 {
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.mono-14 { font-size: 14px; line-height: 14px; letter-spacing: -0.42px; }
.mono-16 { font-size: 16px; line-height: 16px; letter-spacing: -0.48px; }

.script-40,
.script-32,
.script-24 {
  margin: 0;
  font-family: "Just Me Again Down Here", cursive;
  font-weight: 400;
  white-space: nowrap;
}
.script-40 { font-size: 40px; line-height: 48px; letter-spacing: -1.2px; }
.script-32 { font-size: 32px; line-height: 38.4px; letter-spacing: -0.96px; }
.script-24 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.72px; }

.t { font-size: calc(var(--fs) * 1px); white-space: pre; }

.ico16 {
  position: relative;
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.ico16 img { position: absolute; }

/* Masked line reveal (the "gsap-line" pattern from the design) */
.line { display: flex; justify-content: center; overflow: hidden; }
.line-in {
  display: flex;
  align-items: center;
  transform: translateY(110%);
  transition: transform .7s var(--ease-out) var(--d, 0s);
}
.is-in .line-in,
.is-loaded .hero-lines .line-in { transform: none; }

/* Scroll reveal */
/* Content is never invisible: it starts slightly faded and lower, then settles in */
.js [data-reveal=""] {
  opacity: .4;
  transform: translateY(28px);
  transition: opacity .45s ease, transform .65s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal=""].is-in { opacity: 1; transform: none; }

/* Hero intro */
.js .intro {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease var(--d, 0s), transform .9s var(--ease-out) var(--d, 0s);
}
.is-loaded .intro { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(calc(var(--r, 0deg) + 360deg)); } }
@keyframes pop-in {
  0% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.4); }
  70% { opacity: 1; transform: rotate(calc(var(--r, 0deg) * 1.6)) scale(1.06); }
  100% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}
@keyframes bob {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50% { transform: rotate(calc(var(--r, 0deg) - 2deg)) translateY(-7px); }
}
@keyframes slap {
  0% { opacity: 0; transform: rotate(calc(var(--r) + 18deg)) scale(1.5); }
  60% { opacity: 1; transform: rotate(calc(var(--r) - 3deg)) scale(.96); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--white);
}
.js .site-header { transform: translateY(-100%); transition: transform .8s var(--ease-out) .1s; }
.is-loaded .site-header { transform: none; }

/* Moving between pages: keep the navbar in place and play the entrance faster
   (the full version is for the first page of a visit) */
html.from-site .site-header { transform: none; transition: none; }
html.from-site .intro,
html.from-site .hero-lines .line-in,
html.from-site .cs-title .w-in {
  transition-duration: .5s;
  transition-delay: calc(var(--d, 0s) * .3);
}
html.from-site .ch { transition-duration: .5s; transition-delay: calc(var(--d, 0s) * .3); }
html.from-site .name-border { transition-duration: .6s; transition-delay: .1s; }
html.from-site .my-name .underline { transition-duration: .6s; transition-delay: .2s; }
html.from-site .is-loaded .h-tl { transition-delay: .2s; }
html.from-site .is-loaded .h-tr { transition-delay: .25s; }
html.from-site .is-loaded .h-br { transition-delay: .3s; }
html.from-site .is-loaded .h-bl { transition-delay: .35s; }
html.from-site .is-loaded .sticker-a .tag-note { animation-delay: .25s; }
html.from-site .is-loaded .sticker-b .tag-note { animation-delay: .3s; }
html.from-site .is-loaded .avatar-bubble-in { animation-delay: .35s, 1.2s; }
html.from-site .is-loaded .pill-role .pill { animation-delay: .4s, 1.2s; }
html.from-site .is-loaded .pill-loc .pill { animation-delay: .45s, 1.3s; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1800px;
  height: 48px;
  margin: 0 auto;
}

.nav { display: flex; align-items: center; height: 100%; }

.nav-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
}
.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease-out);
}
.nav-item:hover::before,
.nav-item:focus-visible::before,
.nav-item.is-active::before { transform: scaleY(1); }
.nav-item .ico16 { transition: transform .5s var(--ease-back); }
.nav-item:hover .ico16 { transform: rotate(-12deg) scale(1.15); }
.nav-item:hover .ico-spin { transform: rotate(90deg); }

.header-contact { display: flex; align-items: center; gap: 16px; }

.chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: var(--chip);
  text-decoration: none;
  transition: background .3s ease, transform .3s var(--ease-back);
}
.chip:hover,
.chip:focus-visible { background: var(--blue); transform: translateY(-2px); }

/* Avatar = resume download. The circle clip lives on the inner span so the tooltip can show. */
.header-avatar { position: relative; display: block; width: 32px; height: 32px; }
.header-avatar-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 32px;
  transition: transform .4s var(--ease-back);
}
.header-avatar-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.header-avatar-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--blue);
  border-radius: 32px;
}
.header-avatar:hover .header-avatar-img,
.header-avatar:focus-visible .header-avatar-img { transform: scale(1.12) rotate(-6deg); }

/* Hover tooltips: email, phone, resume */
.tip {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 60;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--blue);
  color: var(--ink);
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.42px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .2s ease, transform .3s var(--ease-out);
}
.tip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.has-tip:hover .tip,
.has-tip:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }

.btn-outline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: color .3s ease;
}
.btn-outline::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
}
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .4s var(--ease-out);
}
.btn-outline:hover { color: var(--white); }
.btn-outline:hover::before { transform: none; }
.btn-outline img { transition: filter .3s ease; }
.btn-outline:hover img { filter: invert(1); }
.btn-outline:hover .ico16 { animation: heartbeat .8s ease infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.25); }
  40% { transform: scale(.95); }
}

.header-line { height: 1px; background: var(--line); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  height: clamp(760px, 100vh, 900px);
}

.hero-ruler { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; width: 100%; padding-top: calc(var(--header-h) + 24px); }
/* Unique visitor count, filled from /api/visitors.json (stays hidden if the count can't load) */
.visitors {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: visitors-in .6s var(--ease-out) both;
}
.visitors[hidden] { display: none; }
.visitors::before { content: "\00B7"; margin-right: 6px; color: var(--muted); }
.visitors b { font-weight: 500; }
.visitors-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.visitors-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pulse 2s ease-out infinite; }
@keyframes visitors-in { from { opacity: 0; transform: translateY(-6px); } }
.clock {
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: -0.28px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hero-content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1800px;
  padding: 0 var(--gutter);
}

.hero-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding-bottom: 32px;
}

.my-name { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.underline { display: block; }
.js .underline { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-out) .55s; }
.is-loaded .my-name .underline,
.is-in .underline { clip-path: inset(0 0 0 0); }

/* Name box with selection handles */
.name-box { position: relative; display: flex; padding: 32px 32px 0; }

.name-text {
  margin: 0;
  font-weight: 900;
  font-size: 111.3px;
  line-height: 120px;
  letter-spacing: -3.75px;
  text-transform: uppercase;
  white-space: nowrap;
}
.name-clip { display: block; overflow: hidden; }
.ch { display: inline-block; }
.js .ch { transform: translateY(105%); transition: transform .9s var(--ease-out) var(--d, 0s); }
.is-loaded .ch { transform: none; }

.name-border {
  position: absolute;
  inset: 0;
  border: 3px solid var(--blue);
  pointer-events: none;
}
.js .name-border { clip-path: inset(0 100% 100% 0); transition: clip-path 1.1s var(--ease-out) .3s; }
.is-loaded .name-border { clip-path: inset(0 0 0 0); }

.name-handles { position: absolute; inset: -8px; overflow: hidden; pointer-events: none; }
.name-handles .h {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--blue);
  border: 2px solid var(--ink);
}
.h-tl { left: 0; top: 0; }
.h-bl { left: 0; bottom: 0; }
.h-tr { right: -0.11px; top: 0; }
.h-br { right: -0.11px; bottom: 0; }
.js .name-handles .h { transform: scale(0); transition: transform .5s var(--ease-back); }
.is-loaded .name-handles .h { transform: scale(1); }
.is-loaded .h-tl { transition-delay: .55s; }
.is-loaded .h-tr { transition-delay: .7s; }
.is-loaded .h-br { transition-delay: .85s; }
.is-loaded .h-bl { transition-delay: 1s; }

/* Sticky-note tags */
.sticker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-a { left: 14px; top: -76.53px; width: 164.672px; height: 91.106px; }
.sticker-b { right: -12.79px; top: -71.67px; width: 199.767px; height: 81.464px; }

.tag-note {
  display: block;
  flex: none;
  padding: 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22.4px;
  white-space: nowrap;
  transform: rotate(var(--r));
  transition: transform .4s var(--ease-back);
}
.tag-note.mint { background: var(--mint); font-size: 14.9px; }
.tag-note.sand { background: var(--sand); }
.js .tag-note { opacity: 0; }
.is-loaded .sticker-a .tag-note { animation: slap .7s var(--ease-out) 1s both; }
.is-loaded .sticker-b .tag-note { animation: slap .7s var(--ease-out) 1.15s both; }
.tag-note:hover { transform: rotate(0deg) scale(1.06); }

/* Availability */
.available { display: flex; align-items: center; gap: 8px; }
.pulse-dot {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 16px;
  background: var(--blue);
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Hero bottom: copy + button + floating pills */
.hero-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  width: 100%;
  padding-bottom: 150px;
}

.hero-lines {
  width: 400px;
  max-width: 400px;
  margin: 0;
  font-weight: 500;
  letter-spacing: -1.2px;
  text-align: center;
}
.hero-lines .line { height: 45.69px; }
.hero-lines .line-in { line-height: 44px; }

.inline-ico { display: flex; flex: none; align-items: center; justify-content: center; }
.spiral { width: 49.86px; height: 46.06px; }
.spiral img { --r: -116.78deg; width: 31.408px; height: 40px; transform: rotate(var(--r)); animation: spin 9s linear infinite; }
.flower { width: 40.013px; height: 46.385px; }
.flower img { --r: 165.94deg; transform: rotate(var(--r)); animation: spin 7s linear infinite; }

.btn-dark {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}
.btn-dark .mono-16 { position: relative; color: var(--white); transition: color .25s ease; }
/* Hover: the button turns into a selected white frame with corner handles */
.btn-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--ink);
  opacity: 0;
  transition: opacity .25s ease;
}
.btn-handles { position: absolute; inset: -5px; pointer-events: none; }
.btn-handles i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--white);
  border: 1px solid var(--ink);
  transform: scale(0);
  transition: transform .35s var(--ease-back);
}
.btn-handles i:nth-child(1) { left: 0; top: 0; }
.btn-handles i:nth-child(2) { right: 0; top: 0; transition-delay: .04s; }
.btn-handles i:nth-child(3) { right: 0; bottom: 0; transition-delay: .08s; }
.btn-handles i:nth-child(4) { left: 0; bottom: 0; transition-delay: .12s; }
.btn-dark:hover::before,
.btn-dark:focus-visible::before { opacity: 1; }
.btn-dark:hover .mono-16,
.btn-dark:focus-visible .mono-16 { color: var(--ink); }
.btn-dark:hover .btn-handles i,
.btn-dark:focus-visible .btn-handles i { transform: scale(1); }
.btn-dark-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  overflow: hidden;
  background: var(--blue);
}
.btn-dark .ff {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 16px;
  height: 16px;
  transition: transform .45s var(--ease-out);
}
.btn-dark .corner { position: absolute; width: 40px; height: 40px; transition: transform .6s var(--ease-back); }
.btn-dark .corner img { position: absolute; left: 3.99px; top: 0; }
.c-tl { left: -20px; top: -20px; }
.c-bl { left: -20px; bottom: -20px; }
.c-br { right: -20px; bottom: -20px; }
.c-tr { right: -20px; top: -20px; }
.btn-dark:hover .corner { transform: rotate(180deg) scale(1.25); }
.btn-dark:hover .ff { animation: dash-right .6s var(--ease-out); }
@keyframes dash-right {
  0% { transform: translateX(0); }
  45% { transform: translateX(30px); }
  46% { transform: translateX(-30px); }
  100% { transform: translateX(0); }
}

.pill-wrap { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pill-role { left: -3.02%; top: 36.92%; width: 196px; height: 57.4px; }
.pill-loc { left: 70.03%; top: -28.6%; width: 150.8px; height: 56.24px; }

.pill {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  box-shadow: inset 0 0 0 2px var(--ink);
  transform: rotate(var(--r));
}
.pill.yellow { background: var(--yellow); border-radius: 24px 0 24px 24px; }
.pill.red { background: var(--red); border-radius: 0 24px 24px 24px; color: var(--white); }
.pill-cursor { position: absolute; display: flex; align-items: center; justify-content: center; }
.pill.yellow .pill-cursor { left: 193.97px; top: -24.86px; width: 30.059px; height: 31.715px; }
.pill.yellow .pill-cursor img { transform: rotate(99deg); }
.pill.red .pill-cursor { left: -23px; top: -18px; }
.pill-cursor img { animation: cursor-nudge 2.4s ease-in-out infinite; }
.pill.red .pill-cursor img { animation-delay: -1.2s; }
@keyframes cursor-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 3px 4px; }
}
.is-loaded .pill-role .pill { animation: pop-in .8s var(--ease-out) 1.55s both, bob 5s ease-in-out 2.4s infinite; }
.is-loaded .pill-loc .pill { animation: pop-in .8s var(--ease-out) 1.7s both, bob 4.4s ease-in-out 2.5s infinite; }
.js .pill { opacity: 0; }

/* Floating avatar bubble */
.avatar-bubble { position: absolute; left: 8.06%; top: 38.29%; z-index: 2; }
.avatar-bubble-in {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 8px;
  overflow: hidden;
  background: var(--sky);
  border-radius: 56px 56px 56px 0;
}
.js .avatar-bubble-in { opacity: 0; }
.is-loaded .avatar-bubble-in { animation: pop-in .8s var(--ease-out) 1.4s both, bob 4.8s ease-in-out 2.3s infinite; }
.avatar-bubble .av { position: relative; display: block; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 40px; }
.avatar-bubble .av img { position: absolute; left: 0; top: -10.41%; width: 100%; height: 137.47%; }
/* Hover: the bubble opens up and says hi */
.av-msg {
  max-width: 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .55s var(--ease-out), padding .55s var(--ease-out), opacity .3s ease;
}
.avatar-bubble:hover .av-msg { max-width: 200px; padding: 0 10px 0 10px; opacity: 1; transition-delay: 0s, 0s, .12s; }

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 56px;
}

.about-curve {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  opacity: .3;
}
.about-curve img { flex: none; }
.js .about-curve img { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-out); }
.about-curve.is-in img { clip-path: inset(0 0 0 0); }

.about-contain {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 var(--gutter);
}
.about-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 1400px;
}

.about-deco { position: relative; width: 992px; max-width: 100%; height: 38.41px; }
.about-me-box {
  position: absolute;
  left: -3.55px;
  top: calc(50% + .5px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91.91px;
  height: 58.405px;
  transform: translateY(-50%);
}
.about-me { display: block; flex: none; transform: rotate(14deg); }
.js .about-me-box .about-me { opacity: 0; }
.about-me-box.is-in .about-me { animation: slap .7s var(--ease-out) both; --r: 14deg; }

.whatsup { position: relative; display: flex; padding: 8px; }
.whatsup-border { position: absolute; inset: 0; border: 2px solid var(--ink); }
.whatsup-text {
  margin: 0;
  font-weight: 500;
  font-size: 37.7px;
  line-height: 48px;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
.sq-handles { position: absolute; inset: -6px; overflow: hidden; pointer-events: none; }
.sq-handles i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--white);
  border: 2px solid var(--ink);
  transition: transform .5s var(--ease-back);
}
.sq-handles i:nth-child(1) { left: 0; top: 0; }
.sq-handles i:nth-child(2) { left: 0; bottom: 0; }
.sq-handles i:nth-child(3) { right: .4px; top: 0; }
.sq-handles i:nth-child(4) { right: .4px; bottom: 0; }
.js .whatsup .sq-handles i { transform: scale(0); }
.whatsup.is-in .sq-handles i { transform: scale(1); }
.whatsup.is-in .sq-handles i:nth-child(1) { transition-delay: .35s; }
.whatsup.is-in .sq-handles i:nth-child(3) { transition-delay: .45s; }
.whatsup.is-in .sq-handles i:nth-child(4) { transition-delay: .55s; }
.whatsup.is-in .sq-handles i:nth-child(2) { transition-delay: .65s; }
.whatsup:hover .sq-handles i { background: var(--blue); }

.about-lines {
  width: 850px;
  max-width: 850px;
  margin: 0;
  font-weight: 500;
  letter-spacing: -2.04px;
  text-align: center;
}
.about-lines .line { height: 78.47px; }
.about-lines .line:nth-child(2) { height: 74.99px; }
.about-lines .line-in { align-items: flex-start; line-height: 74.8px; }
.inline-img { display: block; flex: none; margin-top: 10.47px; overflow: hidden; }
.inline-img.photo { width: 56.95px; height: 68px; }
.inline-img.photo img { width: 100%; height: 100%; object-fit: cover; }
.inline-img.shape { width: 47.95px; height: 68px; }
.inline-img.shape img { width: 100%; height: 100%; }
.about-lines.is-in .inline-img img { animation: wiggle 3.2s ease-in-out 1.2s infinite; }
.about-lines.is-in .line:nth-child(3) .inline-img img { animation-delay: 1.6s; }
.about-lines.is-in .line:nth-child(4) .inline-img img { animation-delay: 2s; }
@keyframes wiggle {
  0%, 70%, 100% { transform: rotate(0) scale(1); }
  78% { transform: rotate(-10deg) scale(1.08); }
  86% { transform: rotate(8deg) scale(1.04); }
  94% { transform: rotate(-3deg) scale(1); }
}

/* Polaroids */
.polaroids {
  position: absolute;
  top: 245.29px;
  left: -91px;
  right: -91px;
  height: 226px;
  pointer-events: none;
}
.polaroid {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: auto;
}
.pol-1 { left: 24.72px; top: 15.24px; width: 198.379px; height: 221.486px; }
.pol-2 { right: 17.29px; top: 13.24px; width: 203.637px; height: 225.488px; }

.pol-card {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 162px;
  height: 192px;
  background: var(--white);
  box-shadow:
    0 .602px 1.807px -.833px rgba(0, 0, 0, .13),
    0 2.289px 6.866px -1.667px rgba(0, 0, 0, .13),
    0 10px 30px -2.5px rgba(0, 0, 0, .13);
  transform: rotate(var(--r));
  transition: transform .6s var(--ease-back), box-shadow .4s ease;
  cursor: grab;
}
.pol-photo { position: relative; flex: 1; margin: 8px 8px 0; overflow: hidden; }
.pol-me { position: absolute; left: 2.64%; top: -3.86%; width: 100%; height: 132.43%; }
.pol-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pol-card figcaption { padding-bottom: 8px; text-align: center; }
.polaroid:hover .pol-card {
  transform: rotate(0deg) scale(1.08) translateY(-6px);
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, .14),
    0 8px 16px -4px rgba(0, 0, 0, .14),
    0 24px 48px -8px rgba(0, 0, 0, .2);
}

/* Skills tags */
.skills {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 800px;
  max-width: 800px;
  height: 136px;
}
.skills-row { display: flex; align-items: center; gap: 3px; }
.skill {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 8px 16px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.2px;
  white-space: nowrap;
  transition: transform .4s var(--ease-back);
}
.skill.yellow { background: var(--yellow); }
.skill.green { background: var(--green); }
.skill.red { background: var(--red); color: var(--white); }
.skill.blue { background: var(--blue); }
.skill:hover { transform: rotate(-2deg) scale(1.04); }

.js .skills > .skills-row > * {
  opacity: .4;
  transform: translateY(30px) scale(.9);
  transition: opacity .5s ease, transform .7s var(--ease-back);
  transition-delay: calc(var(--i) * .07s);
}
.skills.is-in > .skills-row > * { opacity: 1; transform: none; }
.skills.is-in .skill:hover { transform: rotate(-2deg) scale(1.04); transition-delay: 0s; }

.skill-ico { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; }

.ico-interaction { background: var(--yellow); }
.ico-interaction::after { content: ""; position: absolute; inset: 0; border: 3px dashed var(--brown); }
.ico-interaction .glyph {
  position: absolute;
  inset: 21.52% 21.52% 21.5% 21.5%;
  background: var(--ink);
  -webkit-mask: url("../assets/img/mask-interactive.png") center / 100% 100% no-repeat;
          mask: url("../assets/img/mask-interactive.png") center / 100% 100% no-repeat;
  animation: step-turn 4s var(--ease-back) infinite;
}
@keyframes step-turn {
  0%, 20% { transform: rotate(0); }
  30%, 45% { transform: rotate(90deg); }
  55%, 70% { transform: rotate(180deg); }
  80%, 95% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

.ico-proto { background: var(--ink); }
/* Mask artwork is pre-rotated (-18.72°) at its 175.865px bounding box */
.ico-proto .burst {
  --r: 0deg;
  position: absolute;
  left: calc(50% + .5px - 87.93px);
  top: calc(50% + .5px - 87.93px);
  width: 175.865px;
  height: 175.865px;
  background: var(--green);
  -webkit-mask: url("../assets/img/mask-prototype.png") center / 100% 100% no-repeat;
          mask: url("../assets/img/mask-prototype.png") center / 100% 100% no-repeat;
  animation: spin 14s linear infinite;
}
.ico-proto .core {
  position: absolute;
  left: 18.72px;
  top: 18.73px;
  width: 27.55px;
  height: 27.55px;
  border-radius: 32px;
  background: var(--red);
  animation: core-pulse 1.8s ease-in-out infinite;
}
@keyframes core-pulse { 50% { transform: scale(1.18); } }

.ico-eye .eye-bg {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 65px;
  height: 65px;
  padding: .33px 0;
  background: var(--red);
}
.ico-eye .eye-bg img { animation: blink-eye 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes blink-eye {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.1); }
}
.ico-eye .star {
  --r: 0deg;
  position: absolute;
  inset: 33.48% 33.52% 33.48% 33.5%;
  background: var(--yellow);
  -webkit-mask: url("../assets/img/mask-star.png") center / 100% 100% no-repeat;
          mask: url("../assets/img/mask-star.png") center / 100% 100% no-repeat;
  animation: spin 5s linear infinite;
}

.ico-motion { background: var(--blue); }
.ico-motion .m-inner { position: absolute; inset: 24% 24.02% 24% 24%; overflow: hidden; }
.ico-motion i { position: absolute; display: block; border-radius: 32px; }
/* Dark dots: scattered (--x/--y/--s) <-> zoomed into a 2x2 grid (--gx/--gy, 13px) */
.ico-motion .d {
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: var(--ink);
  animation: motion-zoom 4.8s var(--ease-out) infinite;
}
.ico-motion .d1 { --x: 4.21px; --y: 4.21px; --s: 8.21px; --gx: 2.6px; --gy: 2.6px; }
.ico-motion .d2 { --x: 22.85px; --y: 6.23px; --s: 4.2px; --gx: 17.6px; --gy: 2.6px; animation-delay: .05s; }
.ico-motion .d3 { --x: 7.44px; --y: 24.08px; --s: 1.76px; --gx: 2.6px; --gy: 17.6px; animation-delay: .1s; }
.ico-motion .d4 { --x: 19.5px; --y: 20px; --s: 2.4px; --gx: 17.6px; --gy: 17.6px; animation-delay: .15s; }
@keyframes motion-zoom {
  0%, 30%, 92%, 100% { left: var(--x); top: var(--y); width: var(--s); height: var(--s); }
  46%, 76% { left: var(--gx); top: var(--gy); width: 13px; height: 13px; }
}
.ico-motion .r { background: var(--red); border-radius: 24px; }
.ico-motion .r1 { left: 3.28px; top: 3.29px; width: 14px; height: 14px; animation: drift 3.6s ease-in-out -1.2s infinite; }
.ico-motion .r2 { left: 50px; top: 11.15px; width: 4px; height: 4px; animation: drift 2.8s ease-in-out infinite reverse; }
.ico-motion .r3 { left: 10px; top: 52.85px; width: 4px; height: 4px; animation: drift 3.2s ease-in-out -.4s infinite; }
.ico-motion .r4 { left: 48.78px; top: 48.21px; width: 11px; height: 11px; animation: drift 4s ease-in-out -2s infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(3px, -4px); }
  66% { transform: translate(-3px, 2px); }
}

/* =========================================================
   FEATURED WORKS
   ========================================================= */
.work { margin-top: 250px; }
.work-contain {
  display: flex;
  flex-direction: column;
  gap: 48.205px;
  max-width: calc(1800px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.work-head { display: flex; flex-direction: column; align-items: center; gap: 16.2px; }
.work-deco { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.work-title {
  width: 100%;
  margin: 0;
  padding-top: 7.8px;
  font-weight: 900;
  font-size: 94.6px;
  line-height: 96px;
  letter-spacing: -3px;
  text-align: center;
  text-transform: uppercase;
}
.work-note-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 303.631px;
  height: 93px;
}
.work-note {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 299.991px;
  margin: 0;
  padding: 16px;
  background: var(--sand);
  font-weight: 500;
  line-height: 22.4px;
  white-space: nowrap;
  transform: rotate(-3deg);
  transition: transform .5s var(--ease-back);
}
.work-note:hover { transform: rotate(0deg) scale(1.04); }

/* Sticky stacking folders */
.projects { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Compact folders: 1000px wide, 470px card, centred.
   Each one pins in the middle of the screen while the next slides over it. */
.project {
  position: sticky;
  top: max(calc(var(--header-h) + 24px), calc(50vh - 271px));
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  padding: 0 0 120px;
}

.project-tabs { display: flex; flex: none; align-items: center; height: 72.89px; }
.tab-gap { flex: none; width: calc((100% - 348px) * var(--gap-f)); }
.tab {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 186px;
  height: 72px;
  background: var(--card);
  color: var(--on);
}
.tab-shape {
  flex: none;
  width: 81px;
  height: 72.89px;
  background: var(--card);
  -webkit-mask: url("../assets/svg/tab-left.svg") 0 0 / 81px 72.89px no-repeat;
          mask: url("../assets/svg/tab-left.svg") 0 0 / 81px 72.89px no-repeat;
}
.tab-shape.tab-r {
  -webkit-mask-image: url("../assets/svg/tab-right.svg");
          mask-image: url("../assets/svg/tab-right.svg");
}

.project-body { display: flex; flex: none; align-items: stretch; height: 470px; }

.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  background: var(--card);
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--card);
}

.card-content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  height: 100%;
  padding-top: 32px;
  overflow: hidden;
  color: var(--on);
}
.card-text {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  opacity: .2;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .9s var(--ease-out);
}
.project.is-active .card-text { opacity: 1; transform: none; }

.card-date { display: flex; align-items: center; gap: 16px; }
.card-date i { display: block; width: 12px; height: 12px; border-radius: 8px; background: var(--on); }
.project.is-active .card-date i { animation: blink-dot 1.6s ease-in-out infinite; }
@keyframes blink-dot { 50% { opacity: .25; } }

.card-title {
  max-width: 100%;
  margin: 8px 0 0;
  font-weight: 500;
  font-size: calc(var(--fs) * 1px);
  line-height: 74.8px;
  letter-spacing: -2.04px;
}
.card-desc { max-width: 380px; margin: 8px 0 0; font-weight: 500; line-height: 22.4px; }

.view-link {
  position: relative;
  display: block;
  width: 119.77px;
  height: 32px;
  margin-top: 24px;
  overflow: hidden;
  color: var(--on);
  text-decoration: none;
}
.view-link .mono-14 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.view-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--on);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.view-link:hover::after { animation: underline-swipe .7s var(--ease-out); }
@keyframes underline-swipe {
  0% { transform: scaleX(1); transform-origin: right; }
  49% { transform: scaleX(0); transform-origin: right; }
  50% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.view-arrow {
  position: absolute;
  left: 100.45px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.629px;
  height: 22.629px;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .45s var(--ease-back);
}
.view-link:hover .view-arrow { transform: translateY(-50%) rotate(0deg); }

.card-tags { display: flex; flex: 1; align-items: flex-end; gap: 16px; color: var(--chip-ink); }
.ftag { display: flex; flex-direction: column; align-items: flex-start; transition: transform .4s var(--ease-back); }
.ftag:hover { transform: translateY(-4px); }
.ftag-top { display: flex; height: 12px; }
.ftag-top i { display: block; width: 32px; height: 12px; background: var(--chip-bg); }
.ftag-top b {
  display: block;
  width: 13.33px;
  height: 12px;
  background: var(--chip-bg);
  -webkit-mask: url("../assets/svg/tag-notch.svg") 0 0 / 13.33px 12px no-repeat;
          mask: url("../assets/svg/tag-notch.svg") 0 0 / 13.33px 12px no-repeat;
}
.ftag-body { padding: 8px; background: var(--chip-bg); color: var(--chip-ink); }

.card-media { position: relative; display: block; flex: 1 1 0; min-width: 0; height: 100%; }
.card-img { position: absolute; inset: 0; overflow: hidden; }
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--img-s, 1));
  transition: transform .2s linear;
  will-change: transform;
}
.img-label {
  position: absolute;
  right: 15.09px;
  top: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--chip-bg);
  color: var(--chip-ink);
}
.media-frame { position: absolute; inset: -8px; pointer-events: none; }
.media-frame b { position: absolute; inset: 8px; border: 2px solid var(--frame); }
.media-frame i {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--card);
  border: 2px solid var(--frame);
  transition: transform .5s var(--ease-back), background .3s ease;
}
.media-frame i:nth-of-type(1) { left: 0; top: 0; }
.media-frame i:nth-of-type(2) { right: 0; top: 0; }
.media-frame i:nth-of-type(3) { right: 0; bottom: 0; }
.media-frame i:nth-of-type(4) { left: 0; bottom: 0; }
/* Hover: corner handles stay square, grow a little and fill in */
.card-media:hover .media-frame i { transform: scale(1.25); background: var(--frame); }

/* =========================================================
   CTA
   ========================================================= */
.cta { margin-top: 250px; padding-bottom: 50px; }
.cta-contain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 150px;
  padding: 0 var(--gutter);
}
.cta-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1800px;
}
.cta-img { position: relative; flex: 1 1 0; min-width: 0; height: 364.8px; }

.blob-stage {
  --bs: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 493.317px;
  height: 493.317px;
  transform: translate(-50%, -50%) scale(var(--bs));
}
/* Upright blob (no tilt); scaled 1.3x so it keeps its ~494px footprint */
.blob-r1 { position: relative; flex: none; width: 364.8px; height: 364.8px; }
.blob-r2 { position: absolute; inset: -47.18px; display: flex; align-items: center; justify-content: center; }
.blob-icon { position: relative; flex: none; width: 412.85px; height: 412.85px; overflow: hidden; transform: scale(1.3); }
.blob-wrap {
  position: absolute;
  left: .69px;
  top: .69px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 411.414px;
  height: 411.422px;
}
.blob { flex: none; animation: blob-wobble 9s ease-in-out infinite; }
@keyframes blob-wobble {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.02, .98); }
  50% { transform: scale(.98, 1.02); }
  75% { transform: scale(1.01); }
}
/* Eyes sit upright on the upper-right lobe */
.blob-eyes {
  position: absolute;
  left: 233px;
  top: 115px;
  width: 83.2px;
  height: 63.432px;
  transition: transform .25s ease-out;
}
.blob-eyes i {
  position: absolute;
  top: 0;
  width: 29.805px;
  height: 63.432px;
  border-radius: 40px;
  background: var(--ink);
  rotate: -5deg;
  animation: blink 4.2s ease-in-out infinite;
}
.blob-eyes i:first-child { left: 0; }
.blob-eyes i:last-child { left: 53.4px; }
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.12); }
}
.cta-img:hover .blob { animation-duration: 2.4s; }
/* Hover or tap: the whole blob (eyes included) whirls round five times in one go */
.blob-r2.is-spinning { animation: blob-spin 1.4s cubic-bezier(.45, .05, .25, 1); }
@keyframes blob-spin { from { rotate: 0deg; } to { rotate: 1800deg; } }

.cta-text { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 15.41px; min-width: 0; }
.cta-title {
  width: 600px;
  max-width: 100%;
  margin: 0;
  font-weight: 900;
  font-size: 108.9px;
  line-height: 96px;
  letter-spacing: -3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta-title .line { justify-content: flex-start; }
.cta-desc { max-width: 400px; margin: 0; font-weight: 500; font-size: 14.8px; line-height: 22.4px; }

.cta-card {
  position: relative;
  width: 100%;
  max-width: 1800px;
  height: 810px;
  background: var(--brown);
  border-radius: 32px;
}
.cta-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 32px; }
/* Stripe artwork: natural size, centred on the card (matches the template at any width;
   at the 1240px design width this is the Figma position). */
.cta-stripes {
  position: absolute;
  top: -215px;
  left: calc(50% - 1066.84px);
  width: 2133.68px;
  height: 1351px;
  max-width: none;
  transform: translate3d(0, var(--sy, 0px), 0);
  will-change: transform;
}

.contact-big {
  --cs: 1;
  --hs: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 639.81px;
  height: 128px;
  padding: 24px 16px 8px;
  background: var(--blue);
  box-shadow: inset 0 0 0 3px var(--ink);
  color: var(--ink);
  text-decoration: none;
  transform: translate(-50%, -50%) scale(calc(var(--cs) * var(--hs))) rotate(var(--hr, 0deg));
  transition: transform .5s var(--ease-back), background .3s ease, color .3s ease, box-shadow .3s ease;
}
/* Hover: inverts to black with blue type, inside a white selection frame with corner handles */
.contact-big:hover,
.contact-big:focus-visible { --hs: 1.04; background: var(--ink); box-shadow: inset 0 0 0 4px var(--white); color: var(--blue); }
.cb-handles { position: absolute; inset: -9px; z-index: 1; pointer-events: none; }
.cb-handles i {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--ink);
  transform: scale(0);
  transition: transform .4s var(--ease-back);
}
.cb-handles i:nth-child(1) { left: 0; top: 0; }
.cb-handles i:nth-child(2) { right: 0; top: 0; transition-delay: .05s; }
.cb-handles i:nth-child(3) { right: 0; bottom: 0; transition-delay: .1s; }
.cb-handles i:nth-child(4) { left: 0; bottom: 0; transition-delay: .15s; }
.contact-big:hover .cb-handles i,
.contact-big:focus-visible .cb-handles i { transform: scale(1); }
.contact-big:active { --hs: .97; }
.cb-icon {
  position: relative;
  flex: none;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--ink);
}
.cb-icon::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); }
.cb-pattern { position: absolute; inset: -50%; overflow: hidden; transition: transform .8s var(--ease-back); }
.cb-pattern i { position: absolute; width: 54.39px; height: 54.39px; background: var(--red); transform: rotate(45deg); }
.cb-pattern i:nth-child(1) { left: 11.19px; top: 92.81px; }
.cb-pattern i:nth-child(2) { left: 91.19px; top: 11.19px; }
.cb-pattern i:nth-child(3) { left: 91.19px; top: 92.81px; }
.cb-pattern i:nth-child(4) { left: 11.19px; top: 12.81px; }
.contact-big:hover .cb-pattern { transform: rotate(90deg); }
.cb-arrows { position: absolute; left: calc(50% - 16px); top: 30%; bottom: 30%; width: 32px; overflow: hidden; }
.cb-track { position: absolute; left: -57.35px; top: 0; display: flex; animation: marquee 1.4s linear infinite; }
.contact-big:hover .cb-track { animation-duration: .6s; }
@keyframes marquee { to { transform: translateX(32px); } }
.cb-text {
  font-weight: 900;
  font-size: 86.3px;
  line-height: 96px;
  letter-spacing: -3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.comment {
  position: absolute;
  left: 100px;
  top: -64px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 350px;
  padding: 16px;
  overflow: hidden;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .1);
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y { 50% { transform: translateY(-6px); } }
.js .cta-card .comment { opacity: 0; transform: translate(-40px, 30px); }
.cta-card.is-in .comment { opacity: 1; animation: comment-in .9s var(--ease-out) .35s both, float-y 6s ease-in-out 1.3s infinite; }
@keyframes comment-in {
  from { opacity: 0; transform: translate(-40px, 30px) rotate(-4deg); }
  to { opacity: 1; transform: none; }
}
.comment-label { margin: 0; color: var(--muted); font-size: 15.1px; line-height: 22.4px; }
.comment-line { display: block; height: 1px; background: var(--chip); }
.comment-row { display: flex; align-items: flex-start; gap: 16px; overflow: hidden; }
.comment-avatar { position: relative; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 32px; }
/* 3:2 portrait photo — keep its proportions and frame head + shoulders */
.comment-avatar img { position: absolute; left: -75%; top: -10%; width: 250%; height: auto; }
.comment-body { display: flex; flex: 1 1 0; flex-direction: column; gap: 15.99px; min-width: 0; overflow: hidden; }
.comment-text { display: flex; flex-direction: column; gap: 3.4px; }
.comment-name,
.comment-msg { margin: 0; font-size: 15px; line-height: 22.4px; }
.comment-name { font-size: 15.1px; }
.comment-msg { white-space: nowrap; }

.react {
  position: relative;
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(54, 197, 240, .15);
  box-shadow: inset 0 0 0 2px var(--blue);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background .25s ease, transform .3s var(--ease-back);
}
.react:hover { background: rgba(54, 197, 240, .28); }
.react[aria-pressed="true"] { background: rgba(54, 197, 240, .45); }
.react.bump { animation: bump .45s var(--ease-back); }
.react.bump img { animation: zap .45s var(--ease-back); }
@keyframes bump { 40% { transform: scale(1.15); } }
@keyframes zap { 40% { transform: rotate(-20deg) scale(1.3); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Large laptops */
@media (max-width: 1280px) {
  :root { --gutter: 48px; }
}

/* Polaroids drop into flow once the side gutters get tight */
@media (max-width: 1180px) {
  .polaroids {
    position: static;
    display: flex;
    justify-content: center;
    gap: 40px;
    height: auto;
    margin: -16px 0 -8px;
  }
  .polaroid { position: relative; left: auto; right: auto; top: auto; }
  .card-title { font-size: calc(var(--fs) * .8px); line-height: 64px; }
}

/* Tablets */
@media (max-width: 1100px) {
  .cta-head { flex-direction: column; gap: 88px; }
  .cta-img { flex: none; width: 100%; }
  .cta-text { align-items: center; text-align: center; }
  .cta-title { width: auto; }
  .cta-title .line { justify-content: center; }
  .comment { left: 48px; }
  .card-title { font-size: calc(var(--fs) * .7px); line-height: 56px; }
  .avatar-bubble { left: var(--gutter); top: 3%; }
  .pill-role { left: 0; top: 60%; }
  .pill-loc { left: auto; right: 2%; top: -38%; }
}

@media (max-width: 960px) {
  .about-lines { zoom: .8; }
  .skills { zoom: .85; }
  .nav-item .mono-14 { display: none; }
  .nav-item { gap: 0; }
}

/* Stacked project cards */
@media (max-width: 860px) {
  .project {
    top: var(--header-h);
    height: auto;
    padding: 32px 0 24px;
  }
  .project-tabs { zoom: .75; }
  .project-body { height: auto; }
  .card { flex-direction: column; align-items: stretch; height: auto; gap: 24px; }
  .card-content { flex: none; height: auto; min-height: 270px; padding-top: 16px; }
  .card-tags { flex: none; margin-top: auto; }
  .card-media { flex: none; height: 300px; }
  .card-title { font-size: calc(var(--fs) * .75px); line-height: 56px; white-space: normal; }
}

/* Phones */
@media (max-width: 760px) {
  :root { --gutter: 16px; }

  .chip { display: none; }
  .nav-item { padding: 16px 14px; }

  /* Phone hero: clock, name, availability, copy and button only */
  .hero { height: auto; min-height: 0; padding-bottom: 56px; }
  .hero-name { padding: 12px 0 28px; gap: 18px; }
  .name-box { zoom: .72; }
  .sticker,
  .pill-wrap,
  .avatar-bubble { display: none; }
  .hero-cta { padding-bottom: 0; }

  .about { margin-top: 40px; }
  .about-content { gap: 40px; }
  .about-lines { zoom: .6; }
  .skills { zoom: .62; }
  .polaroids { gap: 12px; }
  .polaroid { zoom: .82; }

  .work { margin-top: 140px; }
  .work-title { font-size: 64px; line-height: 64px; letter-spacing: -2px; }

  .cta { margin-top: 140px; padding-bottom: 50px; }
  .cta-contain { gap: 120px; }
  .cta-img { height: 300px; }
  .blob-stage { --bs: .75; }
  .cta-title { font-size: 72px; line-height: 72px; letter-spacing: -2px; }
  .cta-desc br { display: none; }
  .cta-card { height: 560px; border-radius: 24px; }
  .cta-clip { border-radius: 24px; }
  .contact-big { --cs: .62; }
  .comment { left: 16px; top: -88px; zoom: .88; }
}

@media (max-width: 560px) {
  .header-avatar { display: none; }
  .name-box { zoom: .52; }
  .about-lines { zoom: .44; }
  .skills { zoom: .44; }
  .hero-lines { zoom: .9; }
  .project-tabs { zoom: .55; }
  .card-media { height: 240px; }
  .card-title { font-size: calc(var(--fs) * .6px); line-height: 46px; }
  .blob-stage { --bs: .6; }
  .cta-img { height: 240px; }
  .contact-big { --cs: .5; }
  .cta-card { height: 480px; }
  .comment { zoom: .8; }
}

@media (max-width: 400px) {
  .nav-item { padding: 16px 11px; }
  .btn-outline { padding: 8px 10px; }
  .name-box { zoom: .47; }
  .about-lines { zoom: .4; }
  .skills { zoom: .4; }
  .hero-lines { zoom: .82; }
  .available .mono-16 { font-size: 13px; letter-spacing: -0.4px; }
  .work-title { font-size: 52px; line-height: 54px; }
  .cta-title { font-size: 58px; line-height: 60px; }
  .contact-big { --cs: .45; }
  .polaroid { zoom: .72; }
}

/* Touch devices: no hover-only effects that stick */
@media (hover: none) {
  .polaroid:hover .pol-card { transform: rotate(var(--r)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js [data-reveal=""],
  .js .intro,
  .js .ch,
  .js .line-in,
  .js .site-header,
  .js .tag-note,
  .js .pill,
  .js .avatar-bubble-in,
  .js .about-me,
  .js .polaroid,
  .js .cta-card .comment,
  .js .skills > .skills-row > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .pill { transform: rotate(var(--r)) !important; }
  .js .tag-note { transform: rotate(var(--r)) !important; }
  .js .about-me { transform: rotate(14deg) !important; }
  .js .underline,
  .js .name-border,
  .js .about-curve img { clip-path: none !important; }
  .js .name-handles .h,
  .js .whatsup .sq-handles i { transform: none !important; }
  .card-text { opacity: 1; transform: none; }
}

@media (max-width: 360px) {
  .hero-lines { zoom: .72; }
  .name-box { zoom: .42; }
}

/* =========================================================
   PHONE LAYOUT (matches the template's mobile reference)
   ========================================================= */
@media (max-width: 760px) {
  /* About: the intro wraps naturally instead of fixed, scaled lines */
  .about-lines {
    zoom: 1;
    width: 100%;
    max-width: 100%;
    font-size: clamp(26px, 8.4vw, 36px);
    line-height: 1.2;
    letter-spacing: -1px;
  }
  .about-lines .line,
  .about-lines .line-in { display: inline; height: auto; overflow: visible; transform: none; line-height: inherit; }
  .about-lines .t { font-size: inherit; white-space: normal; }
  .about-lines .inline-img { display: inline-block; height: .85em; margin: 0 .08em; vertical-align: -0.08em; }
  .about-lines .inline-img.photo { width: .72em; }
  .about-lines .inline-img.shape { width: .6em; }

  /* Polaroids: larger, slightly overlapping */
  .polaroids { gap: 0; margin: 0; }
  .polaroid { zoom: .9; }
  .pol-2 { margin-left: -28px; }

  /* Skills: one tag + icon per row */
  .skills {
    zoom: 1;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 8px 6px;
    width: auto;
    max-width: 100%;
    height: auto;
  }
  .skills-row { display: contents; }
  .skill { height: 52px; padding: 6px 14px; justify-self: end; }
  .skill .t { font-size: 26px !important; letter-spacing: -0.8px; }
  .skill-ico { zoom: .8125; justify-self: start; }

  /* Project cards: full-strength text, readable tabs, natural line wraps */
  .card-text { opacity: 1; transform: none; }
  .card-desc br { display: none; }
  .project-tabs { zoom: .75; }

  /* Let's Talk: title and copy first, blob below */
  .cta-head { flex-direction: column-reverse; gap: 32px; }
  .cta-text { align-items: flex-start; text-align: left; }
  .cta-title .line { justify-content: flex-start; }
  .cta-title { font-size: clamp(48px, 15vw, 72px); line-height: 1; }
  .cta-img { height: 280px; }

  /* Comment sits inside the contact card */
  .comment { top: 24px; left: 16px; right: 16px; width: auto; zoom: 1; }
  .cta-card { height: 600px; }
  .contact-big { top: 66%; }
}

@media (max-width: 400px) {
  .about-lines { zoom: 1; }
  .skills { zoom: 1; }
  .skill .t { font-size: 22px !important; }
  .skill { height: 46px; }
  .skill-ico { zoom: .72; }
  .comment-msg { white-space: normal; }
  .comment-msg br { display: none; }
}
/* The narrowest phones: shrink the overlapping polaroids so neither gets cut at the edge */
@media (max-width: 350px) {
  .polaroid { zoom: .82; }
}

/* =========================================================
   CUSTOM CURSOR: a dot with a "You" tag (mouse and trackpad only)
   ========================================================= */
.has-cursor,
.has-cursor * { cursor: none !important; }
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  /* White + difference: black on white, light on dark, inverted on colour, so it never disappears */
  mix-blend-mode: difference;
  transition: opacity .2s ease;
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }
.cursor-dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .25s var(--ease-back);
}
.cursor-label {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 3px 8px 2px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .25s var(--ease-back);
}
/* Over something clickable the dot grows a little */
.cursor.is-link .cursor-dot { transform: scale(1.5); }
.cursor.is-link .cursor-label { transform: translate(3px, 3px); }
.cursor.is-down .cursor-dot { transform: scale(.8); }
/* The "See" bubble on project cards takes over from the cursor there */
.cursor.is-hidden { opacity: 0; }

/* Text for screen readers and search engines only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   LOADER: "Hi there...." typed into a chat bubble on the first page of a visit
   ========================================================= */
.loader { display: none; }
.has-loader .loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  background-color: var(--white);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  /* Safety net: never cover the page for long, even if the script fails */
  animation: loader-failsafe .01s linear 5s forwards;
}
.loader-bubble {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--blue);
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -1px;
  animation: loader-pop .5s var(--ease-back) backwards;
}
.loader-text { white-space: pre; }
.loader-caret {
  flex: none;
  width: 2px;
  height: 40px;
  margin-left: 2px;
  background: var(--ink);
  animation: caret-blink 1s steps(1) infinite;
}
.loader.is-done { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.loader.is-done .loader-bubble { transform: translateY(-16px) scale(.92); transition: transform .5s var(--ease-out); }
@keyframes loader-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
@media (max-width: 600px) {
  .loader-bubble { padding: 10px 14px; border-radius: 12px; font-size: 30px; line-height: 40px; }
  .loader-caret { height: 30px; }
}

/* =========================================================
   FOOTER: sticker strip on the grid, then Works / credit / Back to top
   ========================================================= */
.site-footer { margin-top: 160px; overflow: hidden; }
.footer-stickers { padding-bottom: 96px; }
/* Transparent artwork, so the page grid shows through */
.footer-stickers img { width: 100%; max-width: 1440px; height: auto; margin: 0 auto; }

.footer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.75fr)) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.footer-cell {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  margin: 0;
  padding: 0 16px;
  color: var(--ink);
  text-decoration: none;
}
.footer-cell + .footer-cell { border-left: 1px solid var(--line); }
.footer-top { border: 0; background: none; font: inherit; cursor: pointer; }

/* Links fill with blue from the bottom, like the header nav */
.footer-link { overflow: hidden; }
.footer-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease-out);
}
.footer-link:hover::before,
.footer-link:focus-visible::before { transform: scaleY(1); }
.footer-arrow { flex: none; transition: transform .4s var(--ease-back); }
.footer-top:hover .footer-arrow,
.footer-top:focus-visible .footer-arrow { transform: translateY(-3px); }

.footer-heart {
  flex: none;
  color: var(--red);
  transform-origin: 50% 55%;
  animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 45%, 100% { transform: scale(1); }
  12% { transform: scale(1.25); }
  24% { transform: scale(.95); }
  34% { transform: scale(1.15); }
}
@keyframes sticker-pan { to { transform: translateX(-50%); } }

/* Wider than the artwork: centre it and fade out the stickers cut off at its edges */
@media (min-width: 1441px) {
  .footer-stickers img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}
/* Tablets: drop the empty side cells */
@media (max-width: 1100px) {
  .footer-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
  .footer-spacer { display: none; }
  .footer-cell.footer-works { border-left: 0; }
}
/* Phones: Works and Back to top side by side, the credit underneath */
@media (max-width: 760px) {
  .site-footer { margin-top: 100px; }
  .footer-stickers { padding-bottom: 48px; }
  /* Too small to read at full width: show it twice as big and pan slowly from end to end */
  .footer-stickers img { width: 200%; max-width: none; margin: 0; animation: sticker-pan 24s ease-in-out infinite alternate; }
  .footer-bar { grid-template-columns: 1fr 1fr; }
  .footer-cell { min-height: 56px; }
  .footer-cell.footer-credit { grid-column: 1 / -1; grid-row: 2; border-left: 0; border-top: 1px solid var(--line); }
}