/* BOLD v2 — horizontal on iPad and laptop, vertical on phones. */

@font-face { font-family: 'Code Pro'; src: url('fonts/Code-Pro-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Code Pro'; src: url('fonts/Code-Pro-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Drafting Mono'; src: url('fonts/Drafting-Mono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Drafting Mono'; src: url('fonts/Drafting-Mono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --black: #000;
  --white: #fff;
  --red: #E30613;
  --yellow: #FDB913;
  --blue: #005CAB;
  --step: #161616;          /* one tone up from black, for surfaces */
  --muted: #b3b3b3;

  --display: 'Code Pro', 'Arial Black', sans-serif;
  --text: 'Drafting Mono', ui-monospace, Menlo, monospace;

  --m: clamp(20px, 3vw, 48px);     /* outer margin */
  --bar: 72px;                     /* header height */
  --foot: 56px;                    /* space kept free at the bottom */
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--black);
  color: var(--white);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--yellow); color: var(--black); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.skip { position: fixed; left: var(--m); top: -60px; z-index: 50; background: var(--yellow); color: var(--black); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.92;
}
h3 { font: 900 clamp(28px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }

/* ---------- Header ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--bar);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--m);
  background: var(--black);
}
.bar-logo img { width: 92px; height: auto; }
.bar-nav { display: flex; gap: 28px; margin-left: auto; }
.bar-nav a { text-decoration: none; font-size: 16px; padding: 6px 0; }
.bar-nav a:hover { color: var(--yellow); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 26px;
  background: var(--red); color: var(--white);
  font: 700 17px/1 var(--text);
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.btn:hover { background: var(--white); color: var(--black); }
.btn:active { transform: scale(.97); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 15px; }
.link { font-weight: 700; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.link:hover { color: var(--yellow); }

/* ---------- Pictures ---------- */
.tile img { width: 100%; height: auto; object-fit: cover; background: var(--step); }
figcaption { font-size: 15px; line-height: 1.4; margin-top: 10px; color: var(--muted); max-width: 34ch; }

/* =========================================================
   Phone: one vertical column (default)
   ========================================================= */
.track { padding-top: var(--bar); }
.panel { padding: 56px var(--m); }
.hint-desk { display: none; }

.hero { display: grid; gap: 40px; padding-top: 40px; }
.hero h1 { font-size: clamp(44px, 13vw, 72px); }
.lede { font-size: 19px; margin-top: 24px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.hero-figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.hint { display: none; }

.services { display: grid; gap: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.services-head { padding: 0 var(--m) 48px; }
.services-head h2 { font-size: clamp(40px, 11vw, 64px); }
.services-head p { margin-top: 24px; max-width: 32em; }
.service { padding: 48px var(--m) 56px; display: flex; flex-direction: column; gap: 18px; }
.service ul { display: grid; gap: 6px; font-weight: 700; }
.service ul li::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 12px; background: currentColor; vertical-align: 1px; }
.service-proof { margin-top: 12px; padding-top: 12px; font-size: 15px; }
.s-blue { background: var(--blue); }
.s-red { background: var(--red); }
.s-yellow { background: var(--yellow); color: var(--black); }

.index .display { font-size: clamp(40px, 11vw, 64px); }
.work-all { display: inline-block; margin-top: 28px; }
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 28px; }
.chip {
  min-height: 44px; padding: 0 18px;
  border: 0; background: var(--step); color: var(--white);
  font: 700 15px/1 var(--text); cursor: pointer;
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.chip:hover { background: #2a2a2a; }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--white); color: var(--black); }
.chip-red.is-on { background: var(--red); color: var(--white); }
.chip-blue.is-on { background: var(--blue); color: var(--white); }
.index-list { display: grid; gap: 22px; }
.index-list li { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.index-list li.is-dim { opacity: .18; }
.index-list a { text-decoration: none; display: block; }
.ix-name { display: block; font: 900 clamp(28px, 7.5vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.index-list a .ix-name { transition: color .2s; }
.index-list a:hover .ix-name { color: var(--yellow); }
.index-list a .ix-name::after { content: ''; display: inline-block; width: .32em; height: .32em; margin-left: .25em; background: var(--red); vertical-align: .1em; }
.ix-meta { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }

.project { display: grid; gap: 32px; }
.project h2 { font-size: clamp(40px, 11vw, 64px); }
.project-meta { font-weight: 700; margin: 14px 0 18px; }
.project-copy p + p { margin-top: 14px; }
.p-pacework .project-meta { color: var(--red); }
.p-trishakti { background: #3a1e22; }      /* Trishakti maroon, from its own stationery */
.p-trishakti .project-meta { color: #f2b8a8; }
.p-archveda { background: var(--white); color: var(--black); }
.p-archveda .project-meta { color: var(--blue); }
.p-archveda figcaption { color: #555; }
.p-trishakti figcaption { color: #e3c8c2; }

/* Galleries swipe sideways on a phone */
.strip, .mosaic, .sequence {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 8px;
  scroll-padding-inline: var(--m);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar, .mosaic::-webkit-scrollbar, .sequence::-webkit-scrollbar { display: none; }
.tile { flex: none; scroll-snap-align: start; }
.tile.tall, .tile.portrait { width: 72vw; }
.tile.tall img, .tile.portrait img { aspect-ratio: 4 / 5; }
.tile.wide { width: 86vw; }
.tile.wide img { aspect-ratio: 3 / 2; }
.tile.sq { width: 72vw; }
.tile.sq img { aspect-ratio: 1; }
.sequence li { flex: none; }
@media (min-width: 600px) {
  .tile.tall, .tile.portrait, .tile.sq { width: 40vw; }
  .tile.wide { width: 56vw; }
}

.approach { background: var(--white); color: var(--black); }
.approach h2 { font-size: clamp(40px, 11vw, 64px); }
.principles { display: grid; gap: 40px; margin-top: 40px; }
.principles article { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pr-num { display: inline-block; font: 900 clamp(72px, 24vw, 120px)/.82 var(--display); letter-spacing: 0; padding: .06em .08em; margin: -.06em -.08em; }
.principles h3 { font-size: 22px; line-height: 1.1; margin-top: 8px; }
.principles p { font-size: 18px; max-width: 30ch; }
.principles article:nth-child(1) .pr-num { color: var(--red); }
.principles article:nth-child(2) .pr-num { color: var(--blue); }
.principles article:nth-child(3) .pr-num { color: var(--yellow); }
.approach-foot { margin-top: 48px; display: grid; gap: 14px; justify-items: start; }
.approach-foot p { max-width: 34ch; }
/* Micro-motion: each word wipes in from the left, the Intent underline draws itself, hover nudges the word */
/* No clip-path here: Safari cuts the round digits even with negative insets */
.principles article .pr-num { transition: transform .35s var(--ease); }
.principles article:hover .pr-num { transform: translateX(8px); }
.principles article p { transition: color .2s; }

.contact { background: var(--black); display: flex; flex-direction: column; gap: 64px; padding-bottom: 32px; }
.contact h2 { font-size: clamp(44px, 12vw, 72px); color: var(--blue); }
.contact-copy p { margin-top: 24px; max-width: 30em; font-size: 19px; }
.mail {
  display: inline-block; margin-top: 28px;
  font: 900 clamp(20px, 6.2vw, 44px)/1 var(--display); text-transform: uppercase; max-width: 100%; overflow-wrap: anywhere;
  text-decoration: none; color: var(--yellow);
  transition: background .2s, color .2s;
}
.mail:hover { color: var(--white); }
.foot-word { color: var(--red); font: 900 30vw/0.92 var(--display); letter-spacing: -0.01em; margin-left: -0.04em; }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 15px; }

.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; z-index: 30; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }

@media (max-width: 767px) {
  .bar { gap: 16px; }
  .bar-nav { display: none; }
  .bar .btn-small { margin-left: auto; }
}

/* =========================================================
   iPad and laptop: one long horizontal walk
   ========================================================= */
@media (min-width: 768px) and (orientation: landscape) {
  html, body { height: 100%; overflow: hidden; }
  .track {
    position: fixed; inset: 0;
    display: flex; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    padding-top: 0;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .track::-webkit-scrollbar { display: none; }
  .panel {
    flex: none; height: 100dvh;
    padding: calc(var(--bar) + clamp(16px, 4vh, 48px)) var(--m) var(--foot);
  }
  /* Sections sit well apart: the margin plus a section gap before each one */
  /* Coloured panels butt edge to edge; black panels get their breathing room inside the black */
  .panel + .panel:not(.approach):not(.contact):not(.p-trishakti):not(.p-archveda):not(.services) { padding-left: calc(var(--m) + clamp(56px, 6vw, 112px)); }
  .panel + .services .services-head { padding-left: calc(var(--m) + clamp(56px, 6vw, 112px)); }
  .hint, .hint-desk { display: block; }
  .hint-phone { display: none; }

  /* Hero */
  .hero {
    width: 100vw;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    column-gap: clamp(32px, 5vw, 96px); row-gap: 0;
    padding-top: calc(var(--bar) + clamp(16px, 4vh, 48px));
  }
  .hero-copy { align-self: center; max-width: 60vw; }
  .hero h1 { font-size: min(6.2vw, 11.5vh); }
  .lede { font-size: clamp(17px, 1.4vw, 21px); max-width: 36em; }
  .hero-figure { grid-row: 1 / 3; grid-column: 2; height: 100%; display: flex; flex-direction: column; }
  .hero-figure img { height: calc(100dvh - var(--bar) - clamp(16px, 4vh, 48px) - var(--foot) - 72px); width: auto; aspect-ratio: 4 / 5; }
  .hint { grid-row: 2; grid-column: 1; align-self: end; padding-top: 16px; font-weight: 700; color: var(--yellow); }
  .hint span::after { content: ''; display: inline-block; width: 40px; height: 4px; margin-left: 14px; background: currentColor; vertical-align: middle; animation: nudge 1.6s var(--ease) infinite; }

  /* Services: one black column, then three full colour fields */
  .services { display: flex; padding: 0; }
  .services-head {
    width: clamp(340px, 34vw, 560px);
    padding: calc(var(--bar) + clamp(16px, 4vh, 48px)) var(--m) var(--foot);
    display: flex; flex-direction: column; justify-content: center;
  }
  .services-head h2 { font-size: min(3.6vw, 6.6vh); }
  .service {
    width: clamp(320px, 31vw, 500px);
    padding: calc(var(--bar) + clamp(16px, 6vh, 72px)) clamp(24px, 2.6vw, 44px) var(--foot);
    gap: clamp(12px, 2.2vh, 22px);
    font-size: clamp(16px, 1.2vw, 18px);
  }
  .service h3 { font-size: min(2.6vw, 5.4vh, 52px); }
  .service { justify-content: center; }
  .service-proof { margin-top: 2vh; }

  /* Work index */
  .index { width: clamp(900px, 92vw, 1480px); display: flex; flex-direction: column; }
  .index .display { font-size: min(4vw, 7vh); max-width: 22ch; }
  .filter { margin: clamp(16px, 3.5vh, 36px) 0 clamp(16px, 3vh, 32px); }
  .index-list { grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vh, 22px) 4vw; align-content: start; }
  .work-all { margin-top: auto; padding-top: 12px; }
  .ix-name { font-size: min(2.7vw, 4.6vh); }

  /* Chutneys By Neel: six landscape pictures in two rows */
  .p-neel .mosaic { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 2.4vh clamp(12px, 1.4vw, 24px); height: auto; align-self: center; }
  .p-neel .tile { height: auto; }
  .p-neel .tile img { height: calc((100dvh - var(--bar) - clamp(16px, 4vh, 48px) - var(--foot) - 2.4vh) / 2 - 64px); }

  /* Kaafi: seven squares in two rows, read top to bottom, left to right */
  .p-kaafi .sequence { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 2.4vh clamp(12px, 1.4vw, 24px); height: auto; align-self: center; }
  .p-kaafi .sequence li, .p-kaafi .tile { height: auto; }
  .p-kaafi .tile img { height: calc((100dvh - var(--bar) - clamp(16px, 4vh, 48px) - var(--foot) - 2.4vh) / 2 - 64px); }
  .ix-meta { margin-top: 2px; }

  /* Project panels: copy column, then a strip of pictures at full height */
  .project { display: flex; gap: clamp(28px, 3vw, 56px); align-items: stretch; }
  .project-copy { width: clamp(300px, 28vw, 440px); flex: none; align-self: center; font-size: clamp(16px, 1.2vw, 18px); }
  .project h2 { font-size: min(3.6vw, 7vh, 64px); }
  .strip, .mosaic, .sequence {
    margin: 0; padding: 0; overflow: visible;
    gap: clamp(12px, 1.4vw, 24px);
    height: 100%;
  }
  .tile { height: 100%; }
  .tile img { height: calc(100dvh - var(--bar) - clamp(16px, 4vh, 48px) - var(--foot) - 72px); width: auto; }
  .tile.tall, .tile.portrait, .tile.wide, .tile.sq { width: auto; }
  .tile.tall img, .tile.portrait img { aspect-ratio: 4 / 5; }
  .tile.wide img { aspect-ratio: 3 / 2; }
  .tile.sq img { aspect-ratio: 1; }
  .sequence li { height: 100%; }
  figcaption { min-height: 2.8em; }

  /* Approach */
  /* Approach: heading left; three huge words with their one-line reason, filling the height */
  /* Heading across the top, then the three rules side by side */
  .approach { width: clamp(960px, 80vw, 1360px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 5vh, 64px); }
  .approach h2 { font-size: min(4vw, 7.4vh); white-space: nowrap; }
  .principles { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 80px); }
  .principles article { gap: 1.2vh; }
  .pr-num { font-size: min(10vw, 24vh); }
  .principles h3 { font-size: clamp(20px, 1.7vw, 30px); margin-top: 1.4vh; }
  .principles p { font-size: clamp(16px, 1.25vw, 20px); max-width: 30ch; }
  .approach-foot { margin: 0; display: flex; align-items: baseline; gap: 16px 40px; flex-wrap: wrap; }
  .approach-foot p { font-size: clamp(16px, 1.2vw, 19px); max-width: 60ch; }

  /* Contact */
  .contact { width: 100vw; justify-content: space-between; padding-bottom: calc(var(--foot) - 24px); gap: 24px; }
  .contact h2 { font-size: min(6vw, 10.5vh); max-width: 14ch; }
  .contact-copy p { font-size: clamp(17px, 1.4vw, 21px); }
  .mail { font-size: min(3.6vw, 6.4vh); }
  .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .foot-word { font-size: min(13vw, 21vh); }
  .foot-row { flex-direction: column; align-items: flex-end; text-align: right; margin: 0 0 1.2vh; }
}

/* Touch screens in horizontal mode settle on a panel */
@media (min-width: 768px) and (orientation: landscape) and (pointer: coarse) {
  .track { scroll-snap-type: none; }
  .panel, .service, .services-head, .tile { scroll-snap-align: start; }
}

/* iPad portrait: taller than wide, give the hero picture less room */
/* ---------- Opening sequence ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }

.js .hero h1 { animation: rise .8s var(--ease) both; }
.js .hero .lede { animation: rise .8s .12s var(--ease) both; }
.js .hero-actions { animation: rise .8s .22s var(--ease) both; }
.js .hero-figure img { animation: wipe 1.1s .1s var(--ease) both; }

/* ---------- Homepage work preview: one picture per project ---------- */
.wp .display { font-size: clamp(40px, 11vw, 64px); }
.wp-intro p { margin: 24px 0 28px; max-width: 32em; }
.wp-group { margin-top: 48px; }
.wp-group h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 900 22px/1 var(--display); text-transform: uppercase; }
.wp-mark { display: inline-block; width: 14px; height: 14px; }
.wp-spaces .wp-mark { background: var(--blue); }
.wp-brands .wp-mark { background: var(--red); }
.wp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; }
.wp-tiles a { display: block; text-decoration: none; }
.wp-frame { display: block; aspect-ratio: 1; overflow: hidden; background: var(--step); }
.wp-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.wp-tiles a:hover .wp-frame img, .wp-tiles a:focus-visible .wp-frame img { transform: scale(1.05); }
.wp-name { display: block; margin-top: 10px; font: 700 15px/1.25 var(--text); transition: color .2s; }
.wp-tiles a:hover .wp-name { color: var(--yellow); }
.wp-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.wp-pending .wp-frame { display: flex; align-items: flex-end; padding: 14px; background: var(--blue); }
.wp-pending .wp-frame span { font: 900 14px/1 var(--display); text-transform: uppercase; }
@media (min-width: 600px) { .wp-tiles { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; } }

@media (min-width: 768px) and (orientation: landscape) {
  .wp {
    --tile: min(320px, calc((100dvh - var(--bar) - clamp(16px, 4vh, 48px) - var(--foot) - 168px) / 2));
    display: flex; align-items: center; gap: clamp(32px, 4vw, 72px);
  }
  /* The intro spans the tile block: heading level with the tile tops, button level with the last captions */
  .wp-intro { width: clamp(300px, 26vw, 440px); flex: none; align-self: center; height: calc(var(--tile) * 2 + 168px - 40px); display: flex; flex-direction: column; padding-top: 40px; }
  .wp-intro .btn { margin-top: auto; align-self: flex-start; }
  .wp .display { font-size: min(3.4vw, 6.6vh, 64px); }
  .wp-group { margin: 0; flex: none; }
  .wp-tiles { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: var(--tile); gap: 24px 20px; }
}

/* ---------- Micro-interactions ---------- */
:root { --fast: .2s; --mid: .35s; }

/* Sections arrive part by part as they come into view (classes added by main.js) */

/* Pictures fade in once loaded instead of popping */
.js img[loading="lazy"] { opacity: 0; transition: opacity .6s var(--ease); }
.js img[loading="lazy"].loaded { opacity: 1; }

/* Nav: an underline grows on hover and marks the section in view */
.bar-nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--mid) var(--ease), color var(--fast); }
.bar-nav a:hover, .bar-nav a[aria-current="true"] { background-size: 100% 2px; }
.bar-nav a[aria-current="true"] { color: var(--yellow); }
.bar-logo img { transition: opacity var(--fast); }
.bar-logo:hover img { opacity: .75; }

/* Buttons lift a little; the press stays */
.btn { transition: background var(--fast), color var(--fast), transform var(--mid) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.link { transition: color var(--fast), text-underline-offset var(--mid) var(--ease); }
.link:hover { text-underline-offset: 9px; }

/* Services: list items step in, their squares turn */
.service li { transition: transform var(--mid) var(--ease); }
.service li::before { transition: transform var(--mid) var(--ease); }
.service li:hover { transform: translateX(6px); }
.service li:hover::before { transform: rotate(45deg); }

/* Work index: names step right, the red square turns */
.index-list a .ix-name { transition: color var(--fast), transform var(--mid) var(--ease); }
.index-list a:hover .ix-name, .index-list a:focus-visible .ix-name { transform: translateX(10px); }
.index-list a .ix-name::after { transition: transform var(--mid) var(--ease); }
.index-list a:hover .ix-name::after { transform: rotate(90deg) scale(1.3); }

/* Project pictures lift on hover, captions brighten */
.tile { transition: transform .5s var(--ease); }
.tile figcaption { transition: color var(--fast); }
.tile:hover, .js .tile.rv.in:hover { transform: translateY(-6px); }
.tile:hover figcaption { color: var(--white); }
.p-archveda .tile:hover figcaption { color: var(--black); }

/* The sideways hint leaves once the visitor has scrolled */
.hint { transition: opacity .5s var(--ease); }
.hint.gone { opacity: 0; }

@media (hover: none) {
  .tile:hover, .js .tile.rv.in:hover, .btn:hover, .service li:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv, .js img[loading="lazy"] { opacity: 1; transform: none; }
}

/* Cursor from the old site: a yellow dot that inverts what it passes over and grows on links */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
    width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
    background: var(--yellow); mix-blend-mode: difference;
    transition: width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease), background .2s, opacity .2s;
    opacity: 0;
  }
  .cursor.on { opacity: 1; }
  .cursor.hover { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: var(--white); }
}

/* ---------- Motion pass ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Big headings arrive word by word */
  /* Words are moved by the scroll loop; the hero heading, already on screen, rises in once on load */
  .js .w { display: inline-block; transform-origin: 0 100%; }
  .js .hero h1 { animation: none; }
  .js .hero .w { animation: rise .8s var(--ease) both; animation-delay: calc(var(--w, 0) * 70ms); }

  /* Footer letters: their scroll offset comes from --p (see the scroll-linked block) */
  .js .foot-word .l { display: inline-block; }
  .foot-word:hover .l { animation: hop .5s var(--ease) both; animation-delay: calc(var(--l) * 40ms); }

  /* Hero picture drifts as the page moves away from it */
  .hero-figure img { will-change: transform; }
}
@keyframes hop { 40% { transform: translateY(-.12em); } 100% { transform: none; } }

/* ---------- Interactive motion (mouse and trackpad only) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Cursor turns into a "View" disc over project pictures */
  .cursor::after { content: 'View'; position: absolute; inset: 0; display: grid; place-items: center;
    font: 700 13px/1 var(--text, inherit); color: var(--black); opacity: 0; transition: opacity .2s; }
  .cursor.view { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--yellow); mix-blend-mode: normal; }
  .cursor.view::after { opacity: 1; }

  /* Buttons and the email lean towards the pointer */
  .magnet { transition: transform .35s var(--ease); }

  /* Hero picture tilts with the pointer */
  .hero-figure { perspective: 900px; }
  .hero-figure img { transition: rotate .5s var(--ease); }

  /* Colour fields: a soft light follows the pointer */
  .service { position: relative; }
  .service::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%); }
  .service:hover::before { opacity: 1; }

  /* Work tiles tilt, and the picture inside shifts the other way */
  .wp-tiles a { display: block; transform-style: preserve-3d; transition: transform .4s var(--ease); }
  .wp-tiles a:hover .wp-frame img { transition: scale .6s var(--ease); }
  .wp-tiles a:hover .wp-frame img { scale: 1.1; }

  /* Footer word: each letter jumps when the pointer reaches it */
  .foot-word .l { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), color .2s; }
  .foot-word .l:hover { transform: translateY(-.14em) rotate(-4deg); color: var(--yellow); }

  /* The big numbers follow the pointer a little */
}

/* ---------- Scroll-linked motion: positions come from main.js; only the footer word uses CSS ---------- */
@media (prefers-reduced-motion: no-preference) {
  .scroll-motion .foot-word .l { translate: 0 calc(var(--p, 0) * (var(--l) + 1) * 0.1em); }
  .scroll-motion .panel .display, .scroll-motion .service h3, .scroll-motion .service ul, .scroll-motion .tile,
  .scroll-motion .pr-num, .scroll-motion .wp-frame img { will-change: translate; }
}