/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'PP Editorial New';
  src: url('../PP Editorial New - Ultralight Italic v2.2/PPEditorialNew-UltralightItalic.woff2') format('woff2'),
       url('../PP Editorial New - Ultralight Italic v2.2/PPEditorialNew-UltralightItalic.woff') format('woff'),
       url('../PP Editorial New - Ultralight Italic v2.2/PPEditorialNew-UltralightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --maroon: #61132C;
  --pink: #FFBFFF;
  --yellow: #F3FF9F;
  --blue: #8BA9FF;
  --white: #ffffff;
  --off-white: #faf8f5;
  --serif: 'PP Editorial New', 'Playfair Display', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* nothing an anchor points at should sit beneath the fixed nav */
#work, #about, #services, #contact, #extra-projects {
  scroll-margin-top: 90px;
}

body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--maroon);
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

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

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inline mentions of Verticalloop in body copy across the case study pages
   (as opposed to the meta-table credit line, which has its own per-page
   style) — one shared rule so every page links the word the same way. */
.vl-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.vl-link:hover {
  opacity: 0.65;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s;
}

.nav.scrolled {
  box-shadow: 0 1px 0 rgba(97,19,44,0.08);
}

/* Wordmark — the case study pages still use the text logo */
.nav-logo {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 200;
  color: var(--maroon);
  letter-spacing: -0.01em;
}

/* Bird mark — index.html swaps the text logo for an <img> */
.nav-logo:has(img) {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.nav-logo:has(img):hover {
  transform: rotate(-8deg);
}

.nav-logo img {
  width: 52px;
  height: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Yellow highlight wipes up from the baseline on hover */
.nav-links a {
  position: relative;
  z-index: 0;
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--maroon);
}

.nav-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover::before {
  transform: scaleY(1);
}

/* Yellow pill Contact — still on the case study pages, not on index.html */
.nav-cta {
  background: var(--yellow);
  border-radius: 50px;
  font-weight: 600;
}

.nav-cta::before {
  display: none;
}

.nav-cta:hover {
  background: #e8f590;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--maroon);
  transition: transform 0.3s, opacity 0.3s;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-menu a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  color: var(--maroon);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 112px 48px 56px;
  background: var(--off-white);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-copy {
  position: relative;
  width: fit-content;
  max-width: 100%;
  animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(44px, 5.4vw, 82px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--maroon);
}

/* "my portfolio" breaks from the italic run — upright and heavier */
.hero-title-strong {
  font-style: normal;
  font-weight: 600;
}

.hero-arrow {
  position: absolute;
  top: 46%;
  left: calc(100% + 12px);
  width: clamp(90px, 11vw, 165px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Past this width there is room to let the arrow breathe away from the last
   word without it drifting all the way out to the photo. Below it the column
   is too tight and the arrow has to sit close. */
@media (min-width: 1600px) {
  .hero-arrow { left: calc(100% + 90px); }
}

/* Two stacked PNGs — the pink one cross-fades to the orange one on hover */
.hero-btn {
  position: relative;
  display: block;
  width: clamp(220px, 21vw, 310px);
  margin-top: 48px;
}

.hero-btn img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.hero-btn-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hero-btn:hover .hero-btn-hover   { opacity: 1; }
.hero-btn:hover .hero-btn-default { opacity: 0; }

.hero-photo {
  position: relative;
  width: clamp(320px, 38vw, 520px);
  /* The badge is placed at a percentage of this box's height. Without a
     reserved ratio the box is flat until IMAGE.png arrives, and the badge
     lands above where it belongs — sometimes staying there, because its
     spin animation puts it on its own compositor layer. */
  aspect-ratio: 741 / 872;
  animation: fadeInUp 1s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-photo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Sits on the badge already baked into IMAGE.png — the numbers are that
   circle's measured centre (15% / 80.56%) and diameter (30.09% of the
   image width), so the static one underneath stays covered as this spins. */
.hero-badge {
  position: absolute;
  left: 15%;
  top: 80.56%;
  width: 30.09%;
  /* translate(-50%) lifts this by half its own height, so that height has to
     be known at the first paint. Without the ratio it is zero until badge.png
     arrives and the circle renders half its height too low — then the spin
     animation's compositor layer can keep it there until a reload. */
  aspect-ratio: 1 / 1;
  height: auto;
  transform: translate(-50%, -50%);
  animation: heroBadgeSpin 14s linear infinite;
}

@keyframes heroBadgeSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

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

/* ============================================================
   ABOUT
   ============================================================ */
/* Cream gutter around the card — this is also what puts air between the
   maroon block and the yellow ticker below it. */
.about {
  background: var(--off-white);
  padding: 40px 48px 48px;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  background: var(--maroon);
  color: var(--white);
  border-radius: 28px;
  padding: 64px 68px;
}

.about-illo img {
  width: clamp(200px, 22vw, 320px);
  height: auto;
  object-fit: contain;
}

.about-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.7;
  padding-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dot {
  font-size: 18px;
  line-height: 1;
}

.about-tagline {
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 32px;
  opacity: 0.9;
  max-width: 580px;
}

.about-bio {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.4;
  font-weight: 300;
  color: var(--pink);
  margin-bottom: 40px;
  max-width: 680px;
}

.btn-outline {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: var(--white);
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.btn-outline:hover {
  background: var(--white);
  color: var(--maroon);
  border-color: var(--white);
}

/* Works section — white background */
.works-section {
  background: #fff;
  padding: 80px 48px;
}

.works-header {
  /* the nav is fixed, so a jump to #work would otherwise land under it */
  scroll-margin-top: 90px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(97,19,44,0.1);
}

.works-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--maroon);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 48px;
}

.p-card {
  display: block;
  transition: transform 0.35s ease;
}

/* An odd number of cards leaves the last one stranded in the left column —
   centre it across both instead. */
.portfolio-grid > .p-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 10px);
}

.p-card:hover {
  transform: translateY(-4px);
}

.p-card:hover .p-card-img-wrap {
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.p-card-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.35s ease;
}

.p-img-default,
.p-img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease;
}

.p-img-hover { opacity: 0; }

.p-card:hover .p-img-hover   { opacity: 1; }
.p-card:hover .p-img-default { opacity: 0; }

.p-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* a long name and its tags filled the row exactly on a phone and ended up
     touching; the gap forces them apart and lets the tags drop to a new line */
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0 8px;
}

.p-card-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--maroon);
}

.p-card-tags {
  font-size: 13px;
  color: rgba(97,19,44,0.5);
}

.more-works-wrap {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.btn-pill {
  display: inline-block;
  border: 1.5px solid var(--maroon);
  color: var(--maroon);
  padding: 10px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: background 0.25s, color 0.25s;
  cursor: pointer;
}

.btn-pill:hover {
  background: var(--maroon);
  color: #fff;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  background: var(--yellow);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  animation: ticker 22s linear infinite;
}

.ticker-track span {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--maroon);
  text-transform: uppercase;
}

.ticker-bird {
  display: flex;
  align-items: center;
}

.ticker-bird img {
  width: 26px;
  height: auto;
  object-fit: contain;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   ILLUSTRATIONS SECTION
   ============================================================ */
.illustrations-section {
  padding: 80px 48px;
  background: var(--white);
  display: none;
}

.illustrations-section.visible {
  display: block;
  animation: illoFadeIn 0.65s ease forwards;
}

@keyframes illoFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.illo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 48px;
}

.illo-title-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 20px;
}

.illo-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(32px, 4vw, 54px);
  color: var(--maroon);
  line-height: 1.1;
  margin-bottom: 32px;
}

.illo-decoration {
  width: 120px;
  height: 140px;
}

/* Override card colors for illustration section */
.illo-grid .p-card-name {
  color: var(--maroon);
}

.illo-grid .p-card-tags {
  color: rgba(97,19,44,0.45);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding: 80px 48px;
  background: var(--white);
}

.services-inner {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 40px;
  align-items: start;
}

.services-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--maroon);
  opacity: 0.6;
  padding-top: 12px;
}

.services-list {
  display: flex;
  flex-direction: column;
}

.service-item {
  cursor: default;
  transition: background 0.25s;
}

.service-item span {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(24px, 3vw, 44px);
  color: var(--maroon);
  padding: 18px 16px;
  border-radius: 6px;
  transition: background 0.25s;
  line-height: 1.1;
}

.service-item hr {
  border: none;
  border-top: 1px solid rgba(97,19,44,0.18);
  margin: 0;
}

.service-item.active span,
.service-item:hover span {
  background: var(--yellow);
}

/* Circular text badge */
.services-badge {
  position: relative;
  width: 140px;
  height: 140px;
  margin-top: 12px;
  flex-shrink: 0;
}

.circular-text-svg {
  width: 140px;
  height: 140px;
  animation: rotate-badge 12s linear infinite;
}

@keyframes rotate-badge {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.circular-text {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--maroon);
  font-family: var(--sans);
  text-transform: uppercase;
}

.badge-bird {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  background: var(--pink);
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cta-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(36px, 5vw, 68px);
  color: var(--maroon);
  text-align: center;
  line-height: 1.15;
}

/* Real contact button (SVG file) */
.contact-btn-link {
  position: relative;
  display: inline-block;
  width: clamp(280px, 55vw, 560px);
}

.contact-btn-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.35s ease;
}

.contact-btn-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.contact-btn-link:hover .contact-btn-hover  { opacity: 1; }
.contact-btn-link:hover .contact-btn-default { opacity: 0; }

/* ============================================================
   CONTACT FORM MODAL
   ============================================================ */
.cf-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(97, 19, 44, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cfFade 0.25s ease both;
}

.cf-overlay[hidden] {
  display: none;
}

@keyframes cfFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cf-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--off-white);
  border-radius: 24px;
  padding: 48px 44px 40px;
  animation: cfRise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cfRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.cf-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 36px;
  height: 36px;
  font-size: 28px;
  line-height: 1;
  color: var(--maroon);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.cf-close:hover {
  background: rgba(97, 19, 44, 0.08);
}

.cf-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: 42px;
  line-height: 1.1;
  color: var(--maroon);
  text-align: center;
  margin-bottom: 8px;
}

.cf-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--maroon);
  opacity: 0.7;
  text-align: center;
  margin-bottom: 26px;
}

.cf-field {
  display: block;
  margin-bottom: 18px;
}

.cf-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--maroon);
  opacity: 0.6;
  margin-bottom: 7px;
}

.cf-field input,
.cf-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--maroon);
  background: var(--white);
  border: 1.5px solid rgba(97, 19, 44, 0.18);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.2s;
  resize: vertical;
}

.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--maroon);
}

.cf-error {
  font-size: 14px;
  color: #A3123A;
  margin-bottom: 14px;
}

.cf-error[hidden] {
  display: none;
}

.cf-submit {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--off-white);
  background: var(--maroon);
  border: none;
  border-radius: 50px;
  padding: 17px 30px;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}

.cf-submit:hover {
  background: #4a0e22;
  transform: translateY(-2px);
}

.cf-submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.cf-note {
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--maroon);
  opacity: 0.55;
  margin-top: 14px;
}

.cf-thanks {
  text-align: center;
  padding: 30px 0 10px;
  animation: cfRise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cf-thanks[hidden] {
  display: none;
}

.cf-thanks-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: 34px;
  color: var(--maroon);
  margin-bottom: 10px;
}

.cf-thanks-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--maroon);
  opacity: 0.75;
}

@media (max-width: 600px) {
  .cf-panel { padding: 40px 24px 32px; border-radius: 20px; }
  .cf-title { font-size: 34px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--pink);
  border-top: 1px solid rgba(97,19,44,0.12);
  padding: 24px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.footer-email {
  font-size: 13px;
  color: var(--maroon);
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-email:hover {
  opacity: 1;
}

.footer-copy {
  font-size: 12px;
  color: var(--maroon);
  opacity: 0.5;
  text-align: center;
}

.footer-nav {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
}

.footer-nav a {
  font-size: 13px;
  color: var(--maroon);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-nav a:hover {
  opacity: 1;
}

/* ============================================================
   CUSTOM BIRD CURSOR
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body, body * { cursor: none !important; }
}

.custom-bird-cursor {
  position: fixed;
  top: 0; left: 0;
  /* the whole cursor scales from this one number */
  width: 48px; height: auto;
  pointer-events: none;
  z-index: 999999;
  display: none;
  will-change: left, top;
  transition: opacity 0.2s;
}

.custom-bird-cursor img {
  width: 100%; height: auto;
  display: block;
  transition: opacity 0.12s ease;
}
/* the dark bird sits exactly on top of the orange one and is revealed on press */
.custom-bird-cursor .bird-down {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
}
.custom-bird-cursor.sv-pressed .bird-up   { opacity: 0; }
.custom-bird-cursor.sv-pressed .bird-down { opacity: 1; }

.custom-bird-cursor.sv-hidden { opacity: 0; }

.custom-bird-cursor.sv-hovering img {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

@media (hover: none), (pointer: coarse) {
  .custom-bird-cursor { display: none !important; }
  body, body * { cursor: auto !important; }
}

/* Hero illustration */
.desk-img {
  width: 100%;
  max-width: 546px;
  height: auto;
}

/* ============================================================
   PROJECT PAGE STYLES (used in project.html)
   ============================================================ */
.project-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 48px 60px;
  background: var(--off-white);
  position: relative;
  overflow: hidden;
}

.project-hero-img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.project-meta {
  position: relative;
  z-index: 2;
}

.project-category {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 16px;
  opacity: 0.7;
}

.project-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(40px, 6vw, 88px);
  color: var(--maroon);
  line-height: 1.05;
}

.project-body {
  padding: 80px 48px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.project-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid rgba(97,19,44,0.12);
  border-bottom: 1px solid rgba(97,19,44,0.12);
  padding: 32px 0;
  margin-bottom: 64px;
}

.project-info-item label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
  opacity: 0.5;
  margin-bottom: 8px;
}

.project-info-item p {
  font-size: 16px;
  color: var(--maroon);
  font-weight: 400;
}

.project-text h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: 32px;
  color: var(--maroon);
  margin-bottom: 20px;
  margin-top: 56px;
}

.project-text h2:first-child {
  margin-top: 0;
}

.project-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--maroon);
  opacity: 0.8;
  margin-bottom: 24px;
}

.project-gallery {
  padding: 0 48px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.project-gallery-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--off-white);
}

.project-gallery-img.full {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}

.project-nav {
  padding: 60px 48px;
  border-top: 1px solid rgba(97,19,44,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-nav label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
  opacity: 0.4;
  cursor: pointer;
}

.project-nav span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--maroon);
}

.project-nav a:last-child {
  text-align: right;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav {
    padding: 18px 24px;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Stack the copy over the photo */
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 110px 24px 56px;
  }

  .hero-title {
    font-size: clamp(32px, 8vw, 48px);
  }

  /* No room beside the copy for the arrow at this width */
  .hero-arrow {
    display: none;
  }

  /* Mobile only — everything in the hero centers instead of the
     left-aligned desktop layout */
  .hero-copy {
    width: 100%;
    text-align: center;
  }

  .hero-btn {
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-photo {
    width: min(100%, 460px);
    justify-self: center;
  }

  .about {
    padding: 60px 24px;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-illo {
    justify-self: center;
  }

  .works-section {
    padding: 60px 24px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .illustrations-section {
    padding: 60px 24px;
  }

  .illo-grid {
    grid-template-columns: 1fr;
  }

  .illo-title-cell {
    padding: 20px 0;
  }

  .services {
    padding: 60px 24px;
  }

  .services-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .services-badge {
    display: none;
  }

  .cta {
    padding: 80px 24px;
  }

  .footer {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 24px;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .project-gallery {
    grid-template-columns: 1fr;
    padding: 0 24px 60px;
  }

  .project-gallery-img.full {
    grid-column: 1;
  }

  .project-info-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .project-body {
    padding: 60px 24px;
  }

  .project-hero {
    padding: 100px 24px 40px;
  }
}

@media (max-width: 600px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  /* A lone last card is centred at half width so it does not stretch across
     the two-column grid. In one column there is nothing to balance, and the
     rule just shrinks the card to half the screen. */
  .portfolio-grid > .p-card:last-child:nth-child(odd) {
    width: 100%;
  }

  .bubble {
    width: 70px;
    height: 70px;
    margin: 0 -6px;
  }

  .blob-label {
    font-size: 13px;
    padding: 0 60px;
    line-height: 70px;
  }

  .project-nav {
    padding: 40px 24px;
  }
}