/* ---- Custom overrides (not from Webflow export) ---- */

/* Animated mesh-gradient hero: each hue is its own blurred blob that drifts,
   scales and rotates on its own timing, so the colors flow like a wave.
   A grain layer sits on top for texture. */
.hero-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--colors--stone); /* matches the page background so the hero blends in */
  /* fade the whole mesh into the page along an eased (smoothstep) curve, so
     there's no visible edge where the fade stops. A plain two-stop linear
     fade reads as a hard line at its end. Fading to transparent (not to a
     colour) also works for both themes and hides the fractional-pixel seam
     the blurred blobs used to leak along the bottom edge. */
  --hero-fade: linear-gradient(to bottom,
    #000 30%, rgba(0, 0, 0, .97) 37%, rgba(0, 0, 0, .9) 44%, rgba(0, 0, 0, .78) 51%,
    rgba(0, 0, 0, .65) 58%, rgba(0, 0, 0, .5) 65%, rgba(0, 0, 0, .35) 72%,
    rgba(0, 0, 0, .22) 79%, rgba(0, 0, 0, .1) 86%, rgba(0, 0, 0, .03) 93%, transparent 100%);
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
}
/* let the mesh hang below the hero so the fade has room to finish behind the
   start of the next section instead of stopping at the hero's edge */
.section.hero {
  overflow: visible;
}
.hero-image-wrapper {
  height: calc(100% + 22vh);
}

/* grain / noise texture over the colors */
.hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5; /* softer grain: at .85 it read as grey speckle over the pastels */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* with the marquee gone, give "Past Projects" some room below the hero */
.section.hero + .section {
  padding-top: clamp(2rem, 5vw, 4.5rem);
}


.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
  opacity: 0.95;
}

/* magenta — the signature hue, top-left */
.hero-blob.b1 {
  width: 72vw; height: 72vw; left: -24%; top: -22%;
  background: radial-gradient(circle at center, var(--g1) 0%, rgb(from var(--g1) r g b / 0) 64%);
  animation: hero-wave-1 14s ease-in-out infinite;
}
/* orange / coral — denser + more opaque */
.hero-blob.b2 {
  width: 64vw; height: 64vw; left: 8%; top: -26%;
  opacity: 1;
  background: radial-gradient(circle at center, var(--g2) 0%, rgb(from var(--g2) r g b / .55) 40%, rgb(from var(--g2) r g b / 0) 70%);
  animation: hero-wave-2 17s ease-in-out infinite;
}
/* purple / lavender — denser + more opaque */
.hero-blob.b3 {
  width: 60vw; height: 60vw; right: -16%; top: -14%;
  opacity: 1;
  background: radial-gradient(circle at center, var(--g3) 0%, rgb(from var(--g3) r g b / .55) 40%, rgb(from var(--g3) r g b / 0) 70%);
  animation: hero-wave-3 20s ease-in-out infinite;
}
/* peach, center */
.hero-blob.b4 {
  width: 52vw; height: 52vw; left: 20%; top: -8%;
  background: radial-gradient(circle at center, var(--g4) 0%, rgb(from var(--g4) r g b / 0) 62%);
  animation: hero-wave-4 15s ease-in-out infinite;
}
/* second pink accent for depth */
.hero-blob.b5 {
  width: 48vw; height: 48vw; left: -16%; top: 4%;
  background: radial-gradient(circle at center, var(--g5) 0%, rgb(from var(--g5) r g b / 0) 62%);
  animation: hero-wave-5 22s ease-in-out infinite;
}

/* Each blob orbits the whole hero on a big elliptical loop, with its own
   direction, radius and phase — so the hues roam left<->right and top<->bottom
   and trade places (orange sweeps right, purple sweeps left, etc.). */
@keyframes hero-wave-1 { /* clockwise */
  0%, 100% { transform: translate(26vw, -2vh) scale(1.1) rotate(0deg); }
  25%      { transform: translate(4vw, 22vh) scale(1.25) rotate(8deg); }
  50%      { transform: translate(-26vw, 6vh) scale(1.05) rotate(-6deg); }
  75%      { transform: translate(-4vw, -20vh) scale(1.2) rotate(5deg); }
}
@keyframes hero-wave-2 { /* orange: counter-clockwise, big horizontal sweep L->R */
  0%, 100% { transform: translate(-30vw, 6vh) scale(1.1); }
  25%      { transform: translate(2vw, 24vh) scale(1.22); }
  50%      { transform: translate(34vw, 2vh) scale(0.92); }
  75%      { transform: translate(6vw, -20vh) scale(1.18); }
}
@keyframes hero-wave-3 { /* purple: clockwise, big sweep R->L (opposite phase to orange) */
  0%, 100% { transform: translate(28vw, -4vh) scale(1.1) rotate(0deg); }
  25%      { transform: translate(2vw, 22vh) scale(1.26) rotate(-8deg); }
  50%      { transform: translate(-34vw, 4vh) scale(1.0) rotate(6deg); }
  75%      { transform: translate(-6vw, -20vh) scale(1.2) rotate(-5deg); }
}
@keyframes hero-wave-4 { /* counter-clockwise, offset */
  0%, 100% { transform: translate(-22vw, -8vh) scale(1.1); }
  30%      { transform: translate(12vw, 16vh) scale(1.25); }
  60%      { transform: translate(30vw, -6vh) scale(0.95); }
  85%      { transform: translate(-4vw, 22vh) scale(1.15); }
}
@keyframes hero-wave-5 { /* clockwise, different phase */
  0%, 100% { transform: translate(18vw, 20vh) scale(1.15) rotate(0deg); }
  25%      { transform: translate(-20vw, 24vh) scale(1.25) rotate(10deg); }
  55%      { transform: translate(-30vw, -12vh) scale(1.05) rotate(-6deg); }
  80%      { transform: translate(12vw, -18vh) scale(1.3) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blob { animation: none; }
}

/* Keep the footer wordmark on one line, scaling it down on narrow
   viewports so it always fits instead of overflowing. */
.footer-logo {
  white-space: nowrap;
  font-size: clamp(1.35rem, 8.5vw, 3rem);
}

/* Below ~1200px the link columns crowd the logo, so give the wordmark
   its own full-width row and let the columns wrap underneath it. */
@media (max-width: 1200px) {
  .footer .w-layout-grid.footer {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    gap: 2.5rem 2.5rem;
  }
  .footer .w-layout-grid.footer > .block {
    flex: 0 0 100%;
  }
}

/* =====================================================================
   CHARACTER LAYER  (typography / color / editorial / motion)
   ===================================================================== */

/* --- 1. Type: two sister families, both self-hosted in assets/fonts ---
   Instrument Serif for display headlines, Instrument Sans for everything
   else. Replaces the export's DM Sans + DM Mono, which loaded from Google
   Fonts. Latin subset only (from Google Fonts, OFL); anything outside it,
   like the → and ↳ arrows, falls back to the next font in the stack. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/FragmentMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --primary: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --secondary: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Webflow's "mono" slot: logo, nav, labels, tags */
}
body {
  letter-spacing: -0.01em; /* the export's -0.05em was tuned for DM Mono */
}
.display,
.display-xl,
.display-large,
.display-4xl {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
/* the wordmark in the nav/footer stays in the mono (it uses .display-xl.logo) */
.display-xl.logo,
.footer-logo {
  font-family: var(--secondary);
  font-weight: 400;
  letter-spacing: -0.03em;
}
/* small labels: tags, years, nav numbers */
.display-xs,
.service-label-small,
.footer-label {
  letter-spacing: 0;
}
/* body copy: more air between lines for a sans at reading sizes */
.paragraph,
.rich-text-block p,
.rich-text-block li {
  line-height: 1.55;
}
/* numbers line up (project index, years, X-ray readouts) */
.works-collection-wrap .text-block-4::before,
.text-block-2,
.pc-xray,
.pc-tokens {
  font-variant-numeric: tabular-nums;
}

/* --- 2. Palette: magenta accent + one plum ink, both pulled from the hero
   gradient. The export mixed #000, #1e1e1f and #333 for text and a solid
   black menu button, which fought the pastel mesh; everything dark now
   uses the same ink, tinted toward the mesh's magenta/lilac. --- */
:root {
  --accent: #d6478f;
  --ink: #2a1c2e;
  --ink-rgb: 42, 28, 46;
  --ink-soft: #45384a; /* body copy */
  /* Webflow's own tokens now resolve to the same ink */
  --colors--neutral-600: var(--ink);
  --colors--black: var(--ink);
}
/* surfaces that sit on the page: glass pills, panels, sticky notes */
:root {
  --paper-rgb: 246, 246, 246;
  --panel-rgb: 252, 251, 252;
  --ripple-blend: multiply;
  color-scheme: light;
}

/* --- Dark theme: html[data-theme="dark"] (nav toggle + ⌘K, remembered) ---
   The same system inverted: the page turns plum-black and the ink turns a
   warm off-white, so everything built on the tokens flips on its own
   (ink pills become light pills, glass pills go dark, and so on). */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eee8ed;
  --ink-rgb: 238, 232, 237;
  --ink-soft: #bcb2bb;
  --accent: #ec6fae;
  --paper-rgb: 21, 17, 23;
  --panel-rgb: 33, 28, 36;
  --ripple-blend: screen;
  /* Webflow's tokens */
  --colors--stone: #151117;
  --colors--white: #211c24;
  --colors--neutral-200: #1f1a21;
  --colors--neutral-300: #2e2730;
  --colors--neutral-400: #4a414c;
  --colors--neutral-500: #a39aa2;
  --colors--lavender: #3a2c45;
  --colors--sky: #25334a;
  --colors--tart: #4a3122;
  --colors--sand: #3b3326;
  --colors--peony: #45283a;
}
/* the mesh glows instead of washing the page out */
html[data-theme="dark"] .hero-blob {
  opacity: .5;
}
html[data-theme="dark"] .email-link {
  color: var(--ink-soft);
}
/* scrolled nav background in the page color, in either theme (overrides the
   light grey Webflow writes inline; JS sets html.pc-scrolled) */
.nav-bar {
  background-color: transparent !important;
  transition: background-color .3s ease;
}
/* light frosted glass: mostly see-through so the page shows beneath it,
   with just enough blur to keep the logo and buttons readable */
html.pc-scrolled .nav-bar {
  background-color: rgba(var(--paper-rgb), .4) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), .06);
}
/* theme switch: a plain cross-fade (page navigations keep their own) */
html.pc-theming::view-transition-old(root) {
  animation: .35s ease both pc-vt-out;
}
html.pc-theming::view-transition-new(root) {
  animation: .35s ease both pc-fade-in;
}
@keyframes pc-fade-in {
  from { opacity: 0; }
}

body {
  color: var(--ink-soft);
}
h1, h2, h3,
.display,
.display-xl,
.display-large,
.display-4xl,
.text-block-4,
.display-xs {
  color: var(--ink);
}
/* "See More" (and the case-study "Visit") button: the same glass pill as the
   nav controls (⌘K, X-ray, theme), with the arrow sitting inside it.
   Webflow animates the arrow's circle on hover with inline styles, hence the
   !important on that piece. */
.button-content-wrap {
  gap: .4em;
  height: 2.25rem;
  padding: 0 .7em 0 .95em;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 999px;
  background-color: rgba(var(--paper-rgb), .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  transition: border-color .2s ease;
}
.button:hover .button-content-wrap { border-color: var(--accent); }
.button:focus-visible { outline: none; }
.button:focus-visible .button-content-wrap {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.button-content-wrap .display-xs {
  color: inherit;
  font-family: var(--secondary);
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.button-arrow-wrap {
  width: auto;
  height: auto;
  background-color: transparent !important;
  color: inherit !important;
  transform: none !important;
}
.button-icon {
  width: .95em;
  height: .95em;
  transition: translate .25s cubic-bezier(.2, .8, .2, 1);
}
.button:hover .button-icon { translate: 2px -2px; }
/* project tags (on the card thumbnails + case-study headers): the same light
   grey chip with dark text in both themes, so they read on white and black
   thumbnails alike. The export tinted them with the page color, which made
   them near-black in dark mode. */
.service-label-small,
.service-label-small.lavender,
.service-label-small.sky,
.service-label-small.tart,
.service-label-small.sand,
.service-label-base.stone {
  --ink: #2a1c2e;
  background-color: #e4e1e4;
  color: #2a1c2e;
}
::selection {
  background: rgba(244, 114, 212, .28);
  color: var(--ink);
}
/* even line lengths in big headlines (no lonely last word) */
.hero-intro .display,
.display-4xl,
.selected-works-header .display-xl {
  text-wrap: balance;
}
/* case-study "View All" arrow is a black SVG: hide its pixels and repaint the
   same shape in ink through a mask, so it follows the theme */
.back-button-arrow {
  object-position: -999px 0;
  background-color: var(--ink);
  -webkit-mask: url("../images/arrow-right.svg") center / contain no-repeat;
  mask: url("../images/arrow-right.svg") center / contain no-repeat;
}
/* inline links in body copy: accent colour, no underline */
.paragraph a {
  color: var(--accent);
  text-decoration: none;
}
/* nav + footer link hovers pick up the accent (no underline bar) */
.nav-link:hover,
.footer-button:hover {
  color: var(--accent);
}
.button-hover-line {
  display: none;
}

/* --- 3. Section headings ("Past Projects", "Other Works") + project index ---
   Small mono labels rather than big display type: they name the section and
   let the work carry the page. */
.selected-works-header {
  align-items: center; /* centre the label on the "See More" pill */
}
.selected-works-header .display-xl {
  font-family: var(--mono);
  font-size: clamp(1.125rem, 1.35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* --- 4. Motion: project image zoom on hover --- */
.portfolio-image-wrap { overflow: hidden; }
/* Only the image tilts + zooms on hover; the tags + lock overlay
   (.service-type-wrapper) is a separate layer that stays fixed. The tilt
   vars are set by interactions.js on .portfolio-image-wrap, and the images
   inherit them. */
.cms-work-item .product-image,
.cms-work-item .product-image-hover {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.cms-work-item.is-tilting .product-image,
.cms-work-item.is-tilting .product-image-hover {
  transition: transform 0.15s ease-out;
}
.cms-work-item:hover .product-image,
.cms-work-item:hover .product-image-hover {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.05);
}

/* --- 5. Scrolling marquee band (hero -> projects) --- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 1.25rem 0;
  margin: 1.5rem 0 clamp(3.5rem, 7vw, 7rem);
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex: 0 0 auto;
}
.marquee-item {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.marquee-star {
  color: var(--accent);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --- Fix: keep long case-study titles from running under the year label
   (pre-existing overlap in the Webflow export at desktop widths) --- */
@media (min-width: 992px) {
  .display-4xl {
    padding-right: 12rem;
  }
}

/* =====================================================================
   INTERACTION LAYER  (driven by assets/js/interactions.js)
   ===================================================================== */

/* Webflow's IX cursor dot and "↳ View" bubble are replaced by .pc-cursor
   (on touch screens they only left a stray dot in the middle of the page). */
.cursor-wrap,
.hover-component {
  display: none !important;
}

/* --- 1. Custom cursor (fine pointers only; JS adds html.has-cursor) --- */
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}
html.has-cursor :is(input, textarea, select, [contenteditable="true"]) {
  cursor: text !important;
}
.pc-cursor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.pc-cursor.is-visible { opacity: 1; }
.pc-cursor.is-hidden { opacity: 0; }
.pc-cursor-dot,
.pc-cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  will-change: translate;
}
/* the label pill centres itself on the pointer; with the origin at that
   centre point, scaling it keeps it centred */
.pc-cursor-ring {
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
}
.pc-cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ink);
  transition: scale .25s ease, opacity .2s ease;
}
.pc-cursor-ring {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  opacity: 0; /* hidden: the cursor is just the dot, except for card labels */
  overflow: hidden;
  transition:
    width .4s cubic-bezier(.2, .8, .2, 1),
    height .4s cubic-bezier(.2, .8, .2, 1),
    background-color .3s ease,
    border-color .3s ease,
    opacity .25s ease,
    scale .2s ease;
}
.pc-cursor-label {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  white-space: nowrap;
  font-family: var(--secondary);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--colors--stone);
  opacity: 0;
  transition: opacity .15s ease;
}
/* over links + buttons: the dot grows a little */
.pc-cursor.is-link .pc-cursor-dot { scale: 1.8; }
/* over project cards: the ring becomes a solid ink label */
.pc-cursor.is-label .pc-cursor-ring {
  opacity: 1;
  height: 38px;
  border-color: transparent;
  background-color: var(--ink);
}
.pc-cursor.is-label .pc-cursor-label {
  opacity: 1;
  transition-delay: .1s;
}
.pc-cursor.is-label .pc-cursor-dot,
.pc-cursor.is-xray .pc-cursor-ring {
  opacity: 0;
}
/* "Coming soon": quieter, light label */
.pc-cursor.is-muted .pc-cursor-ring {
  border-color: rgba(var(--ink-rgb), .14);
  background-color: rgba(var(--panel-rgb), .92);
}
.pc-cursor.is-muted .pc-cursor-label { color: rgba(var(--ink-rgb), .7); }
.pc-cursor.is-down .pc-cursor-ring { scale: .85; }

/* --- 2. Reactive hero mesh ---
   JS drives each blob's `translate` (lean + click shove); it composes with
   the keyframed `transform` above, so the ambient drift keeps running. */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: #f18cd6;
}
.hero-gradient {
  transition: --glow .9s ease;
}
.hero-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity .8s ease;
}
.hero-gradient.is-active .hero-glow { opacity: .7; }
.hero-ripple,
.hero-ripple-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.hero-ripple {
  width: 70vw;
  height: 70vw;
  mix-blend-mode: var(--ripple-blend); /* multiply on light (ink drop), screen on dark (glow) */
}
.hero-ripple-ring {
  width: 46vw;
  height: 46vw;
  border: 1.5px solid rgba(255, 255, 255, .9);
}

/* --- 3. Project cards: glow border that tracks the cursor. The 3D tilt now
   lives on the image layer (above) so the tag/lock overlay stays put. --- */
.cms-work-item .portfolio-image-wrap::before,
.cms-work-item .portfolio-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
/* soft glare */
.cms-work-item .portfolio-image-wrap::after {
  z-index: 4;
  background: radial-gradient(circle 22rem at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
}
/* 1px neutral edge that brightens near the cursor, masked to the border;
   mid-grey so it reads on both white and black thumbnails */
.cms-work-item .portfolio-image-wrap::before {
  z-index: 5;
  padding: 1px;
  background: radial-gradient(circle 18rem at var(--glow-x, 50%) var(--glow-y, 50%), rgba(140, 128, 145, .9), rgba(140, 128, 145, 0) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cms-work-item:hover .portfolio-image-wrap::before,
.cms-work-item:hover .portfolio-image-wrap::after {
  opacity: 1;
}
html.is-xray .cms-work-item .portfolio-image-wrap {
  transform: none;
}

/* --- 4. X-ray mode --- */
.pc-xray-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 2.25rem;
  margin: 0 0 0 auto;
  padding: 0 .85em 0 .55em;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 999px;
  background: rgba(var(--paper-rgb), .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--secondary);
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--colors--neutral-600);
  transition: border-color .2s ease, background-color .2s ease;
}
.pc-xray-toggle:hover { border-color: var(--accent); }
.pc-xray-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-xray-toggle.is-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 999;
}
.pc-xray-switch {
  position: relative;
  flex: none;
  width: 22px;
  height: 12px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), .22);
  transition: background-color .25s ease;
}
.pc-xray-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition: translate .25s cubic-bezier(.2, .8, .2, 1);
}
.pc-xray-toggle[aria-pressed="true"] .pc-xray-switch { background: var(--accent); }
.pc-xray-toggle[aria-pressed="true"] .pc-xray-switch::after { translate: 10px 0; }

.pc-xray {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  font-family: var(--secondary);
  letter-spacing: 0;
}
.pc-xray[hidden],
.pc-tokens[hidden] {
  display: none;
}
/* layout grid columns, Figma-style */
.pc-xray-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
}
.pc-xray-grid > span {
  position: relative;
  background: rgba(214, 71, 143, .05);
  border-inline: 1px solid rgba(214, 71, 143, .14);
}
.pc-xray-grid > span::after {
  content: attr(data-n);
  position: absolute;
  bottom: 10px;
  left: 50%;
  translate: -50% 0;
  font-size: 10px;
  color: rgba(214, 71, 143, .6);
}
/* component outlines + name tags */
.pc-xray-box,
.pc-xray-pad,
.pc-xray-hover {
  position: absolute;
  top: 0;
  left: 0;
}
.pc-xray-box {
  outline: 1px solid rgba(214, 71, 143, .6);
  outline-offset: -1px;
}
.pc-xray-tag {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: 2px 5px 1px;
  border-radius: 3px 3px 3px 0;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
.pc-xray-box.is-tag-inside .pc-xray-tag {
  top: 0;
  bottom: auto;
  border-radius: 0 0 3px 0;
}
/* section padding, hatched */
.pc-xray-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(-45deg, rgba(177, 132, 232, .28) 0 1px, transparent 1px 7px);
  outline: 1px dashed rgba(177, 132, 232, .6);
  outline-offset: -1px;
}
.pc-xray-pad > span {
  padding: 1px 5px;
  border-radius: 3px;
  background: #b184e8;
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
}
/* hover inspector: highlighted box, padding, size badge, spec card */
.pc-xray-hover {
  outline: 1.5px solid var(--accent);
  background: rgba(214, 71, 143, .06);
}
.pc-xray-hover-pad {
  position: absolute;
  background: repeating-linear-gradient(-45deg, rgba(177, 132, 232, .45) 0 1px, rgba(177, 132, 232, .12) 1px 6px);
}
.pc-xray-dims {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  translate: -50% 0;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
.pc-xray-inspect {
  position: absolute;
  top: 0;
  left: 0;
  width: 236px;
  padding: 10px 12px 11px;
  border-radius: 10px;
  background: rgba(var(--ink-rgb), .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5);
  color: var(--colors--stone);
  font-size: 11px;
  line-height: 1.5;
}
.pc-xray-inspect-title {
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--colors--stone);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-xray-inspect-title span { color: rgba(var(--paper-rgb), .5); }
.pc-xray-inspect dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0;
}
.pc-xray-inspect dt { color: rgba(var(--paper-rgb), .55); }
.pc-xray-inspect dd {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.pc-xray-inspect .sw {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
/* tokens panel */
.pc-tokens {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9995;
  width: 292px;
  padding: 14px;
  border: 1px solid rgba(var(--ink-rgb), .12);
  border-radius: 14px;
  background: rgba(var(--paper-rgb), .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(var(--ink-rgb), .35);
  font-family: var(--secondary);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--colors--neutral-600);
}
.pc-tokens-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
}
.pc-tokens-head span::after {
  content: " \2212";
  opacity: .5;
}
.pc-tokens-head em {
  font-style: normal;
  font-size: 10px;
  opacity: .5;
}
.pc-tokens.is-folded > :not(.pc-tokens-head) {
  display: none;
}
.pc-tokens.is-folded .pc-tokens-head span::after {
  content: " +";
}
.pc-tokens.is-folded .pc-tokens-head em {
  display: none;
}
.pc-tokens-label {
  margin: 12px 0 6px;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
}
.pc-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 6px;
}
.pc-swatch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.pc-swatch-chip {
  height: 26px;
  border-radius: 6px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .1);
  transition: transform .2s ease;
}
.pc-swatch:hover .pc-swatch-chip { transform: translateY(-2px); }
.pc-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.pc-swatch-name { font-size: 10px; }
.pc-swatch-hex {
  font-size: 9.5px;
  opacity: .5;
}
.pc-type-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}
.pc-type-row b {
  width: 32px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.pc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pc-chips span {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(var(--ink-rgb), .06);
}
.pc-tokens-foot {
  margin-top: 12px;
  font-size: 10px;
  opacity: .5;
}
@media (max-width: 600px) {
  .pc-tokens {
    right: 16px;
    width: auto;
    max-height: 42vh;
    overflow: auto;
  }
  .pc-xray-toggle { margin-right: .5rem; }
}

/* --- Morphing page transitions (assets/js/page-transitions.js) --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
/* the fixed nav stays put while the page underneath changes */
.nav-bar {
  view-transition-name: pc-nav;
}
::view-transition-group(pc-project),
::view-transition-group(pc-title) {
  animation-duration: .65s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
::view-transition-old(pc-title),
::view-transition-new(pc-title) {
  height: 100%;
  object-fit: contain;
  object-position: left top;
}
::view-transition-old(root) {
  animation: .3s ease both pc-vt-out;
}
::view-transition-new(root) {
  animation: .45s cubic-bezier(.2, .8, .2, 1) .1s both pc-vt-in;
}
@keyframes pc-vt-out {
  to { opacity: 0; }
}
@keyframes pc-vt-in {
  from { opacity: 0; transform: translateY(16px); }
}
/* arriving via the morph: the hero image + headline are already in place,
   so skip their Webflow fade/slide-in */
.pc-vt-arrived .animation-up-0-1:has(.works-image.thumbnail),
.pc-vt-arrived .display-4xl {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Command palette (⌘K) --- */
.pc-cmdk-button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 0 auto;
  height: 2.25rem;
  padding: 0 .6em;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 999px;
  background: rgba(var(--paper-rgb), .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--colors--neutral-600);
  transition: border-color .2s ease, background-color .2s ease;
}
.pc-cmdk-button:hover { border-color: var(--accent); }
.pc-cmdk-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-cmdk-button + .pc-xray-toggle { margin-left: .5rem; }
/* touch screens: the same button reads "Menu" */
.pc-cmdk-button.is-text {
  padding: 0 .9em;
  font-family: var(--secondary);
  font-size: .8125rem;
  line-height: 1;
}
.pc-cmdk-panel:focus { outline: none; }
@media (hover: none) {
  .pc-cmdk-foot { display: none; }
}
/* dark-mode toggle: same glass pill, icon only */
.pc-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0 .5rem;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 999px;
  background: rgba(var(--paper-rgb), .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease;
}
.pc-theme-toggle:hover { border-color: var(--accent); }
.pc-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-theme-toggle.is-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 999;
}
.pc-cmdk-button kbd,
.pc-cmdk kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: .2em .35em;
  border-radius: 5px;
  background: rgba(var(--ink-rgb), .07);
  font-family: var(--secondary);
  font-size: .75rem;
  line-height: 1;
  letter-spacing: 0;
}
.pc-cmdk {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 16px 16px;
}
.pc-cmdk[hidden] { display: none; }
.pc-cmdk-scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--paper-rgb), .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
}
.pc-cmdk-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(580px, 100%);
  max-height: 70vh;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), .1);
  border-radius: 16px;
  background: rgba(var(--panel-rgb), .94);
  box-shadow: 0 30px 80px -30px rgba(var(--ink-rgb), .45), 0 0 0 6px rgba(214, 71, 143, .06);
  font-family: var(--secondary);
  letter-spacing: -.02em;
  color: var(--colors--neutral-600);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pc-cmdk.is-open .pc-cmdk-scrim { opacity: 1; }
.pc-cmdk.is-open .pc-cmdk-panel {
  opacity: 1;
  transform: none;
}
.pc-cmdk-search {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .08);
}
.pc-cmdk-glyph {
  color: var(--accent);
  font-size: 1.1rem;
}
.pc-cmdk-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
}
.pc-cmdk-search input::placeholder { color: rgba(var(--ink-rgb), .4); }
.pc-cmdk-list {
  flex: 1;
  margin: 0;
  padding: .4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.pc-cmdk-group {
  padding: .7rem .7rem .35rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .45;
}
.pc-cmdk-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  font-size: .875rem;
}
.pc-cmdk-item[aria-selected="true"] {
  background: rgba(var(--ink-rgb), .07);
}
.pc-cmdk-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  background: rgba(var(--ink-rgb), .05);
  color: var(--accent);
}
.pc-cmdk-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.pc-cmdk-hint {
  overflow: hidden;
  font-size: .75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .5;
}
.pc-cmdk-empty {
  padding: 1.5rem .7rem;
  font-size: .875rem;
  text-align: center;
  opacity: .5;
}
.pc-cmdk-foot {
  display: flex;
  gap: 1rem;
  padding: .6rem 1.1rem;
  border-top: 1px solid rgba(var(--ink-rgb), .08);
  font-size: .7rem;
  opacity: .6;
}
.pc-cmdk-foot span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* --- Toast + color burst --- */
.pc-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 9999;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: var(--colors--neutral-600);
  color: var(--colors--stone);
  font-family: var(--secondary);
  font-size: .8125rem;
  letter-spacing: -.02em;
  pointer-events: none;
  opacity: 0;
  translate: -50% 12px;
  transition: opacity .25s ease, translate .35s cubic-bezier(.2, .8, .2, 1);
}
.pc-toast.is-on {
  opacity: 1;
  translate: -50% 0;
}
.pc-burst {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}
.pc-burst-dot,
.pc-burst-star {
  position: absolute;
  border-radius: 50%;
}
.pc-burst-star {
  font-size: 16px;
  line-height: 1;
}

/* --- Intro reveal --- */
.pc-intro .hero-content .animation-up-0-1 {
  opacity: 1 !important;
  transform: none !important;
}
.pc-word {
  display: inline-block;
  animation: pc-word-rise 1s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i) * 45ms + 120ms);
}
@keyframes pc-word-rise {
  from {
    opacity: 0;
    transform: translateY(.45em);
    filter: blur(10px);
  }
}
.pc-letter { display: inline-block; }
.pc-logo-intro .display-xl.logo .pc-letter {
  animation: pc-letter-rise .7s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes pc-letter-rise {
  from { opacity: 0; transform: translateY(70%); }
}
/* hover the logo for a little wave */
.logo-link:hover .pc-letter {
  animation: pc-letter-wave .7s ease both;
  animation-delay: calc(var(--i) * 30ms);
}
@keyframes pc-letter-wave {
  40% { transform: translateY(-22%); color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-link:hover .pc-letter { animation: none; }
}

/* --- Project cards fade in as they enter the viewport ---
   A slow fade with a short rise, the same motion as the page's other
   reveals; the second card in a row follows a beat later. JS adds
   .pc-reveal (so nothing is hidden without it) and .is-in on entry. */
.collection-item.pc-reveal {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 1.1s ease, translate 1.1s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.collection-item.pc-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* --- Sticky-note testimonials ---
   Plain white paper cards with a hairline edge and a slight tilt, the same in
   both themes. The paper is always white, so the text on it always uses the
   light-theme ink (these tokens are re-declared here so everything inside,
   including Webflow's own color tokens, resolves dark). */
.pc-note {
  --note-rot: -.8deg;
  --note-bg: #fff;
  --ink: #2a1c2e;
  --ink-rgb: 42, 28, 46;
  --ink-soft: #45384a;
  --colors--black: #2a1c2e;
  --colors--neutral-600: #2a1c2e;
  color: var(--ink-soft);
  position: relative;
  padding: 1.9rem 1.75rem 1.6rem;
  border-radius: 4px;
  background: var(--note-bg);
  box-shadow:
    0 0 0 1px rgba(var(--ink-rgb), .06),
    0 1px 2px rgba(var(--ink-rgb), .04),
    0 16px 36px -26px rgba(var(--ink-rgb), .3);
  rotate: calc(var(--note-rot) + var(--drag-rot, 0deg));
  transition: box-shadow .3s ease, scale .3s ease;
}
/* quote text: a step smaller than body copy, and upright (the export
   italicised every testimonial) */
.pc-note .paragraph {
  font-size: 1rem;
}
.pc-note em,
.pc-note i {
  font-style: normal;
}
.pc-note-1 { --note-rot: 1deg; }
.pc-note-2 { --note-rot: -.4deg; }
/* the export's emphasis was a 40% coral highlighter; keep the emphasis,
   lose the marker: a soft wash under the lower half of the line */
.pc-note .text-span-2,
.pc-note .italic-text,
.pc-note .italic-text-2,
.pc-note .italic-text-3,
.pc-note .italic-text-4 {
  background: linear-gradient(transparent 60%, rgba(214, 71, 143, .14) 60%);
}
.pc-note.is-draggable { user-select: none; }
.pc-note.is-dragging {
  scale: 1.02;
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .06), 0 30px 60px -30px rgba(var(--ink-rgb), .4);
}
.pc-note.is-returning {
  transition: translate .55s cubic-bezier(.2, .8, .2, 1), rotate .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}


/* =====================================================================
   FONTS: Satoshi (sans + headlines) + DM Mono (labels/logo/nav)
   Self-hosted in assets/fonts. Supersedes the Instrument/Fragment faces
   above (those are now unused and won't be downloaded).
   ===================================================================== */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* =====================================================================
   HERO GRADIENT — Sunset palette (the chosen scheme)
   ===================================================================== */
:root { --g1:#f4745e; --g2:#f2a23e; --g3:#ef6aa0; --g4:#f7d08a; --g5:#e8805a; }

/* Descenders (e.g. the 'j' in "Projects") were being clipped by the
   overflow:hidden reveal mask (.text-wrap). Give the headings a little
   room below the baseline so the glyph tails show. */
.text-wrap .display,
.text-wrap .display-xl,
.text-wrap .display-4xl {
  padding-bottom: 0.12em;
}

/* /projects page: make the "Projects" title match the homepage section
   header — a small mono label sitting just above the grid, instead of a big
   display heading with a large gap below it. */
.section.intro .display {
  font-family: var(--mono);
  font-size: clamp(1.125rem, 1.35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.section.intro {
  padding-bottom: 0;
}