/* =========================================================
   Yuvraj Gupta — Portfolio
   Breakpoints: base = mobile (<768) · md ≥768 · lg ≥1080 · xl ≥1200
   Base text: 14px mobile / 16px web. Radius: 8px, max 10px.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../Assets/fonts/plus-jakarta-sans/plus-jakarta-sans-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Soft";
  src: url("../Assets/fonts/aeonik-soft-trial/aeonik-soft-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Soft";
  src: url("../Assets/fonts/aeonik-soft-trial/aeonik-soft-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Hind Mysuru";
  src: url("../Assets/fonts/hind-mysuru/hind-mysuru-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hind Mysuru";
  src: url("../Assets/fonts/hind-mysuru/hind-mysuru-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Hind Mysuru";
  src: url("../Assets/fonts/hind-mysuru/hind-mysuru-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("../Assets/fonts/pp-editorial-new/pp-editorial-new-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Stardos Stencil";
  src: url("../Assets/fonts/stardos-stencil/stardos-stencil-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #F2F2F2;
  --ink: #222222;
  --ink-2: #555555;
  --ink-3: #999999;
  --ink-4: #666666;
  --line: #D6D6D6;
  --pink: #F05C6D;
  --green: #108F30;
  --dark: #222222;
  --blue-soft: #D3E6FB;
  --blue-ink: #1F4A85;
  --ruler-blue: #397FE3;
  --ruler-ink: #909090;   /* ruler ticks + numbers */
  --ruler-band: #FFEFF4;  /* the content column on the top ruler */

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1200px;
  --gutter: clamp(28px, 8.2vw, 32px);

  /* fluid type: 28px @390 → 48px @1200 (hero), 28px → 40px (section titles);
     below 390px both shrink with the screen so nothing wraps awkwardly */
  --h1: clamp(22px, min(7.18vw, calc(18.4px + 2.47vw)), 48px);
  --h2: clamp(22px, min(7.18vw, calc(22.3px + 1.47vw)), 40px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
/* Whole-pixel gutter, so the content's left line always lands on a whole number
   (the mobile top ruler starts from that line) */
@supports (width: round(10.5px, 1px)) {
  :root { --gutter: clamp(28px, round(8.2vw, 1px), 32px); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px; /* 24px pinned ruler + breathing room */
  /* No native page scrollbar: it would eat ~15px on Windows and throw the rulers off
     (1440 must read 120 → 1320). Wheel, touch and keys still scroll; the side ruler shows position. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-width: 300px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2px solid var(--ruler-blue); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--dark); color: #F2F2F2; font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

.show-sm { display: initial; }
.hide-sm { display: none; }

.container {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
/* Mobile: the left gutter clears the 24px side ruler; the right side has no ruler,
   so it only needs 16px — content gets the extra width (the top ruler ends 16px in too) */
@media (max-width: 767.98px) {
  .container { width: auto; margin-left: var(--gutter); margin-right: 16px; }
}

@media (min-width: 768px) {
  body { font-size: 16px; line-height: 26px; }
  .show-sm { display: none; }
  .hide-sm { display: initial; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 47px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-sm { height: 40px; }
.btn-dark { background: var(--dark); color: #F2F2F2; }
.btn-ghost { background: rgba(0, 0, 0, .05); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); height: 39px; }
.btn-outline-light { border: 1px solid #AAAAAA; color: #F2F2F2; }
.btn-outline { border: 1px solid #999999; color: #999999; cursor: default; }
.btn-outline:active { transform: none; }

@media (hover: hover) {
  .btn-dark:hover { background: #000; }
  .btn-ghost:hover { background: rgba(0, 0, 0, .09); }
  .btn-light:hover { background: #E9E9E9; }
  .btn-outline-light:hover { border-color: #F2F2F2; background: rgba(255, 255, 255, .06); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 75px;
}

/* Figma-style rulers, pinned to the screen. Top-left corner is (0,0).
   Both measure the viewport, so their numbers stay put while scrolling. */
.ruler {
  pointer-events: none;
  color: var(--ruler-ink);
  font-size: 9px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ruler { position: fixed; z-index: 40; background: #fff; }
.ruler-x { z-index: 42; top: 0; left: 0; right: 0; height: 24px; box-shadow: inset 0 -.7px 0 var(--line); }
.ruler-y { top: 0; left: 0; bottom: 0; width: 24px; box-shadow: inset -.7px 0 0 var(--line); }
.ruler-corner {
  position: fixed; z-index: 43; top: 0; left: 0;
  width: 24px; height: 24px;
  background: #fff;
  box-shadow: inset -.7px -.7px 0 var(--line);
}
/* Selection band = the content column (120 → 1320 at 1440 on web, gutter → 16px in on mobile) */
.ruler-band { position: absolute; top: 0; bottom: .7px; background: var(--ruler-band); }
/* --hair = one whole screen pixel (set by main.js), and every tick sits on the pixel grid, so
   all ticks, both ends included, draw equally sharp and dark on any display scaling */
.rx { position: absolute; bottom: 0; width: var(--hair, 1px); height: 7px; background: var(--ruler-ink); }
.rx b { position: absolute; bottom: 9px; left: calc(var(--hair, 1px) / 2); font-weight: inherit; transform: translateX(-50%); white-space: nowrap; }
/* ends: dark like the design, labels kept inside the ruler */
.rx-first, .rx-last { background: var(--ink); }
.rx-first b, .rx-last b { color: var(--ink); }
.rx-first b { transform: translateX(3px); }
.rx-last b { transform: translateX(calc(-100% - 3px)); }
/* Mobile: the first number sits centred on its line (x = 24, the same line the side
   ruler's edge continues down), like the marks on a real scale. The top ruler is lifted
   over the corner so the corner's edge doesn't cut through the number. */
@media (max-width: 767.98px) {
  .ruler-corner { z-index: 41; }
  .rx-first b { transform: translateX(-50%); }
}
/* content column edges: pink, like the band between them */
.rx-edge { background: var(--pink); }
.rx-edge b { color: var(--pink); font-weight: 600; }
/* numbers between the band's edges: a touch darker than the rest, still quiet */
.rx-in b { color: #7A7A7A; }
.ry { position: absolute; left: 17px; width: 7px; height: var(--hair, 1px); background: var(--ruler-ink); }
.ry b {
  position: absolute; right: 9px; top: 0;
  font-weight: inherit;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}
/* bottom end: tick on the bottom edge, number sits just above it */
.ry-last { background: var(--ink); }
.ry-last b { color: var(--ink); transform: translateY(calc(-100% - 3px)) rotate(180deg); }

/* Artwork stage: laid out in design pixels, scaled as one piece by --ms / --s */
.hero-art {
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(50% - 195px * var(--ms, 1));
  width: 390px;
  height: 330px;
  transform: scale(var(--ms, 1));
  transform-origin: 0 0;
  pointer-events: none;
}
.art-pad, .art-case, .art-bud, .picker, .fonts { position: absolute; }
/* the parallax pieces move on every scroll frame: their own layers let the GPU slide them
   without repainting the cards and shadows each time */
.hero-art [data-parallax] { will-change: translate; }
.art-pad {
  max-width: none;
  left: 29.8px; top: -119.5px;
  width: 437px;
  transform: rotate(8deg);
  transform-origin: 25px 0;
}
/* Earbuds (mobile stage, 390px design): each PNG covers its Figma shadow area */
.art-case, .art-bud { max-width: none; height: auto; }
.art-case { left: 33.8px; top: 57.4px; width: 82px; }
.art-bud--a { left: 31.9px; top: 73.3px; width: 18.7px; }
.art-bud--b { left: 54.1px; top: 104.4px; width: 22px; }

/* Colour picker card (190 × 276 design px) — live: recolours the pink hero words.
   JS keeps --pk-* in sync; the defaults below are the design pink #F05C6D. */
.picker {
  --pk-h: .981;   /* hue 0–1 */
  --pk-s: .617;   /* saturation 0–1 */
  --pk-v: .941;   /* brightness 0–1 */
  --pk-a: 1;      /* opacity 0–1 */
  --pk-hue: hsl(353 100% 50%);
  --pk-rgb: rgb(240 92 109);
  --pk-color: #F05C6D;
  left: 146.7px; top: 97.8px;
  width: 190px; height: 276px;
  background: #fff;
  border: .8px solid #E0E0E0;
  border-radius: 6px;
  box-shadow: 0 0 25px rgba(0, 0, 0, .12);
  transform: rotate(7deg) scale(.586);
  transform-origin: 0 0;
  pointer-events: auto;
  font-family: var(--font);
}
.picker > * { position: absolute; }
.pk-mark { position: absolute; width: 0; height: 0; pointer-events: none; }
.picker-sv {
  left: 8px; top: 8px; width: 174px; height: 174px;
  border-radius: 4px;
  background:
    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #fff, var(--pk-hue));
  cursor: crosshair;
  touch-action: none;
}
.picker-knob {
  position: absolute;
  left: calc(var(--pk-s) * 174px - 5.5px);
  top: calc((1 - var(--pk-v)) * 174px - 5.5px);
  width: 11px; height: 11px;
  border: 1px solid #fff; border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.picker-swatch {
  left: 8px; top: 190px; width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--pk-color);
  transition: transform .15s var(--ease-out);
}
.picker-swatch:active { transform: scale(.94); }
.picker-hue, .picker-alpha {
  left: 43px; width: 138px; height: 10px;
  border-radius: 5px;
  cursor: pointer;
  touch-action: none;
}
/* bigger hit area than the thin 10px bar */
.picker-hue::before, .picker-alpha::before { content: ""; position: absolute; inset: -5px -4px; }
.picker-hue {
  top: 190px;
  background: linear-gradient(90deg, #F00, #FF0 16.67%, #0F0 33.33%, #0FF 50%, #00F 66.67%, #F0F 83.33%, #F00);
}
.picker-alpha {
  top: 208px;
  background:
    linear-gradient(90deg, transparent, var(--pk-rgb)),
    repeating-conic-gradient(#E8E8E8 0 25%, #fff 0 50%) 0 0 / 5px 5px;
}
.picker-hue i, .picker-alpha i {
  position: absolute; top: -.5px;
  width: 11px; height: 11px;
  border: 1px solid #fff; border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.picker-hue i { left: calc(var(--pk-h) * 138px - 5.5px); background: var(--pk-hue); }
.picker-alpha i { left: calc(var(--pk-a) * 138px - 5.5px); background: var(--pk-color); }
.picker-label { top: 227px; font-size: 7.5px; line-height: 8px; font-weight: 500; color: #000; letter-spacing: .02em; }
.picker-label--hex { left: 9px; }
.picker-label--r { left: 77px; }
.picker-label--g { left: 112px; }
.picker-label--b { left: 147px; }
.picker-field--hex, .picker-rgb { top: 240px; height: 28px; }
.picker-field--hex { left: 8px; width: 59px; border: .8px solid #EEEEEE; border-radius: 4px; }
.picker-rgb {
  left: 76px; width: 105px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: .8px solid #EEEEEE; border-radius: 4px;
}
.picker-rgb .picker-field { position: relative; }
.picker-rgb .picker-field + .picker-field { border-left: .8px solid #EEEEEE; }
.picker-field { overflow: hidden; }
.picker-field:focus-within { box-shadow: inset 0 0 0 1px var(--ruler-blue); }
/* 16px inputs scaled to 10px: looks like the design, and iOS won't zoom on focus */
.picker-field input {
  position: absolute; left: 0; top: 0;
  width: 160%; height: 160%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #212121;
  font: 500 16px/1 var(--font);
  text-align: center;
  text-transform: uppercase;
  transform: scale(.625);
  transform-origin: 0 0;
  outline: none;
}

/* Fonts card (210 × 310 design px) — interactive */
.fonts {
  left: 267.1px; top: 78.2px;
  width: 210px; height: 310px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
  transform: rotate(7deg) scale(.586);
  transform-origin: 0 0;
  pointer-events: auto;
  color: var(--ink);
  font-family: var(--font);
}
.fonts-head {
  position: absolute; left: 12px; right: 18px; top: 16px; height: 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
}
.fonts-search {
  position: absolute; left: 12px; top: 64px; width: 186px; height: 28px;
  display: flex; align-items: center; gap: 8px;
  padding-left: 4px;
  border-radius: 8px;
  background: #F6F6F6;
  font-size: 11px; line-height: 1; color: var(--ink-3);
}
/* line-height 1 so the "Aa" sits centred in its 20px box, on the same line as "Select fonts"
   (it used to inherit the 26px body line and drop to the bottom edge) */
.fonts-aa {
  display: grid; place-items: center;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: #fff;
  font-size: 9px; line-height: 1; font-weight: 600; color: var(--ink);
}
.fonts-list {
  position: absolute; left: 0; right: 0; top: 107px;
  padding-top: 16px;
  border-top: 1px solid #E6E6E6;
}
.font-opt {
  position: relative;
  display: block;
  width: 100%; height: 34px;
  padding-left: 46px;
  text-align: left;
  font-size: 14px;
  line-height: 34px;
  white-space: nowrap;
  transition: background-color .15s;
}
.font-opt[aria-pressed="true"] { background: #F5F5F5; }
.font-opt[aria-pressed="true"]::before {
  content: "";
  position: absolute; left: 27px; top: 13px;
  width: 12px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.2 8 11 1' fill='none' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
  .font-opt:hover { background: #F8F8F8; }
  .font-opt[aria-pressed="true"]:hover { background: #F5F5F5; }
}

/* Copy block */
.hero-inner { position: relative; z-index: 1; }
.hero-copy { padding-top: calc(339px * var(--ms, 1)); }

.hero-title {
  max-width: 14.6em;
  font-family: var(--hero-font, var(--font));
  font-size: var(--h1);
  line-height: 1.48;
  font-weight: 600;
  letter-spacing: -.01em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
  font-synthesis: none;
}
.hero-title .w { display: inline-block; }
/* --accent is set by the colour picker; defaults to the design pink */
.hero-title .accent { color: var(--accent, var(--pink)); }
/* PNG export carries its own white outline + shadow on the page grey (47 × 47 in the design) */
.hero-plane {
  height: .98em; width: auto;
  vertical-align: -.19em;
}
.hero-char {
  height: 1.21em; width: auto;
  vertical-align: -.25em;
  margin-top: -.2em;
}
.hero-sub { margin-top: 12px; color: var(--ink-2); }

/* Hindi hero (picked from the Fonts card): Hind woff2 for every line, no tracking so
   the Devanagari headline bar (shirorekha) stays joined */
.hero-copy:lang(hi) .hero-title { letter-spacing: 0; }
.hero-copy:lang(hi) .hero-sub,
.hero-copy:lang(hi) .btn { font-family: "Hind Mysuru", var(--font); }
/* Hind sits ~3.5px high in a 14px line (tall matras, ascent 14 / descent 10):
   7px of top padding moves the label back to the optical centre. Medium, not SemiBold,
   so the Devanagari doesn't look heavier than the English label. */
.hero-copy:lang(hi) .btn { font-weight: 500; padding-top: 7px; }
.hero-cta { display: grid; gap: 7px; margin-top: 20px; }

@media (min-width: 768px) {
  .hero { padding-bottom: 96px; }
  .hero-art {
    left: calc((100% - min(var(--max), 100% - 2 * var(--gutter))) / 2);
    width: 1200px;
    height: 720px;
    transform: scale(var(--s, 1));
  }
  .art-pad { left: -55px; top: -474px; width: 1336px; transform: none; }
  /* web stage: design x − 120 (container left), same y */
  .art-case { left: 36.25px; top: 65.5px; width: 240px; }
  .art-bud--a { left: 18.63px; top: 142px; width: 54.69px; }
  .art-bud--b { left: 141px; top: 193.75px; width: 64.47px; }
  .picker { left: 780.6px; top: 193px; transform: rotate(7deg); }
  .fonts { left: 991px; top: 155px; transform: rotate(7deg); }

  .hero-copy { padding-top: calc(490px * var(--s, 1)); }
  .hero-char { height: 1.33em; }
  .hero-sub { margin-top: 16px; }
  .hero-cta { display: flex; gap: 4px; }
}
@media (min-width: 1080px) {
  .hero { padding-bottom: 128px; }
  .hero-copy { padding-top: 270px; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  border-top: 1px solid var(--line);
  padding-block: 40px;
}
.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .2em;
  margin-bottom: 32px;
  font-size: var(--h2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
}
.title-icon { flex: none; width: auto; height: 1.2em; }
.journey .section-title { margin-bottom: 24px; }

@media (min-width: 768px) {
  .section-title, .journey .section-title { margin-bottom: 42px; }
}

/* =========================================================
   JOURNEY
   ========================================================= */
.timeline { display: grid; }

.job {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 16px;
}
.job::after {
  content: "";
  position: absolute;
  left: 15.5px; top: 32px; bottom: 0;
  width: 1px;
  background: var(--line);
}
.job:last-child { padding-bottom: 0; }
.job:last-child::after { content: none; }

.job-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: start;
  width: 100%;
  text-align: left;
}
.job-logo {
  width: 32px; height: 32px;
  border-radius: 4.5px;
  object-fit: cover;
}
.job-logo--add svg { width: 100%; height: 100%; }
.job-co { display: block; font-weight: 500; color: var(--ink); }
.job-role { display: block; color: var(--ink-2); }
.avail { color: var(--green); }
.job-chev { margin-top: 8px; transition: opacity .2s, transform .3s var(--ease-out); }
.job.is-open .job-chev { opacity: 0; transform: rotate(180deg); }

.job-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s var(--ease-out), visibility .45s;
}
.job.is-open .job-body { grid-template-rows: 1fr; visibility: visible; }
.job-body-in {
  min-height: 0;
  overflow: hidden;
  padding-left: 56px;
  color: var(--ink-2);
}
.job-body-in > p { padding-top: 8px; }
.stars { display: grid; gap: 8px; margin-top: 8px; }
.stars li { position: relative; padding-left: 20px; }
.stars li::before {
  content: "";
  position: absolute; left: 0; top: 5px;
  width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .35v11.3M1.5 3.4l9 5.2M1.5 8.6l9-5.2' fill='none' stroke='%23F05C6D' stroke-width='1.67' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.job-date {
  padding-left: 56px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.job--you .job-cta { justify-self: start; margin: 8px 0 0 56px; height: 39px; }

@media (hover: hover) {
  button.job-head:hover .job-co { color: #000; }
}

@media (min-width: 768px) {
  .job {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    padding-bottom: 32px;
    transition: padding-bottom .45s var(--ease-out);
  }
  .job.is-open { padding-bottom: 16px; }
  .job::after { left: 31.5px; top: 64px; }
  .job-head { grid-column: 1; grid-template-columns: 64px minmax(0, 1fr); }
  .job-logo { width: 64px; height: 64px; border-radius: 8px; }
  .job-chev { display: none; }
  .job-body { grid-column: 1; }
  .job-body-in { padding-left: 88px; }
  .job-body-in > p { padding-top: 4px; }
  .stars li::before { top: 7px; }
  .job-date {
    grid-column: 2; grid-row: 1;
    align-self: start;
    padding: 4px 0 0;
    margin: 0;
    line-height: 18px;
  }
  .job--you { align-items: center; }
  .job--you .job-cta { grid-column: 2; grid-row: 1; align-self: center; margin: 0; height: 47px; }
}

/* =========================================================
   WORK
   ========================================================= */
.work { display: grid; gap: 24px; }
.work-row { display: grid; gap: 24px; }
.work-row--bottom { gap: 16px; }

/* NOOK */
.nook {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-radius: 8px;
  background: var(--dark);
  color: #F2F2F2;
}
.nook-copy { display: contents; }
.nook-id { display: flex; align-items: flex-start; gap: 8px; }
.nook-icon { flex: none; width: 64px; height: 64px; }
.nook h3 { font-size: inherit; line-height: 24px; font-weight: 600; margin-top: 4px; }
.nook-sub { font-size: 14px; line-height: 20px; color: #AAAAAA; }
.nook-shot {
  order: 1;
  width: 100%;
  aspect-ratio: 318 / 274;
  margin-top: 16px;
  object-fit: cover;
  object-position: 50% 100%;
}
.nook-actions { order: 2; display: grid; gap: 8px; margin-top: 16px; }
.nook-actions .btn { width: 100%; }

/* Feature points */
.points { display: grid; gap: 24px; padding-inline: 16px; }
.point-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--blue-soft);
}
.point p { color: var(--ink-2); }
.point b { color: var(--ink); font-weight: 600; }
.point .point-lead { color: var(--ink); font-weight: 500; }

/* Project cards */
.proj {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
.proj h3 { font-size: inherit; line-height: 22px; font-weight: 500; }
.proj-sub { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.proj-shot {
  width: 100%;
  aspect-ratio: 310 / 287;
  margin-top: 30px;
  object-fit: cover;
  object-position: 50% 0;
}
.proj--zef .proj-shot {
  width: 130.6%;
  max-width: none;
  aspect-ratio: 405 / 288;
  border-radius: 8px 0 0 0;
  object-position: 0 0;
}
.proj-btn { width: 100%; margin-top: 24px; }

@media (min-width: 768px) {
  .nook { display: block; height: 360px; padding: 35px 16px 16px; }
  .nook-copy {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: space-between;
    width: 195px; height: 100%;
  }
  .nook h3 { margin-top: 0; }
  .nook-sub { line-height: 22px; }
  .nook-actions { gap: 13px; margin-top: 0; }
  .nook-shot {
    position: absolute; top: 0; right: 0;
    width: auto; height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding-inline: 0; }

  .proj { display: block; height: 360px; padding: 32px 16px 16px; }
  .proj-copy { position: relative; z-index: 1; max-width: 183px; }
  .proj h3 { line-height: 24px; }
  .proj-sub { line-height: 24px; }
  .proj--art .proj-shot {
    position: absolute; top: 0; right: 0;
    width: auto; height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-fit: contain;
  }
  .proj--zef .proj-copy { max-width: 202px; }
  .proj--zef .proj-shot {
    position: absolute; top: 102px; left: calc(100% - 370px);
    width: 405px; height: auto;
    margin: 0;
  }
  .proj-btn { position: absolute; left: 16px; bottom: 16px; width: 183px; margin: 0; }
  .proj--zef .proj-btn { width: 182px; }
}

@media (min-width: 1200px) {
  .work { gap: 42px; }
  .work-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-row--top { gap: 0; }
  .work-row--bottom { gap: 24px; }
  .points { padding: 20px 40px 20px 36px; align-content: start; }
  .proj-btn { width: min(183px, calc(100% - 405px)); }
  .proj--zef .proj-btn { width: min(182px, calc(100% - 402px)); }
}

/* =========================================================
   ABOUT
   ========================================================= */
.bio { display: none; }
.bio b { color: var(--ink); font-weight: 600; }

.about-grid { display: grid; gap: 16px; }

.about-photo {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #EF5367;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.about-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 359px;
  padding: 16px;
  border-radius: 8px;
  background: var(--dark);
  color: #F2F2F2;
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.fact { min-width: 0; }
.fact--wide { grid-column: 1 / -1; }
.facts dt, .toolkit-label { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.facts dd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 6px;
  line-height: 22px;
}
.facts dd a { min-width: 0; overflow-wrap: anywhere; }
.copy {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin: -5px -5px -5px -3px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .45);
  transition: color .2s, background-color .2s;
}
.copy.is-copied { color: #4ADE80; }
@media (hover: hover) {
  .facts dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .copy:hover { color: #fff; background: rgba(255, 255, 255, .08); }
}

/* Toolkit marquee */
.marquee {
  margin-top: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.marquee-track { display: flex; gap: 8px; width: max-content; }
.tool {
  flex: none;
  width: 44px; height: 44px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
}
.tool img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 28s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
}
@keyframes marquee { to { transform: translateX(calc(-50% - 4px)); } }

/* Side notes */
.about-side {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #EAEAEA;
}
.note { padding: 16px; border-radius: 8px; background: #fff; }
.note h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: inherit; line-height: 24px; font-weight: 600;
}
.note h3 img { flex: none; width: 24px; height: 24px; }
.note p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--ink-4); }

@media (min-width: 768px) {
  .bio { display: block; margin: -1px 0 28px; color: var(--ink-2); }
  .about-grid { grid-template-columns: minmax(0, 300fr) minmax(0, 469fr); }
  .about-photo { aspect-ratio: auto; min-height: 360px; }
  .about-card { min-height: 360px; }
  .about-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; border: 0; }
}
@media (min-width: 1080px) {
  .about-grid {
    grid-template-columns: minmax(0, 300fr) minmax(0, 469fr) minmax(0, 399fr);
    grid-auto-rows: 360px;
  }
  .about-photo, .about-card { min-height: 0; }
  .about-side { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   BOOKING — Cal.com inline embed (book-with-yuvi/15min)
   ========================================================= */
/* White field behind the calendar */
.cal-field {
  container-type: inline-size;
  padding: 4px; /* mobile: let the calendar use almost the full width; web uses 16px below */
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
@media (min-width: 768px) {
  .cal-field { padding: 16px; border: 0; }
}
.cal-embed {
  --cal-crop: 0px; /* set in the web rule below */
  position: relative;
  width: 100%;
  min-height: 560px; /* holds the space while Cal loads so the page doesn't jump */
  overflow: hidden;  /* no scrollbars, and it clips the branding strip */
  border-radius: 8px;
}
.cal-embed.is-ready { min-height: 0; }
.cal-embed iframe {
  display: block;
  width: 100% !important;
  border: 0;
  overflow: hidden;
  /* the embed grows to fit its content; pulling it up by --cal-crop hides the
     "Cal.com" line under the calendar without touching the booking UI */
  margin-bottom: calc(-1 * var(--cal-crop));
}
.cal-embed:not(.is-ready)::before {
  content: "Loading calendar…";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink-3);
  font-size: 14px;
}
/* Web only. Once the embed is wider than 768px Cal shows its desktop booker with a "Cal.com"
   line in an ~82px strip under it (measured: 768px = mobile layout, 776px+ = desktop; the
   mobile layout has no such line). There we trim 76px off the bottom, and the cut edge gets
   a skiper41-style progressive blur: one backdrop blur, tinted from clear at the top to pure
   white at the bottom, and masked so it fades in over its top half. The container is the
   white field, so this follows the embed's own width. */
.cal-blur { display: none; }
@container (min-width: 769px) {
  .cal-embed { --cal-crop: 76px; }
  .cal-embed.is-ready .cal-blur { display: block; }
}
.cal-blur {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent);
  mask-image: linear-gradient(to top, #000 50%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cal-fallback { padding: 24px; }
.cal-fallback a { text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-grid { display: grid; gap: 10px; }

.crowd {
  position: relative;
  height: 360px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(157deg, #E33961 0%, #EF5883 20%, #F7B0C3 50%, #FBD3DE 70%, #FCD5DF 90%, #FFE2ED 100%);
}
/* fades in on its first frame instead of popping onto the pink card */
.crowd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease-out); }
.crowd-canvas.is-live { opacity: 1; }
/* "Search ends here" as a little frosted search bar: the crowd is the search, the hero
   under the spotlight is the result. Solid enough to read over the pink and the light beam. */
.crowd-title {
  position: absolute; z-index: 1; top: 16px; left: 50%;
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 11px 0 9px;
  border: .5px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: var(--ink);
  font-size: 12px; line-height: 1; font-weight: 600;
  white-space: nowrap;
}
.crowd-title svg { flex: none; width: 13px; height: 13px; color: var(--pink); }
.crowd-caret { width: 1.5px; height: 13px; margin-left: -3px; border-radius: 1px; background: var(--pink); }
@media (prefers-reduced-motion: no-preference) {
  .crowd-caret { animation: caret-blink 1.1s steps(1) infinite; }
}
@keyframes caret-blink { 50% { opacity: 0; } }

.navcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 360px;
  padding: 16px 16px 20px;
  border-radius: 8px;
  background: var(--dark);
  color: #F2F2F2;
}
/* Grid + diamonds pattern from Assets/footer/grid-pattern.svg (342 × 208).
   Stretched to the card width: 1:1 on the 342px mobile card, ×2.585 on the 884px web card
   (≈89px cells, ring diamond lands at ~797 × 177 like the design). */
.navcard::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("../Assets/footer/grid-pattern.svg") left top / 100% auto no-repeat;
}
.navcard h2 { font-size: var(--h2); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.navcard ul { display: grid; gap: 16px; margin-top: 16px; padding-left: 21px; }
.navcard li { position: relative; line-height: 24px; }
.navcard li::before {
  content: "";
  position: absolute; left: -12px; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
}
.navcard a {
  color: var(--line);
  text-decoration: underline;
  text-decoration-thickness: .64px;
  text-underline-offset: 4px;
  transition: color .2s;
}
/* starts where the bullet dots start (list indent 21px − dot offset 12px; 24 − 12 on web) */
.copyright { margin-top: auto; padding-left: 9px; color: var(--line); font-size: 12px; line-height: 18px; }

@media (hover: hover) {
  .navcard a:hover { color: #fff; }
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: minmax(0, 300fr) minmax(0, 884fr); gap: 16px; }
  .navcard ul { padding-left: 24px; }
  .copyright { padding-left: 12px; }
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed;
  left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 50;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--dark);
  color: #F2F2F2;
  font-size: 14px; line-height: 20px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .25s, transform .35s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   MOTION
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* fill-mode "backwards": hidden during the delay, then no lingering layers once done */
  html.js .hero-title .w {
    animation: word-in .8s var(--ease-out) backwards;
    animation-delay: calc(var(--i) * 45ms + 120ms);
  }
  html.js .art-pad { animation: float-in 1s var(--ease-out) backwards; }
  html.js .art-case { animation: float-in 1s var(--ease-out) .15s backwards; }
  html.js .art-bud--a { animation: float-in 1s var(--ease-out) .22s backwards; }
  html.js .art-bud--b { animation: float-in 1s var(--ease-out) .28s backwards; }
  html.js .picker { animation: float-in 1s var(--ease-out) .3s backwards; }
  html.js .fonts { animation: float-in 1s var(--ease-out) .42s backwards; }
  html.js .hero-sub { animation: fade-up .7s var(--ease-out) .75s backwards; }
  html.js .hero-cta { animation: fade-up .7s var(--ease-out) .85s backwards; }

  html.js-ready .reveal:not(.is-in) { opacity: 0; translate: 0 16px; }
  html.js-ready .reveal { transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@keyframes word-in { from { opacity: 0; translate: 0 .4em; filter: blur(8px); } }
@keyframes float-in { from { opacity: 0; translate: 0 28px; } }
@keyframes fade-up { from { opacity: 0; translate: 0 12px; } }