/* =========================================================================
   mehul's online — global stylesheet
   Design source: Figma "New Portfolio Project — Mehul" (canvas "Completed V1")
   Canvas reference width: 1414px
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts — all self-hosted from assets/fonts/.
   Caveat and Archivo Narrow are the only two still pulled from Google
   Fonts (see each page <head>); everything else ships with the site.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "NCS Radhiumz";
  src: url("../fonts/NCSRadhiumz.woff2") format("woff2"),
       url("../fonts/NCSRadhiumz.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Des Montilles";
  src: url("../fonts/DesMontilles.woff2") format("woff2"),
       url("../fonts/DesMontilles.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coconat";
  src: url("../fonts/Coconat-Regular.woff2") format("woff2"),
       url("../fonts/Coconat-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-Regular.woff2") format("woff2"),
       url("../fonts/Cabin-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-Medium.woff2") format("woff2"),
       url("../fonts/Cabin-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-SemiBold.woff2") format("woff2"),
       url("../fonts/Cabin-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-Bold.woff2") format("woff2"),
       url("../fonts/Cabin-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-Italic.woff2") format("woff2"),
       url("../fonts/Cabin-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-MediumItalic.woff2") format("woff2"),
       url("../fonts/Cabin-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-SemiBoldItalic.woff2") format("woff2"),
       url("../fonts/Cabin-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-BoldItalic.woff2") format("woff2"),
       url("../fonts/Cabin-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Figma variables */
  --my-blue: #120dba;
  --my-red: #f6051e;
  --my-yellow: #ffe627;

  /* Surfaces + text */
  --cream: #faf9f7;
  --ink: #1a1c1b;
  --grey: #5f5e5e;
  --divider: #ebebeb;
  --link-blue: #1c40cf;
  --white: #ffffff;

  /* Type stacks */
  --font-display: "NCS Radhiumz", "Archivo Black", "Arial Black", sans-serif;
  --font-script: "Des Montilles", "Caveat", "Brush Script MT", cursive;
  --font-serif: "Coconat", "Playfair Display", Georgia, serif;
  --font-body: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Des Montilles", cursive;
  --font-caption: "Archivo Narrow", "Cabin", sans-serif;

  /* Canvas */
  --canvas: 1414px;
  --gutter: clamp(20px, 10.25vw - 40px, 145px);
  --nav-h: 88px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   3. Reset
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.25;
  overflow-x: hidden;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

img,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

p { margin: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* UA stylesheets reset these on form controls; the footer bar relies on them */
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

ul { margin: 0; padding: 0; list-style: none; }

::selection {
  background: var(--my-yellow);
  color: var(--my-blue);
}

/* -------------------------------------------------------------------------
   4. Layout helpers
   ------------------------------------------------------------------------- */
.section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 35px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Grain / halftone overlay.
   The Figma comp layers a scanned paper texture at mix-blend-mode: overlay
   across every band. Drop the real scan at assets/img/texture-grain.png and it
   is used automatically; until then the SVG fractal noise below stands in. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
  opacity: 0.55;
  background-image: url("../img/texture-grain.jpg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 600px auto, 300px 300px;
}

/* Any element that is waiting on a real asset gets a legible, on-brand
   placeholder instead of a broken-image icon. */
.media {
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.06) 0 10px,
    rgba(0, 0, 0, 0.02) 10px 20px
  ), var(--cream);
}

.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 8px 10px;
  font-family: var(--font-caption);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--grey);
  background: rgba(250, 249, 247, 0.82);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   5. Top navigation
   ------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26.5px clamp(16px, 2.5vw, 35.34px);
  background: rgba(250, 249, 247, 0.8);
  backdrop-filter: blur(13.25px);
  -webkit-backdrop-filter: blur(13.25px);
  transition: transform 0.45s var(--ease-out);
}

.nav--hidden { transform: translateY(-101%); }

/* Wordmark — supplied as artwork (assets/img/logo-primary.png): the
   spray-painted script sits over the solid ONLINE, so it is one image. */
.wordmark {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.wordmark img {
  width: clamp(112px, 11vw, 150px);
  height: auto;
}

.nav__links {
  display: flex;
  gap: clamp(22px, 3.7vw, 53px);
  align-items: center;
}

.nav__link {
  font-size: 17.67px;
  letter-spacing: -0.88px;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  transition: color 0.25s var(--ease-soft);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Cpath d='M0 1.5q1.5-1.5 3 0t3 0 3 0 3 0' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Cpath d='M0 1.5q1.5-1.5 3 0t3 0 3 0 3 0' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

.nav__link:hover { color: var(--my-red); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-active {
  color: var(--my-red);
  text-decoration: underline wavy;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

.nav__link.is-active::after { display: none; }

/* -------------------------------------------------------------------------
   6. Hero (home)
   ------------------------------------------------------------------------- */
/* The hero canvas carries its own margins, so the section adds none. */
.hero {
  position: relative;
  background: var(--my-blue);
  isolation: isolate;
  overflow: hidden;
}

.hero__doodle {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  background: url("../img/hero-lines.png") center / contain no-repeat;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 4;
  max-width: 1175px;
  width: 100%;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.95vw, 98.17px);
  line-height: 0.945;
  text-transform: uppercase;
  margin-bottom: 0;
}

.hero__title .l-yellow { color: var(--my-yellow); display: block; }
.hero__title .l-red { color: var(--my-red); display: block; }
.hero__title .star { font-family: var(--font-script); }

.hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.74vw, 24.54px);
  color: var(--white);
  margin-top: 36px;
}

.hero__aside {
  position: absolute;
  top: 193px;
  right: clamp(12px, 3vw, 62px);
  width: 233px;
  transform: rotate(-4.91deg);
  font-family: var(--font-script);
  font-size: 29.45px;
  line-height: 26px;
  color: var(--white);
  z-index: 5;
}

/* Bouncing scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 5;
  width: 44px;
  height: 44px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  color: var(--my-red);
  animation: cue-bob 1.9s var(--ease-soft) infinite;
}

.scroll-cue svg { width: 44px; height: 44px; }

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* -------------------------------------------------------------------------
   7. Section headings
   ------------------------------------------------------------------------- */
.display-head {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
}

.section-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: clamp(70px, 9vw, 130px);
}

.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 51px);
  text-transform: uppercase;
  color: #000;
}

.section-head__note {
  font-family: var(--font-script);
  font-size: clamp(22px, 2.4vw, 34.4px);
  line-height: 1;
  color: #000;
  transform: rotate(-5.55deg);
  max-width: 360px;
}

/* -------------------------------------------------------------------------
   8. Selected work grid (home)
   ------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: 280px 549px 233px;
  gap: 35px;
  justify-content: center;
  align-items: start;
  padding-top: 20px;
}

.work-card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  background: var(--my-blue);
  transition: transform 0.5s var(--ease-out);
}

.work-card:hover { transform: translateY(-6px); }

/* NOTE TO DEV: "each project's thumbnail image gets shown when someone hovers
   on the buttons." Two shots are supplied per project — a black-and-white
   default and a full-colour hover — so the swap is a crossfade between them. */
.work-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.work-card__img--hover {
  opacity: 0;
  transition: opacity 0.55s var(--ease-soft);
}

.work-card:hover .work-card__img--hover,
.work-card:focus-visible .work-card__img--hover { opacity: 1; }

.work-card--sq { aspect-ratio: 1 / 1; }
.work-card--tall { aspect-ratio: 549 / 583; }
.work-card--slim { aspect-ratio: 233 / 583; }

.work-card__frame {
  position: absolute;
  inset: 18px;
  border: 2.3px solid var(--my-yellow);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}

.work-card__meta {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 40px 24px 36px;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.work-card__year {
  font-size: 20.4px;
  color: var(--cream);
}

.work-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28.65px;
  line-height: 1;
  color: var(--my-yellow);
  margin: auto 0;
}

.work-card__tag {
  font-size: 16px;
  color: var(--white);
}

/* Little handwritten aside next to the first card */
.work-aside {
  position: relative;
  max-width: 200px;
  margin: 14px 0 0 -30px;
  font-family: var(--font-script);
  font-size: 20px;
  line-height: 20px;
  transform: rotate(4.93deg);
}

.work-aside__arrow {
  position: absolute;
  left: 42px;
  top: -40px;
  width: 24px;
  height: 45px;
  color: #000;
}

/* Text link with a sliding arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--my-blue);
  font-size: 17.87px;
  text-transform: capitalize;
}

.arrow-link svg {
  width: 34px;
  height: 12px;
  transition: transform 0.35s var(--ease-out);
}

.arrow-link:hover svg { transform: translateX(8px); }

.arrow-link--right {
  display: flex;
  justify-content: flex-end;
  /* Figma puts the link 30px under the grid (grid ends 1800, link at 1830). */
  margin-top: 30px;
}

/* -------------------------------------------------------------------------
   9. "Hi, my name is Mehul" band (home)
   ------------------------------------------------------------------------- */
.about-band {
  position: relative;
  background: var(--my-yellow);
  /* Figma runs the yellow band from 1992 to 2901 — 909 tall, its own height,
     with 133px of white above it and 117px below. It used to carry those gaps
     as internal padding, which left the archive link jammed against its edge
     and the band 233px too tall. */
  margin: 133px 0 117px;
  padding: 0;
  isolation: isolate;
}

.about-band__tv {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../img/tv-frame.png") center / cover no-repeat;
  pointer-events: none;
}

.about-band__inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 585px 1fr;
  gap: 98px;
  align-items: center;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.about-band__figure {
  position: relative;
  aspect-ratio: 585 / 394;
  border-radius: 8px;
  overflow: hidden;
}

.about-band__figure .media__frame {
  position: absolute;
  inset: 14px;
  border: 2.3px solid var(--my-yellow);
  border-radius: 8px;
  z-index: 2;
}

.about-band__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 63.8px);
  line-height: 0.945;
  color: var(--my-blue);
}

.about-band__title .hl { color: var(--my-red); }

.about-band__lede {
  color: var(--my-blue);
  font-size: 25px;
  line-height: 1.25;
  margin-top: 26px;
  max-width: 424px;
}

.about-band__body {
  color: var(--my-blue);
  font-size: 16px;
  line-height: 1.25;
  margin-top: 22px;
  max-width: 430px;
}

/* -------------------------------------------------------------------------
   10. "How my brain works" band (home)
   ------------------------------------------------------------------------- */
/* Figma places this heading and its figure on the same left edge (x=213). */
.brain {
  position: relative;
  padding: clamp(70px, 9vw, 120px) 0 90px;
  background: var(--white);
}

.brain__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.64vw, 51.5px);
  text-transform: uppercase;
  color: #000;
}

.brain__figure {
  position: relative;
  max-width: 1026px;
  margin: 44px 0 0;
  aspect-ratio: 1026 / 663;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   11. Manifesto / quote band (home)
   ------------------------------------------------------------------------- */
.manifesto {
  position: relative;
  background: var(--my-blue);
  padding: clamp(90px, 11vw, 150px) 0;
  text-align: center;
  isolation: isolate;
}

.manifesto__inner {
  position: relative;
  z-index: 4;
  /* Figma gives the headline the full 1175px. The gutter is padding, so the
     box has to be that much wider or the text loses ~210px and wraps to five
     lines instead of the comp's four. */
  max-width: calc(1175px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.manifesto__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.95vw, 98.17px);
  line-height: 0.945;
  color: var(--white);
}

.manifesto__title .red { color: var(--my-red); }
.manifesto__title .yellow { color: var(--my-yellow); }

.manifesto__foot {
  color: var(--my-yellow);
  font-size: 16px;
  line-height: 23.56px;
  max-width: 387px;
  margin: 40px auto 0;
}

.manifesto__aside {
  position: absolute;
  right: clamp(16px, 6vw, 100px);
  bottom: 60px;
  z-index: 5;
  width: 443px;
  max-width: 42vw;
  transform: rotate(-5.84deg);
  font-family: var(--font-script);
  font-size: 25px;
  line-height: 23.56px;
  color: var(--white);
}

/* -------------------------------------------------------------------------
   12. CTA — "Ready to break the grid?"
   ------------------------------------------------------------------------- */
.cta {
  background: var(--cream);
  /* Figma's section is 832 tall: 235 + heading 207 + gap 47 + link 59 + 230.
     The bottom padding carries the 53px the removed whisper used to occupy,
     so the section keeps its height. */
  padding: 235px 31px 283px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 47px;
  text-align: center;
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 7.3vw, 103px);
  line-height: 1;
  letter-spacing: -0.076em;
  text-transform: uppercase;
  color: var(--ink);
}

.cta__link {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 58.9px);
  line-height: 1;
  color: var(--my-red);
  transition: transform 0.4s var(--ease-out);
}

.cta__link:hover { transform: translateY(-4px) rotate(-1.2deg); }

/* -------------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--cream);
  border-top: 1.1px solid rgba(26, 28, 27, 0.05);
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 35.34px;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 35.34px);
}

.footer__label {
  font-size: 13.25px;
  letter-spacing: 1.33px;
  text-transform: uppercase;
  color: var(--grey);
  line-height: 17.67px;
  margin-bottom: 17.67px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8.8px;
}

.footer__link {
  font-size: 22.09px;
  line-height: 30.92px;
  text-transform: uppercase;
  color: var(--grey);
  width: fit-content;
  transition: color 0.25s var(--ease-soft), transform 0.25s var(--ease-out);
}

.footer__link:hover {
  color: var(--my-red);
  transform: translateX(6px);
}

.footer__location {
  font-style: italic;
  font-size: 22.09px;
  line-height: 30.92px;
  color: var(--ink);
}

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--canvas);
  margin: 44px auto 0;
  padding: 0 clamp(16px, 2.5vw, 36px);
  font-size: 13.25px;
  letter-spacing: 2.65px;
  text-transform: uppercase;
  color: var(--grey);
  line-height: 17.67px;
}

.footer__bar button:hover { color: var(--my-red); }

/* Giant outro wordmark — the same supplied artwork, set large. */
.outro {
  position: relative;
  margin-top: 40px;
  padding: 0 clamp(16px, 3vw, 40px) clamp(20px, 3vw, 40px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.outro img {
  width: min(1090px, 100%);
  height: auto;
}

/* -------------------------------------------------------------------------
   14. Work page — case study rows
   ------------------------------------------------------------------------- */
/* The hero canvas carries its own margins, so the section adds none. */
.work-hero {
  position: relative;
  background: var(--my-blue);
  isolation: isolate;
  overflow: hidden;
}

.work-hero__doodle {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../img/works-doodle.png") center / cover no-repeat;
  pointer-events: none;
}

.work-hero__inner { position: relative; z-index: 4; }

.work-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 65px);
  line-height: 1.25;
  color: var(--my-yellow);
}

.work-hero__note {
  margin-top: 12px;
  max-width: 210px;
  transform: rotate(-5.8deg);
  font-family: var(--font-script);
  font-size: 25px;
  line-height: 1;
  color: var(--white);
}

.cs-row {
  display: flex;
  align-items: stretch;
  min-height: 800px;
  background: var(--white);
}

.cs-row__panel {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 20px;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
}

.cs-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cs-row__num {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.6px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
}

.cs-row__name {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.36px;
  text-align: right;
  color: #000;
}

.cs-row__desc {
  font-size: 16px;
  line-height: 1.3;
  color: #000;
  margin-bottom: 20px;
}

.cs-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--link-blue);
}

.cs-row__cta svg {
  width: 10px;
  height: 8px;
  transition: transform 0.3s var(--ease-out);
}

.cs-row:hover .cs-row__cta svg,
.cs-row__cta:hover svg { transform: translateX(6px); }

.cs-row__media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.cs-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.cs-row:hover .cs-row__media img { transform: scale(1.035); }

/* -------------------------------------------------------------------------
   15. About page
   ------------------------------------------------------------------------- */
/* The hero canvas carries its own margins, so the section adds none. */
.about-hero {
  position: relative;
  background: var(--my-red);
  isolation: isolate;
  overflow: hidden;
}

.about-hero__mark {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 100%;
}

.about-hero__mark img {
  width: min(1090px, 100%);
  height: auto;
}

/* The animated banner covers the hero exactly — the film carries its own red,
   so it replaces the plate instead of being centred on it. */
.about-hero__loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The film's own red is #ff083a, brighter than the site's --my-red. The
   section takes the film's value so nothing seams where the two meet —
   before the video paints, and around it once the hero goes portrait. */
.about-hero:has(.about-hero__loop) { background: #ff083a; }

/* The grain is a blend layer at z-index 3 and the mark sits at 4, so the
   banner would ride above the texture while the red around it took it —
   a visible seam. Drop the banner below the grain and both get it alike. */
.about-hero:has(.about-hero__loop) .about-hero__mark { z-index: 1; }

/* Figma gaps between the About sections: 139, 181, 198, 198. They live on the
   section wrappers so coloured bands (experience) stay exactly their own
   height, with the gap falling outside them. */
.about-intro {
  position: relative;
  margin-top: 139px;
  background: var(--white);
  z-index: 5;
}

.about-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.about-intro__kicker {
  font-family: var(--font-script);
  font-size: 40px;
  line-height: 1.25;
  color: var(--my-red);
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 40px;
}

.about-portrait {
  position: relative;
  max-width: 420px;
  aspect-ratio: 418 / 474;
  background: var(--my-yellow);
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 20px;
}

/* The looping "this is me" GIF/clip inside the taped frame */
/* The portrait ships with its hand-drawn frame already around it, so no
   border, radius or clipping here — that would crop the drawn edge. */
.about-portrait__media {
  position: relative;
  width: 330px;
  max-width: 100%;
}

.about-portrait__media img,
.about-portrait__media video {
  width: 100%;
  height: auto;
  display: block;
}


.spec-list {
  display: grid;
  grid-template-columns: 96px minmax(0, 340px);
  gap: 16px 20px;
  font-size: 16px;
  line-height: 1.25;
  color: #000;
}

.spec-list dt { font-weight: 700; }
.spec-list dd { margin: 0; }

.about-note {
  font-size: 16px;
  line-height: 1.25;
  max-width: 265px;
  color: #000;
}

/* Scrapbook collage */
.collage {
  position: relative;
  margin-top: 181px;
  background: var(--white);
}

.collage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  align-items: center;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.collage__item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 172 / 163;
  transition: transform 0.5s var(--ease-out);
}

.collage__item:nth-child(3n) { aspect-ratio: 172 / 225; }
.collage__item:nth-child(4n) { aspect-ratio: 204 / 152; border-radius: 50%; }
.collage__item:hover { transform: scale(1.05) rotate(-1.5deg); }

.education {
  position: relative;
  margin-top: 198px;
  background: var(--white);
}

.education__inner {
  display: grid;
  grid-template-columns: 335px 1fr;
  gap: 60px;
  align-items: start;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.education__title {
  font-family: var(--font-script);
  font-size: clamp(40px, 4.5vw, 64px);
  color: var(--my-blue);
  margin-bottom: 22px;
}

.education__body {
  font-size: 16px;
  line-height: 1.25;
  color: #000;
}

.education__figure {
  position: relative;
  aspect-ratio: 677 / 591;
  border-radius: 25px;
  overflow: hidden;
}

/* The education shot ships with its red frame already drawn in. */
.education__figure { border-radius: 8px; }

/* Experience table */
.experience {
  position: relative;
  margin-top: 198px;
  background: var(--my-blue);
  isolation: isolate;
}

.experience__inner {
  position: relative;
  z-index: 4;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: clamp(20px, 10.6vw, 150px);
}

.experience__title {
  font-family: var(--font-display);
  /* NCS Radhiumz is wide; 44px overflowed the narrow gutter column. */
  font-size: clamp(28px, 6.8vw, 96px);
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
}

.experience__resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 25px;
  font-size: 17.87px;
  text-transform: capitalize;
  color: var(--my-yellow);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-soft);
}

.experience__resume:hover { border-color: var(--my-yellow); }

.exp-table {
  max-width: 926px;
  margin-top: 25px;
}

.exp-table__head,
.exp-table__row {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr) 226px;
  gap: 16px;
  align-items: center;
  padding-inline: 20px;
}

.exp-table__head {
  background: var(--my-yellow);
  border-radius: 999px;
  padding-block: 16px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.72px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--my-blue);
}

.exp-table__row {
  padding-block: 20px;
  border-bottom: 1px dashed var(--cream);
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.2;
  color: var(--my-yellow);
}

.exp-table__head span:last-child,
.exp-table__row span:last-child { text-align: right; }

/* -------------------------------------------------------------------------
   16. Case study pages
   ------------------------------------------------------------------------- */
.cs-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 120px) var(--gutter) 80px;
  background: var(--my-blue);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}

.cs-hero--red { background: var(--my-red); }
.cs-hero--yellow { background: var(--my-yellow); color: var(--my-blue); }

.cs-hero__inner { position: relative; z-index: 4; max-width: 1130px; }

.cs-hero__num {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.85;
}

.cs-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.2vw, 88px);
  line-height: 0.95;
  text-transform: uppercase;
  margin-top: 18px;
}

.cs-hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 25px);
  margin-top: 26px;
  max-width: 760px;
}

.cs-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  max-width: var(--canvas);
  margin-inline: auto;
  padding: 60px var(--gutter);
  border-bottom: 1px solid var(--divider);
}

.cs-meta__label {
  font-family: var(--font-caption);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}

.cs-meta__value {
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
}

.cs-block {
  max-width: var(--canvas);
  margin-inline: auto;
  padding: clamp(50px, 6vw, 90px) var(--gutter);
}

.cs-block__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 45px);
  text-transform: uppercase;
  color: var(--my-blue);
  margin-bottom: 24px;
}

.cs-block__body {
  font-size: 18px;
  line-height: 1.5;
  max-width: 720px;
  color: var(--ink);
}

.cs-block__body + .cs-block__body { margin-top: 18px; }

.cs-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1414 / 800;
  overflow: hidden;
}

.cs-figure--tall { aspect-ratio: 881 / 541; }

.cs-caption {
  font-family: var(--font-caption);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--grey);
  padding: 14px var(--gutter) 0;
  max-width: var(--canvas);
  margin-inline: auto;
}

.cs-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
}

.cs-gallery .cs-figure { aspect-ratio: 881 / 541; }

/* Video slot — matches the blank frames left in the Figma comp */

/* -------------------------------------------------------------------------
   17. Slideshow (per dev notes on case studies 1, 4 and 5)
   ------------------------------------------------------------------------- */
.slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 1414 / 800;
  overflow: hidden;
  background: var(--cream);
}

.slideshow--grid { aspect-ratio: 881 / 541; }

.slideshow__track {
  position: absolute;
  inset: 0;
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}

.slideshow__slide.is-active { opacity: 1; }

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.slideshow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250, 249, 247, 0.45);
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}

.slideshow__dot.is-active {
  background: var(--my-yellow);
  transform: scale(1.35);
}

.slideshow__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cream);
  background: rgba(26, 28, 27, 0.35);
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}

.slideshow:hover .slideshow__nav { opacity: 1; }
.slideshow__nav:hover { background: var(--my-red); }
.slideshow__nav--prev { left: 16px; }
.slideshow__nav--next { right: 16px; }

/* -------------------------------------------------------------------------
   18. Project index hover-preview (dev note on the home "Selected Work" list)
   ------------------------------------------------------------------------- */
.hover-list { position: relative; }

.hover-list__preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 320px;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.3s var(--ease-soft), transform 0.4s var(--ease-out);
}

.hover-list__preview.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hover-list__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   19. Scroll-reveal (minimalist default animation)
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .work-grid > *:first-child { grid-column: 1 / -1; max-width: 420px; }

  .about-band__inner,
  .about-intro__inner,
  .education__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .cs-row { flex-direction: column; min-height: 0; }
  .cs-row__panel { flex: 0 0 auto; width: 100%; }
  .cs-row__media { width: 100%; aspect-ratio: 16 / 10; }

  .exp-table__head,
  .exp-table__row { grid-template-columns: 1fr 1fr; }
  .exp-table__head span:nth-child(2),
  .exp-table__row span:nth-child(2) { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 760px) {
  :root { --nav-h: 72px; }

  .nav { padding: 16px; }
  .nav__links { gap: 18px; }
  .nav__link { font-size: 14px; }
  .wordmark__solid { font-size: 20px; margin-top: 15px; }
  .wordmark__script { font-size: 40px; }

  .hero,
  .work-hero,
  .about-hero { min-height: 640px; }

  /* Both asides are rotated, so they need room for the corners they throw out. */
  .hero__aside {
    position: static;
    width: auto;
    max-width: 260px;
    margin: 28px auto 0;
    font-size: 24px;
  }

  /* Narrow enough that the rotated bounding box still clears the viewport. */
  .manifesto__aside {
    position: static;
    width: auto;
    max-width: 300px;
    margin: 36px auto 0;
    font-size: 21px;
  }

  .work-grid { grid-template-columns: 1fr; }
  .work-grid > *:first-child { max-width: none; }
  .work-card--tall, .work-card--slim, .work-card--sq { aspect-ratio: 4 / 3; }

  /* The desktop offset hangs this note off the left edge on narrow screens. */
  .work-aside { margin-left: 0; padding-left: 34px; }
  .work-aside__arrow { left: 4px; top: -34px; }

  .collage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cta { padding: 110px 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__bar { justify-content: flex-start; gap: 10px; }

  .spec-list { grid-template-columns: 1fr; gap: 4px 0; }
  .spec-list dd { margin-bottom: 12px; }

  .experience { padding: 90px 0; }
  .education__figure .media__frame { border-width: 14px; inset: 12px; }
}

/* -------------------------------------------------------------------------
   21. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
}

/* -------------------------------------------------------------------------
   22. Case study — prev / next pager
   ------------------------------------------------------------------------- */
.cs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--canvas);
  margin-inline: auto;
  padding: 70px var(--gutter);
  border-top: 1px solid var(--divider);
}

.cs-pager__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--my-blue);
}

.cs-pager__link svg {
  width: 34px;
  height: 12px;
  transition: transform 0.35s var(--ease-out);
}

.cs-pager__link--prev svg { transform: scaleX(-1); }
.cs-pager__link--prev:hover svg { transform: scaleX(-1) translateX(8px); }
.cs-pager__link--next:hover svg { transform: translateX(8px); }

.cs-pager__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--grey);
}

/* Two-up figure row inside a case study */
.cs-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: var(--canvas);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.cs-duo .cs-figure { aspect-ratio: 462 / 319; }

/* Full-bleed band inside a case study */
.cs-bleed {
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
}

.cs-bleed + .cs-caption { padding-top: 12px; }

/* -------------------------------------------------------------------------
   23. Supplied-artwork adjustments
   ------------------------------------------------------------------------- */

/* The illustrated "me working" card is artwork, not a project link. */
.work-card--static { cursor: default; }
.work-card--static:hover { transform: none; }
.work-card--static .work-card__frame { display: none; }

/* Collage pieces are photographs; the rounding and the ellipse masks are
   applied here rather than baked into the files. */
.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   24. About-page scrapbook — positioned exactly as laid out in Figma
   (canvas 1414 wide, band y=1847..2511). Percentages keep the whole
   arrangement in proportion as the page scales.
   ------------------------------------------------------------------------- */
.scrapbook {
  position: relative;
  width: 100%;
  max-width: 1414px;
  margin-inline: auto;
  aspect-ratio: 1414 / 664;
}

.scrapbook__item {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.5s var(--ease-out), z-index 0s;
}

.scrapbook__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrapbook__item:hover { transform: scale(1.06) rotate(-1.5deg); z-index: 5; }

.scrapbook__item--ell { border-radius: 50%; }

.scrapbook__note {
  position: absolute;
  font-size: 16px;
  line-height: 1.25;
  color: #000;
}

.scrapbook__item--05 { left: 72.984%; top: 1.054%; width: 12.164%; height: 24.548%; }
.scrapbook__item--06 { left: 37.482%; top: 1.054%; width: 12.164%; height: 24.548%; }
.scrapbook__item--08 { left: 54.243%; top: 0.0%; width: 12.023%; height: 25.602%; }
.scrapbook__item--04 { left: 28.289%; top: 35.392%; width: 12.164%; height: 33.886%; }
.scrapbook__item--01 { left: 43.918%; top: 38.404%; width: 14.851%; height: 24.548%; }
.scrapbook__item--02 { left: 62.659%; top: 33.735%; width: 12.164%; height: 33.283%; }
.scrapbook__item--10 { left: 9.76%; top: 35.392%; width: 14.427%; height: 22.892%; }
.scrapbook__item--09 { left: 79.066%; top: 35.392%; width: 10.962%; height: 29.97%; }
.scrapbook__item--03 { left: 9.194%; top: 65.211%; width: 14.144%; height: 24.548%; }
.scrapbook__item--07 { left: 28.289%; top: 75.452%; width: 8.769%; height: 24.548%; }
.scrapbook__item--11 { left: 41.655%; top: 75.452%; width: 14.427%; height: 22.892%; }

.scrapbook__note--a { left: 16.266%; top: 7.982%; width: 18.6%; }
.scrapbook__note--b { left: 62.659%; top: 77.56%; width: 18.105%; }

/* Below the fold width the absolute arrangement stops working; fall back
   to a simple flowing grid. */
@media (max-width: 1024px) {
  .scrapbook {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-inline: var(--gutter);
  }

  .scrapbook__item, .scrapbook__note {
    position: static;
    width: auto; height: auto;
  }

  .scrapbook__item { aspect-ratio: 1 / 1; }
  .scrapbook__note { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   25. Figma canvas
   The comp is a fixed 1414px canvas with everything absolutely placed. These
   sections reproduce that geometry directly: percentages off the real x/y/w/h,
   and type sized in `cqi` (1cqi = 1% of the canvas width) so the whole
   composition scales as one piece. Below 860px each canvas releases into
   normal flow — see the fallbacks at the end of this block.
   ------------------------------------------------------------------------- */
.fig {
  position: relative;
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  container-type: inline-size;
}

.fig > * { position: absolute; margin: 0; }

/* ---- Hero (canvas 1414 x 936) ---- */
.fig--hero { aspect-ratio: 1414 / 936; }

.fig--hero .hero__art {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

.fig--hero .hero__title {
  left: 6.93%; top: 25.43%; width: 83.10%;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 6.943cqi;
  line-height: 0.945;
  text-align: center;
  text-transform: uppercase;
}

.fig--hero .hero__sub {
  left: 23.41%; top: 71.15%; width: 53.53%;
  z-index: 4;
  font-family: var(--font-serif);
  font-size: 1.736cqi;
  color: var(--white);
  text-align: center;
}

.fig--hero .hero__aside {
  left: 79.07%; top: 22.75%; width: 16.53%;
  z-index: 5;
  transform: rotate(-4.91deg);
  font-family: var(--font-script);
  font-size: 2.083cqi;
  line-height: 1.15;
  color: var(--white);
  text-align: center;
}

.fig--hero .scroll-cue {
  left: 50%; top: 88.03%;
  translate: -50% 0;
  bottom: auto;
}

/* ---- "Hi, my name is Mehul" band (canvas 1414 x 902, page y0 = 1993) ---- */
.fig--band { aspect-ratio: 1414 / 902; }

/* The TV is hand-drawn artwork; the photo sits inside its screen. */
.fig--band .band__tv {
  left: -0.07%; top: 0.66%;
  width: 100%; height: 100%;
  object-fit: fill;
  z-index: 2;
}

.fig--band .band__photo {
  left: 10.78%; top: 27.40%;
  width: 41.34%; height: 43.64%;
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
}

.fig--band .band__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.fig--band .band__inner-frame {
  left: 11.88%; top: 28.94%;
  width: 39.18%; height: 40.47%;
  z-index: 3;
  border: 0.162cqi solid var(--my-yellow);
  border-radius: 4px;
  pointer-events: none;
}

.fig--band .band__title {
  left: 59.05%; top: 21.51%; width: 30.98%;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 4.513cqi;
  line-height: 0.945;
  color: var(--my-blue);
}

.fig--band .band__title .hl { color: var(--my-red); }

.fig--band .band__lede {
  left: 59.05%; top: 45.68%; width: 29.99%;
  z-index: 4;
  font-size: 1.768cqi;
  line-height: 1.25;
  color: var(--my-blue);
}

.fig--band .band__p2 { left: 59.05%; top: 59.42%; width: 30.41%; }
.fig--band .band__p3 { left: 59.05%; top: 68.07%; width: 30.34%; }

.fig--band .band__p2,
.fig--band .band__p3 {
  z-index: 4;
  font-size: max(11px, 1.132cqi);
  line-height: 1.25;
  color: var(--my-blue);
}

/* ---- "This is how my brain works" (canvas 1414 x 840, page y0 = 3018) ---- */
.fig--brain { aspect-ratio: 1414 / 840; }

.fig--brain .brain__title {
  left: 15.06%; top: 0; width: 81.26%;
  font-family: var(--font-display);
  font-size: 3.642cqi;
  text-transform: uppercase;
  color: #000;
}

.fig--brain .brain__figure {
  left: 15.06%; top: 11.43%;
  width: 72.55%; height: 78.93%;
}

.fig--brain .brain__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Figma places this link here, under the process illustration — not in the
   yellow band above it. */
.fig--brain .brain__link {
  left: 69.02%; top: 93.81%;
  font-size: 1.264cqi;
}

/* ---- Below 860px the fixed canvas stops making sense ---- */
@media (max-width: 1024px) {
  .fig,
  .fig--hero,
  .fig--band,
  .fig--brain { aspect-ratio: auto; container-type: normal; }

  .fig > * { position: static; }

  .fig--hero { min-height: 78vh; display: flex; flex-direction: column;
               justify-content: center; gap: 22px; padding: 90px var(--gutter) 60px; }
  .fig--hero .hero__art { position: absolute; inset: 0; opacity: 0.9; }
  .fig--hero .hero__title { font-size: clamp(34px, 8.6vw, 62px); }
  .fig--hero .hero__sub   { font-size: 16px; }
  .fig--hero .hero__aside { font-size: 20px; max-width: 260px; margin-inline: auto; }
  .fig--hero .scroll-cue  { position: static; translate: none; margin-inline: auto; }

  .fig--band { display: flex; flex-direction: column; gap: 20px; padding: 40px var(--gutter); }
  .fig--band .band__tv { display: none; }
  .fig--band .band__photo { aspect-ratio: 585 / 394; border: 6px solid var(--my-red); }
  .fig--band .band__inner-frame { display: none; }
  .fig--band .band__title { font-size: clamp(30px, 8vw, 48px); }
  .fig--band .band__lede  { font-size: 19px; }
  .fig--band .band__p2, .fig--band .band__p3 { font-size: 15px; }

  .fig--brain { display: flex; flex-direction: column; gap: 18px; padding: 40px var(--gutter); }
  .fig--brain .brain__title { font-size: clamp(24px, 6.4vw, 40px); }
  .fig--brain .brain__figure { aspect-ratio: 1026 / 663; }
  .fig--brain .brain__link { font-size: 16px; align-self: flex-end; }
}

/* -------------------------------------------------------------------------
   26. Footer (canvas 1414 x 751)
   The wordmark sits BETWEEN the link columns and the bottom bar, overlapping
   both — it is a layered composition, not a stack.
   ------------------------------------------------------------------------- */
.fig--footer { aspect-ratio: 1414 / 751; }

.fig--footer .footer__cols {
  left: 2.497%; top: 11.917%; width: 95.000%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5%;
}

/* Figma's y=297 is the text box top; the 436px script overflows well above
   it, and the supplied PNG carries that overflow as padding. Seated so the
   artwork's visible extent lands where the comp puts it, clear of the bar. */
.fig--footer .footer__mark {
  left: 11.103%; top: 27.0%; width: 76.902%;
  z-index: 1;
}

.fig--footer .footer__mark img { width: 100%; height: auto; }

.fig--footer .footer__bar {
  left: 2.546%; top: 88.682%; width: 95.000%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: max(11px, 0.937cqi);
  letter-spacing: 0.187cqi;
  line-height: 1.333;
  text-transform: uppercase;
  color: var(--grey);
}

.fig--footer .footer__label {
  font-size: max(11px, 0.937cqi);
  letter-spacing: 0.094cqi;
  line-height: 1.333;
  margin-bottom: 1.25cqi;
}

.fig--footer .footer__link,
.fig--footer .footer__location {
  font-size: 1.562cqi;
  line-height: 1.4;
}

.fig--footer .footer__links { gap: 0.625cqi; }

@media (max-width: 1024px) {
  .fig--footer { aspect-ratio: auto; container-type: normal; padding: 40px var(--gutter) 24px; }
  .fig--footer > * { position: static; width: auto; }
  .fig--footer .footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .fig--footer .footer__mark { margin: 32px 0; }
  .fig--footer .footer__label { font-size: 12px; letter-spacing: 1.2px; margin-bottom: 14px; }
  .fig--footer .footer__link,
  .fig--footer .footer__location { font-size: 19px; }
  .fig--footer .footer__bar { flex-wrap: wrap; gap: 10px; font-size: 11px; letter-spacing: 1.6px; }
}

/* -------------------------------------------------------------------------
   27. About page — Figma canvas (frame 1414 x 6017)
   Section origins on that canvas: hero 0, about-me 1075, scrapbook 1847,
   education 2709, experience 3498.
   ------------------------------------------------------------------------- */

/* The wordmark artwork is centred on its Figma group box; the PNG carries the
   script's overflow as padding, so seat it by centre rather than by top edge. */
.fig--footer .footer__mark,
.fig--abouthero .about-hero__mark {
  left: 50%;
  width: 76.902%;
  translate: -50% -50%;
}

/* With the loop in place the mark is no longer a centred 1087px wordmark —
   it is the full 1414x936 frame, pinned to the canvas. */
.fig--abouthero .about-hero__mark:has(.about-hero__loop) {
  left: 0; top: 0;
  width: 100%; height: 100%;
  translate: none;
}
.fig--footer .footer__mark      { top: 58.0%; }   /* group centre y=435.5 / 751 */
.fig--abouthero .about-hero__mark { top: 50.05%; } /* group centre y=468.5 / 936 */

/* ---- Hero (1414 x 936) ---- */
.fig--abouthero { aspect-ratio: 1414 / 936; }
.fig--abouthero .about-hero__mark img { width: 100%; height: auto; }
.fig--abouthero .scroll-cue {
  left: 50%; top: 88.03%;
  translate: -50% 0;
  bottom: auto;
  color: var(--white);
}

/* ---- "about me :" + portrait + spec list (1414 x 591, origin y=1075) ---- */
.fig--aboutme { aspect-ratio: 1414 / 591; }

.fig--aboutme .aboutme__kicker {
  left: 45.19%; top: 0; width: 20%;
  font-family: var(--font-script);
  font-size: 2.829cqi;
  line-height: 1.25;
  color: var(--my-red);
}

.fig--aboutme .aboutme__plate {
  left: 16.62%; top: 19.80%;
  width: 29.60%; height: 80.20%;
  background: var(--my-yellow);
  border-radius: 6px;
}

.fig--aboutme .aboutme__portrait {
  left: 18.48%; top: 23.14%;
  width: 25.98%; height: 73.55%;
}

.fig--aboutme .aboutme__portrait img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.fig--aboutme .spec-list {
  left: 49.40%; top: 19.80%; width: 32.21%;
  display: grid;
  grid-template-columns: 6.79cqi 1fr;
  column-gap: 1.414cqi;
  row-gap: 1.132cqi;
  font-size: max(11px, 1.132cqi);
  line-height: 1.25;
  color: #000;
}

.fig--aboutme .spec-list dt { font-weight: 700; text-transform: uppercase; }
.fig--aboutme .spec-list dd { margin: 0; }

/* ---- Scrapbook: hand-drawn outlines sit over the pieces ---- */
/* Geometry solved by matching the 11 outline blobs in the artwork to the 11
   image positions (least-squares fit, max residual 2px). The overlay sits
   larger than the image band because the sparkle dashes extend past the
   frames themselves. */
.scrapbook__frames {
  position: absolute;
  left: 4.577%; top: -6.942%;
  width: 86.538%; height: 108.958%;
  z-index: 4;
  pointer-events: none;
}

.scrapbook__frames img { width: 100%; height: 100%; object-fit: fill; }

/* ---- Education (1414 x 591, origin y=2709) ---- */
.fig--education { aspect-ratio: 1414 / 591; }

.fig--education .education__figure {
  left: 37.70%; top: 0;
  width: 47.88%; height: 100%;
}

.fig--education .education__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.fig--education .education__title {
  left: 10.54%; top: 48.0%; width: 25%;
  font-family: var(--font-script);
  font-size: 4.526cqi;
  line-height: 1;
  color: var(--my-blue);
  margin: 0;
}

.fig--education .education__body {
  left: 10.54%; top: 62.94%; width: 23.69%;
  font-size: max(11px, 1.132cqi);
  line-height: 1.25;
  color: #000;
}

/* ---- Experience (1414 x 936, origin y=3498) ---- */
.fig--experience { aspect-ratio: 1414 / 936; }

.fig--experience .experience__title {
  left: 10.61%; top: 13.41%; width: 78.78%;
  font-size: 6.789cqi;
  line-height: 0.8;
  letter-spacing: -0.01em;
}

.fig--experience .experience__resume {
  left: 10.61%; top: 24.31%;
  font-size: 1.264cqi;
  margin: 0;
}

.fig--experience .exp-table {
  left: 10.61%; top: 30.08%; width: 65.49%;
  margin: 0;
  max-width: none;
}

.fig--experience .exp-table__head {
  padding: 1.132cqi 1.414cqi;
  font-size: max(11px, 0.849cqi);
  letter-spacing: 0.051cqi;
}

.fig--experience .exp-table__row {
  padding: 1.414cqi 1.414cqi;
  font-size: 1.697cqi;
}

.fig--experience .exp-table__head,
.fig--experience .exp-table__row {
  grid-template-columns: 24.4% 1fr 24.4%;
  gap: 1.132cqi;
}

@media (max-width: 1024px) {
  .fig--abouthero, .fig--aboutme, .fig--education, .fig--experience {
    aspect-ratio: auto; container-type: normal;
  }
  .fig--abouthero > *, .fig--aboutme > *, .fig--education > *, .fig--experience > * {
    position: static; width: auto; height: auto;
  }

  .fig--abouthero { min-height: 62vh; display: grid; place-items: center;
                    padding: 90px var(--gutter) 40px; }
  .fig--abouthero .about-hero__mark { translate: none; width: 100%; }
  /* The banner is a 1.51 landscape frame and the hero goes portrait here, so
     covering it would crop "mehul's ONLINE" down to "ehul / ONLIN". The film
     keeps its own ratio instead and the matching red fills around it. */
  .about-hero__loop {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1414 / 936;
    object-fit: contain;
  }
  .fig--abouthero .scroll-cue { translate: none; margin-top: 24px; }

  .fig--aboutme { margin-top: 40px; display: flex; flex-direction: column;
                  gap: 22px; padding: 0 var(--gutter); }
  .fig--aboutme .aboutme__kicker { font-size: 30px; text-align: center; }
  .fig--aboutme .aboutme__plate { display: none; }
  .fig--aboutme .aboutme__portrait { max-width: 330px; margin-inline: auto;
                                     background: var(--my-yellow); padding: 14px;
                                     border-radius: 6px; }
  .fig--aboutme .spec-list { grid-template-columns: 1fr; row-gap: 2px;
                             font-size: 15px; }
  .fig--aboutme .spec-list dd { margin-bottom: 12px; }

  .scrapbook__frames { display: none; }

  .fig--education { margin-top: 40px; display: flex; flex-direction: column;
                    gap: 18px; padding: 0 var(--gutter); }
  .fig--education .education__title { font-size: 40px; }
  .fig--education .education__body  { font-size: 15px; }

  .fig--experience { display: flex; flex-direction: column; gap: 16px;
                     padding: 0 var(--gutter); }
  .fig--experience .experience__title { font-size: clamp(28px, 9vw, 60px); }
  .fig--experience .experience__resume { font-size: 16px; }
  .fig--experience .exp-table__head,
  .fig--experience .exp-table__row { grid-template-columns: 1fr 1fr; font-size: 15px;
                                     padding: 14px 12px; }
  .fig--experience .exp-table__head span:nth-child(2),
  .fig--experience .exp-table__row span:nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* -------------------------------------------------------------------------
   28. Work page — Figma canvas (frame 1414 x 6522)
   Hero 0..936, then five 1414x800 rows butted together from y=936.
   ------------------------------------------------------------------------- */
.fig--workhero { aspect-ratio: 1414 / 936; }

/* The illustration is placed at x=243 and runs past the right edge, so the
   section clips it. */
.fig--workhero .workhero__art {
  left: 17.185%; top: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  z-index: 1;
}

.fig--workhero .work-hero__title {
  left: 7.355%; top: 45.299%; width: 29.632%;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 4.597cqi;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--my-yellow);
  margin: 0;
}

.fig--workhero .work-hero__note {
  left: 25.460%; top: 54.373%; width: 14.784%;
  z-index: 4;
  transform: rotate(-5.8deg);
  font-family: var(--font-script);
  font-size: 1.768cqi;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}

/* ---- Case-study rows (1414 x 800 each) ---- */
.cs-row {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  aspect-ratio: 1414 / 800;
  min-height: 0;
  container-type: inline-size;
  background: var(--white);
}

.cs-row__panel {
  flex: 0 0 22.630%;            /* 320 / 1414 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.414cqi;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
}

.cs-row__num  { font-size: max(11px, 0.707cqi); letter-spacing: 0.042cqi; white-space: nowrap; flex: 0 0 auto; }
.cs-row__name { font-size: 1.273cqi; letter-spacing: -0.025cqi; }
.cs-row__desc { font-size: max(11px, 1.132cqi); line-height: 1.3; margin-bottom: 1.414cqi; }
.cs-row__cta  { font-size: max(11px, 1.132cqi); line-height: 1.3; }
.cs-row__cta svg { width: 0.707cqi; height: 0.566cqi; }

.cs-row__media { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; }

@media (max-width: 1024px) {
  .fig--workhero { aspect-ratio: auto; container-type: normal;
                   min-height: 62vh; display: flex; flex-direction: column;
                   justify-content: center; gap: 10px; padding: 96px var(--gutter) 48px; }
  .fig--workhero > * { position: static; width: auto; height: auto; }
  .fig--workhero .workhero__art { position: absolute; inset: 0; opacity: 0.85; }
  .fig--workhero .work-hero__title { font-size: clamp(34px, 9vw, 60px); }
  .fig--workhero .work-hero__note  { font-size: 20px; max-width: 240px; }

  .cs-row { aspect-ratio: auto; container-type: normal; flex-direction: column; }
  .cs-row__panel { flex: 0 0 auto; width: 100%; padding: 20px var(--gutter); gap: 20px; }
  .cs-row__num  { font-size: 10px; letter-spacing: 0.6px; }
  .cs-row__name { font-size: 18px; }
  .cs-row__desc { font-size: 15px; margin-bottom: 16px; }
  .cs-row__cta  { font-size: 15px; }
  .cs-row__cta svg { width: 10px; height: 8px; }
  .cs-row__media { width: 100%; aspect-ratio: 16 / 10; }
}

/* Figma's generous section gaps are too much on a phone. */
@media (max-width: 1024px) {
  .about-intro { margin-top: 48px; }
  .collage     { margin-top: 56px; }
  .education   { margin-top: 56px; }
  .experience  { margin-top: 56px; padding-block: 48px; }
}

/* -------------------------------------------------------------------------
   29. Case-study hero with a photograph behind it
   ------------------------------------------------------------------------- */
.cs-hero--photo { isolation: isolate; }

.cs-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Keeps the headline legible over the photograph. */
.cs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(18, 13, 186, 0.55) 0%,
    rgba(18, 13, 186, 0.72) 55%,
    rgba(18, 13, 186, 0.88) 100%);
}

/* -------------------------------------------------------------------------
   30. Case-study footer: previous / current / next thumbnails
   Figma (CS1, y=10701..11061): three 463x319 cards edge to edge, with
   "Previously" bottom-left at x=31 and "Up Next" bottom-right at x=1276.
   ------------------------------------------------------------------------- */
.cs-more {
  position: relative;
  width: 100%;
  max-width: var(--canvas);
  /* Figma's gap between the last body block and the cards, per case study. */
  margin: min(var(--more-gap-pc, 13.79%), var(--more-gap, 195px)) auto 0;
  aspect-ratio: 1414 / 360;
  container-type: inline-size;
}

.cs-more > * { position: absolute; margin: 0; }

.cs-more__card {
  top: 0;
  height: 88.61%;
  overflow: hidden;
  display: block;
}

.cs-more__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.cs-more__card:hover img { transform: scale(1.04); }

.cs-more__card--prev { left: 0.14%;  width: 32.74%; }
.cs-more__card--this { left: 33.73%; width: 32.67%; }
.cs-more__card--next { left: 67.26%; width: 32.74%; }

.cs-more__label {
  top: 93.89%;
  display: inline-flex;
  align-items: center;
  gap: 0.707cqi;
  font-size: max(11px, 1.132cqi);
  color: var(--my-blue);
}

.cs-more__label svg { width: 2.369cqi; height: 0.85cqi; }
.cs-more__label--prev { left: 2.19%; }
.cs-more__label--next { left: 90.24%; }
.cs-more__label--prev svg { transform: scaleX(-1); }
.cs-more__label--prev:hover svg { transform: scaleX(-1) translateX(6px); }
.cs-more__label--next:hover svg { transform: translateX(6px); }
.cs-more__label svg { transition: transform 0.35s var(--ease-out); }

@media (max-width: 1024px) {
  .cs-more { aspect-ratio: auto; container-type: normal;
             display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
             padding: 0 var(--gutter); }
  .cs-more > * { position: static; width: auto; height: auto; }
  .cs-more__card { aspect-ratio: 463 / 319; }
  .cs-more__card--this { display: none; }
  .cs-more__label { font-size: 15px; }
  .cs-more__label svg { width: 26px; height: 10px; }
}

/* -------------------------------------------------------------------------
   31. Case-study body — Figma canvas (CS1 frame 1414 x 12676)
   Vertical margins are percentages, which resolve against the container's
   WIDTH, so the whole page scales proportionally. Type is sized in cqi.
   ------------------------------------------------------------------------- */
.cs-body {
  position: relative;
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  container-type: inline-size;
  background: var(--white);
}

.cs-body > * { margin-left: 0; }

/* Full-bleed photograph with its credit set over the bottom-right corner */
.cs-shot {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cs-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cs-shot__credit {
  position: absolute;
  right: 2.83%;
  bottom: 3.4%;
  width: 27%;
  margin: 0;
  font-size: max(11px, 0.99cqi);
  line-height: 1.35;
  text-align: right;
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Some full-bleed images are artwork on white, where a white credit would
   vanish — those carry their credit in ink instead. */
.cs-shot__credit--dark { color: var(--ink); text-shadow: none; }

/* Inset plate: an image that sits in from the edges, credit beneath it.
   The credit is taken out of flow so the figure's flow height is exactly the
   plate height — that keeps every gap below it equal to the gap in the comp. */
.cs-fig { position: relative; }
.cs-plate { position: relative; }
.cs-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cs-credit {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.71cqi);
  margin: 0;
  font-size: max(11px, 0.92cqi);
  line-height: 1.35;
  color: var(--ink);
  text-align: right;
}

.cs-credit--left { text-align: left; }

/* Section: a small letterspaced label with a body paragraph under it */
.cs-sec__label {
  margin: 0 0 2.83%;
  font-size: max(11px, 0.99cqi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.cs-sec__body {
  margin: 0;
  font-size: 1.414cqi;
  line-height: 1.5;
  color: var(--ink);
}

/* A section that runs to two paragraphs breaks them by one line of leading. */
.cs-sec__body + .cs-sec__body { margin-top: 2.122cqi; }

/* Client / role / type, alongside the standfirst.
   Percentages here resolve against the 1179px-wide block, not the canvas. */
.cs-meta2 { display: flex; gap: 4.241%; }
.cs-meta2__col { flex: 0 0 29.517%; }

.cs-meta2__label {
  margin: 0;
  font-size: max(11px, 0.85cqi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--my-red);
}

.cs-meta2__value {
  margin: 0.17% 0 2.205%;
  font-size: max(11px, 1.13cqi);
  line-height: 1.4;
  color: var(--ink);
}
.cs-meta2__value:last-child { margin-bottom: 0; }

.cs-meta2__lede {
  flex: 1 1 auto;
  /* Figma drops the standfirst a little below the column, by a different
     amount on each case study. */
  margin: var(--lede-top, 1.824%) 0 0;
  font-size: 1.414cqi;
  line-height: 1.5;
  color: var(--ink);
}

/* Two plates side by side */
.cs-duo2 { display: flex; }
.cs-duo2 > * { margin: 0; }

/* Hero: photograph with the title set over its right side, no scrim */
.cs-hero2 { position: relative; width: 100%; overflow: hidden; }
.cs-hero2 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figma draws every case-study title at 100px (7.072cqi) into a fixed box —
   799x418 on studies 1, 4 and 5, 888x418 on 2 and 3 — bottom-aligned, and
   lets it wrap. The size is the constant; only the box travels per page. */
.cs-hero2__title {
  position: absolute;
  left: var(--title-x, 35.149%);
  top: var(--title-y, 50.050%);
  width: var(--title-w, 56.506%);
  height: var(--title-h, 41.926%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
  font-family: var(--font-display);
  font-size: 7.072cqi;
  line-height: 0.95;
  text-align: right;
  text-transform: uppercase;
  color: var(--white);
}

@media (max-width: 1024px) {
  .cs-body { container-type: normal; }
  .cs-body > * { min-height: 0 !important;
                 margin-left: var(--gutter) !important;
                 margin-right: var(--gutter);
                 width: auto !important; }
  .cs-body > .cs-shot, .cs-body > .cs-hero2 { margin-left: 0 !important; margin-right: 0; }
  /* The title drops out of the photograph and sits under it in a blue block, so
     the hero has to stop being a fixed-ratio box and stop clipping. */
  .cs-hero2 { aspect-ratio: auto !important; overflow: visible; }
  .cs-hero2 img { aspect-ratio: 1414 / 997; height: auto; }
  .cs-hero2__title { position: static; display: block; width: auto; height: auto;
                     padding: 18px var(--gutter) 24px;
                     font-size: clamp(30px, 8.5vw, 54px); background: var(--my-blue); }
  .cs-shot__credit { position: static; width: auto; color: var(--grey);
                     text-shadow: none; font-size: 12px; padding: 8px var(--gutter) 0; }
  .cs-shot__credit--dark { color: var(--grey); }
  .cs-sec__label { font-size: 12px; margin-bottom: 10px; }
  .cs-sec__body  { font-size: 16px; line-height: 1.6; }
  .cs-sec__body + .cs-sec__body { margin-top: 18px; }
  .cs-meta2 { flex-direction: column; gap: 18px; }
  .cs-meta2__col { flex: 0 0 auto; }
  .cs-meta2__label { font-size: 11px; }
  .cs-meta2__value { font-size: 15px; margin-bottom: 14px; }
  .cs-meta2__lede  { font-size: 16px; }
  .cs-duo2 { flex-direction: column; gap: 20px; }
  .cs-duo2 > * { width: auto !important; margin-left: 0 !important; }
  .cs-credit { position: static; margin: 8px 0 0; font-size: 12px; color: var(--grey); }
}

/* -------------------------------------------------------------------------
   32. Film plates
   Films sit on a black plate and fill it. The one exception is the
   announcement asset: it is 4:5 against a 390x533 plate and its artwork runs
   right to the frame edge, so cropping would clip the type. It is letterboxed
   instead, and because black is the film's own background the bars never show.
   ------------------------------------------------------------------------- */
.cs-plate--film { background: #000; overflow: hidden; }

.cs-plate--film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --letterbox is for a film whose ratio does not match its plate and whose
   artwork reaches the frame edge, so cropping it would clip the design. */
.cs-plate--letterbox video { object-fit: contain; }

/* The clip loops muted, so the viewer needs a way to hear the sound design. */
.film__sound {
  position: absolute;
  right: 0.85cqi;
  bottom: 0.85cqi;
  padding: 0.42cqi 0.85cqi;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-family: var(--font-caption);
  /* cqi alone lands this at 10px on a full-width canvas, and smaller still as
     the canvas shrinks — floor it at a readable size. */
  font-size: max(12px, 0.71cqi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}

/* Case study 2's films sit in .cs-film rather than a .cs-plate--film, so
   without this half the site's videos had a toggle that never appeared. */
.cs-plate--film:hover .film__sound,
.cs-film:hover .film__sound,
.film__sound:focus-visible { opacity: 1; }
.film__sound:hover { border-color: var(--white); }

.film__sound .film__sound-off { display: none; }
.film__sound[aria-pressed="true"] .film__sound-on  { display: none; }
.film__sound[aria-pressed="true"] .film__sound-off { display: inline; }

/* -------------------------------------------------------------------------
   34. Instagram grid
   Figma lays a 618x541 text box over the grid — the grid's own size — holding
   "STALK US ON INSTAGRAM", centred on both axes. That is the hover state, and
   the whole grid links out to the profile. Measured off the comp, the type is
   Cabin at 16.1px (1.14cqi), no tracking.
   ------------------------------------------------------------------------- */
.ig-grid { display: block; cursor: pointer; }

.ig-grid__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 6%;
  font-size: max(11px, 1.14cqi);
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
}

.ig-grid:hover .ig-grid__label,
.ig-grid:focus-visible .ig-grid__label { opacity: 1; }

@media (max-width: 1024px) {
  .ig-grid__label { font-size: 15px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
}

/* -------------------------------------------------------------------------
   35. Film rows
   Case study 2's five campaign films are 9:16 (272x484 in the comp), set out
   three across and then two, each with its caption beneath.
   ------------------------------------------------------------------------- */
.cs-films { display: flex; }
/* Each cell is the caption's positioning context, and the caption is out of
   flow so a row's height stays exactly the 484 the comp gives it. */
.cs-films > * { position: relative; margin: 0; }

.cs-film {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 272 / 484;
  overflow: hidden;
}

.cs-film video,
.cs-film img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Until a film is dropped in, the slot reads as the comp's empty plate. */
.cs-film--empty { background: #d9d9d9; display: grid; place-items: center; }

.cs-film__note {
  padding: 0 10%;
  font-family: var(--font-caption);
  font-size: max(11px, 0.71cqi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #8a8a8a;
}

.cs-film__caption {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.57cqi);
  margin: 0;
  font-size: max(11px, 0.92cqi);
  line-height: 1.35;
  font-style: italic;
  color: var(--grey);
  text-align: center;
}

@media (max-width: 1024px) {
  .cs-films { flex-direction: column; gap: 34px; }
  .cs-films > * { width: auto !important; margin-left: 0 !important; }
  .cs-film__caption { position: static; margin-top: 8px; font-size: 12px; }
  .cs-film__note { font-size: 10px; }
}

/* -------------------------------------------------------------------------
   36. Mobile refinements
   Measured on a 390px viewport: no page overflowed, but tap targets and a
   few labels were under the sizes a thumb and an eye need. Everything here
   is phone-only — the desktop canvas is untouched.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* --- Tap targets. Links stay visually where they were; the extra height
         is padding, and inline-flex keeps the text vertically centred. --- */
  .nav__link,
  .arrow-link,
  .brain__link,
  .experience__resume,
  .cs-row__cta,
  .cs-more__label,
  .footer__link,
  [data-scroll-top] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav__links { gap: 4px; }
  .nav__link  { padding: 0 8px; }

  /* On a 320px phone the three links plus the wordmark run past the edge.
     Tighten the nav rather than let the page scroll sideways. */
  @media (max-width: 380px) {
    .nav { gap: 8px; padding-left: 12px; padding-right: 12px; }
    .nav__links { gap: 0; }
    .nav__link { padding: 0 5px; font-size: 13px; }
    .wordmark img { width: 118px; height: auto; }

    /* Every display title clamps to a floor of 38-44px, but a 320px screen
       only has 280px between the gutters — enough for about 34px. */
    .hero__title,
    .manifesto__title,
    .cta__title,
    .work-hero__title,
    .education__title,
    .about-band__title,
    .cs-hero__title { font-size: 34px; }
  }
  .wordmark   { display: inline-flex; align-items: center; min-height: 44px; }
  .cta__link  { padding: 6px 4px; }

  /* The dot keeps its size; the hit area around it grows to a thumb. The dot
     moves to a pseudo-element so the active state scales the mark, not the
     button — otherwise the hit boxes come out different sizes. */
  .slideshow__dots { gap: 0; bottom: 0; }
  .slideshow__dot {
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    transform: none;
    display: grid;
    place-items: center;
  }
  .slideshow__dot::after {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(250, 249, 247, 0.45);
    transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
  }
  .slideshow__dot.is-active { background: none; transform: none; }
  .slideshow__dot.is-active::after { background: var(--my-yellow); transform: scale(1.35); }

  /* --- Legibility: nothing under 12px. --- */
  .cs-row__num,
  .cs-meta2__label,
  .footer__bar,
  .footer__bar span,
  [data-scroll-top] { font-size: 12px; }

  /* The sound toggle sizes itself in cqi, which does not resolve once the
     case-study canvas releases its container. Give it real pixels, and keep
     it visible — a touch screen has no hover to reveal it with. */
  .film__sound {
    right: 10px;
    bottom: 10px;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 12px;
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   37. Touch devices of any width
   Width is the wrong signal for tap targets: an iPad Pro in landscape is
   1366px and still a finger. These rules key off the pointer instead, so a
   large touch screen gets thumb-sized targets while a laptop of the same
   width keeps the tighter design.
   ------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav__link,
  .arrow-link,
  .brain__link,
  .experience__resume,
  .cs-row__cta,
  .cs-more__label,
  .footer__link,
  .wordmark,
  [data-scroll-top] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .slideshow__dots { gap: 0; }
  .slideshow__dot {
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    transform: none;
    display: grid;
    place-items: center;
  }
  .slideshow__dot::after {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(250, 249, 247, 0.45);
    transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
  }
  .slideshow__dot.is-active { background: none; transform: none; }
  .slideshow__dot.is-active::after { background: var(--my-yellow); transform: scale(1.35); }

  /* No hover to reveal it with, so the sound toggle stays up. The Instagram
     label deliberately does not — it was asked to appear only on hover. */
  .film__sound { opacity: 1; min-height: 44px; }
}

/* -------------------------------------------------------------------------
   38. Corrections against the Figma comps
   ------------------------------------------------------------------------- */

/* The hero's torn-paper frame sits over the ruled lines and under the type. */
.fig--hero .hero__frame {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
}

/* Figma sets the card titles in caps and their kicker line in small caps. */
.work-card__name { text-transform: uppercase; }
.work-card__tag  { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }

/* "HI, MY NAME IS MEHUL." and the manifesto both run in caps in the comps. */
.band__title,
.manifesto__title { text-transform: uppercase; }

/* The Instagram grid rests bright and darkens only under the hover label —
   the supplied "Before Hover" export is the resting state. */
.ig-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
  pointer-events: none;
  z-index: 1;
}
.ig-grid:hover::after,
.ig-grid:focus-visible::after { opacity: 1; }
.ig-grid__label { z-index: 2; }