:root {
  /* Colours */
  --neon-green: #39ff14;
  --light-grey: #e6e6e6;
  --cream: #F4F2EA;
  --warm-charcoal: #2A2724;

  /* Spacing */
  --padding-horizontal: 24px;
  --padding-section: 32px;
  --padding-paragraph: 16px;

  /* Fonts */
  --font-family: 'TT Norms', sans-serif;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
  background: var(--cream);
  font-variant-ligatures: none;
}


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

/* Navigation */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--padding-horizontal);
  background: var(--neon-green);
}

.nav-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  color: var(--warm-charcoal);
  text-decoration: none;
  font-size: 16px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--warm-charcoal);
  border-radius: 0;
}

/* Nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 39, 36, 0.95);
}

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

.nav-overlay-close {
  position: absolute;
  top: 16px;
  right: var(--padding-horizontal);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.nav-overlay-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background: var(--neon-green);
}

.nav-overlay-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-overlay-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-overlay-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.nav-overlay-links a {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--neon-green);
  text-decoration: none;
  font-size: 24px;
}

.nav-work-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-work-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.nav-work-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--neon-green);
  border-bottom: 2px solid var(--neon-green);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.15s ease;
}

.nav-work-toggle[aria-expanded="true"] span {
  transform: translate(-50%, -50%) rotate(225deg);
}

.nav-work-sublist {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nav-work-sublist[hidden] {
  display: none;
}

.nav-work-sublist a {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--neon-green);
  text-decoration: none;
  font-size: 16px;
}

/* Footer */
/* margin-top: auto pushes the footer to the bottom of the viewport on short pages (body is a
   flex column, min-height: 100vh) — the footer just grabs any leftover space above it. On tall
   pages (content already exceeds the viewport) this has no visible effect. */
.site-footer {
  margin-top: auto;
  background: var(--warm-charcoal);
  padding: var(--padding-section) var(--padding-horizontal);
  display: flex;
  gap: 24px;
}

.site-footer a {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  color: var(--neon-green);
  text-decoration: none;
}

/* Hero */
.hero-pattern {
  position: relative;
  /* No wavy SVG anymore (removed in the palette refresh) — this aspect-ratio is what used to
     come from the image's own intrinsic size, kept here so the empty hero footprint doesn't
     collapse and the wordmark below still has a box to sit against. Mobile height is half of
     what it originally was (373.65 / (270.294 / 2)). */
  aspect-ratio: 373.65 / 135.147;
  background: var(--cream);
}

.hero-wordmark {
  position: absolute;
  left: var(--padding-horizontal);
  /* Mobile: half the original 32px gap to the subheading below (restored to the full amount
     on desktop, where the gap was already fine). */
  bottom: var(--padding-paragraph);
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  color: var(--warm-charcoal);
  font-size: 44px;
}

.hero-wordmark-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 2px;
  background: var(--neon-green);
  vertical-align: text-bottom;
  /* Blinks continuously regardless of the typing animation's own state or prefers-reduced-motion —
     only the letter-by-letter typing is gated by that preference, not this blink. */
  animation: hero-cursor-blink 1s step-end infinite;
}

@keyframes hero-cursor-blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}

.hero-subheading {
  background: var(--cream);
  /* Mobile: half the original 32px top padding, same reasoning as .hero-wordmark's bottom offset. */
  padding: var(--padding-paragraph) var(--padding-horizontal) 0;
}

.hero-subheading p {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
  font-size: 16px;
}

.hero-subheading p:last-child {
  margin-bottom: 0;
}

.hero-subheading p.hero-subheading-headline {
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  text-wrap: balance;
}

.no-break {
  white-space: nowrap;
}

/* Major section divider: the primary separator between page sections now that they no longer
   alternate light/dark backgrounds. 56px total gap to the content on each side — the adjacent
   section's own 32px edge padding already accounts for part of that, so this only adds the
   remaining 24px (32 + 24 = 56). */
hr.section-divider {
  position: relative;
  top: 2px;
  border: none;
  height: 2px;
  margin: 24px var(--padding-horizontal);
  background-color: var(--neon-green);
}

/* The Work-section divider sits between two plain divs (not real <section> elements with their
   own 32px edge padding), so it doesn't get the same 32px top-up as every other instance — its
   own margin has to supply the full 56px gap directly instead of just the 24px top-up. Scoped to
   this one instance only; every other section-divider is unaffected. */
.work-list + hr.section-divider {
  margin-top: 56px;
  margin-bottom: 56px;
}

/* Shared section title */
.section-title {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  color: var(--warm-charcoal);
  text-align: left;
  font-size: 28px;
}

/* About */
.about {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--padding-paragraph);
}

.about-headshot {
  flex-shrink: 0;
  width: 70%;
  aspect-ratio: 1 / 1;
  background: var(--light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.about-headshot span {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 12px;
  color: var(--warm-charcoal);
  text-align: center;
}

.about-copy {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.about-copy:last-child {
  margin-bottom: 0;
}

.about-link {
  color: var(--warm-charcoal);
  text-decoration: underline;
}

.about-link:hover {
  color: var(--neon-green);
}

.mimosa-link {
  color: var(--warm-charcoal);
  text-decoration: underline;
}

.mimosa-link:hover {
  color: var(--neon-green);
}

/* Primary CTA button */
.btn {
  display: inline-block;
  border: 1px solid var(--neon-green);
  border-radius: 0;
  background: var(--neon-green);
  padding: 12px 24px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--warm-charcoal);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: none;
  color: var(--warm-charcoal);
}

.btn:active {
  transform: scale(0.97);
}

/* Work */
.work {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.work .section-title {
  margin-bottom: var(--padding-section);
}

.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--padding-section);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--padding-paragraph);
  text-decoration: none;
}

.work-card-image {
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background: var(--light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.work-card-image img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* Self-contained brand card (own background + clear space baked into the file) */
.work-card-image--unimo {
  background: #f8f7f1;
}

.work-card-image--driller-queens {
  background: #201d3e;
}

.work-card-image--driller-queens img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.work-card-image--other-nature {
  background: #ffffff;
}

.work-card-image span {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 12px;
  color: var(--warm-charcoal);
  text-align: center;
}

.work-card-name {
  margin: 0 0 4px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  color: var(--warm-charcoal);
  font-size: 18px;
}

.work-card-copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.logo-grid-title {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  color: var(--warm-charcoal);
  font-size: 18px;
}

.logo-grid-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding-paragraph);
  margin-bottom: var(--padding-section);
}

.logo-tile {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Self-contained brand cards: own background + clear space already baked into the file */
.logo-tile--card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* National Express and Mondelez's own PNGs are opaque white canvases (no transparency, same as
   Blacklane/GetYourGuide's coloured ones) — this white background matches them so the tile fills
   its full grid cell edge to edge, the same size as the other two, with no seam against the
   cream page. object-fit: contain (not cover) since both logos are wide enough relative to the
   3:2 tile that cropping to fill could clip the wordmark itself. */
.logo-tile--mark {
  background: #ffffff;
}

.logo-tile--mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.archive-line {
  margin: var(--padding-paragraph) 0 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
  font-size: 16px;
}

.archive-line-aside {
  opacity: 0.6;
}

.archive-link {
  color: var(--warm-charcoal);
  text-decoration: underline;
}

.archive-link:hover {
  color: var(--neon-green);
}

/* Hire Me For */
.hire-me-for {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.hire-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--padding-section);
  margin-bottom: var(--padding-section);
}

.hire-block-title {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  color: var(--warm-charcoal);
  font-size: 20px;
}

.hire-block ul {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.hire-block li:not(:last-child) {
  margin-bottom: var(--padding-paragraph);
}

.hire-block li::marker {
  color: var(--neon-green);
}

/* Case study hero */
.case-hero {
  position: relative;
  background: var(--cream);
}

.case-hero-pattern {
  /* Wavy SVG pattern removed in the palette refresh — aspect-ratio is set directly on this div
     (not derived from an image), so it keeps the same empty footprint as before. */
  width: 100%;
  aspect-ratio: 373.65 / 270.294;
}

.case-hero-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  padding: var(--padding-paragraph) var(--padding-section);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-hero-heading {
  margin: 0;
  display: contents;
}

.case-hero-logo-img {
  display: block;
  max-width: 240px;
  max-height: 96px;
  width: auto;
  height: auto;
}

/* Driller Queens: logo bigger, but the white box footprint stays put (tighter padding instead) */
.case-hero-block--driller-queens {
  padding: 4px 8px;
}

.case-hero-logo-img--driller-queens {
  max-width: 294px;
  max-height: 163px;
}

.case-hero-logo {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  color: var(--warm-charcoal);
  font-size: 24px;
  text-align: center;
}

/* Case study Context */
.context {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.context-copy {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.context-copy:last-of-type {
  margin-bottom: 0;
}

/* Case study Approach */
.approach {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.approach > * {
  margin: 0 0 var(--padding-paragraph);
}

.approach > *:last-child {
  margin-bottom: 0;
}

.approach hr {
  border: none;
  border-top: 2px solid var(--neon-green);
  margin-bottom: var(--padding-section);
}

.approach-copy {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

/* Standard 32px gap before a divider, same as every other element that sits directly
   above an <hr> in an Approach section (image slots, slot-groups) — a plain paragraph's
   default 16px bottom margin reads as too tight against a divider. */
.approach-copy--before-divider {
  margin-bottom: var(--padding-section);
}

.approach-list {
  margin: 0 0 var(--padding-paragraph);
  padding-left: 20px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.approach-list li:not(:last-child) {
  margin-bottom: var(--padding-paragraph);
}

.approach-list li::marker {
  font-weight: var(--font-weight-bold);
}

.slot-box {
  position: relative;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* <picture> is the actual flex item when an image has responsive <source>s (e.g. Driller Queens'
   desktop header image) — without this it sizes to its own content instead of filling the box. */
.slot-box picture {
  display: block;
  width: 100%;
  height: 100%;
}

.slot-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slot-box span {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 12px;
  color: var(--warm-charcoal);
  text-align: center;
}

.approach .image-slot-1,
.approach .image-slot-2,
.approach .image-slot-3,
.approach .image-slot-4 {
  margin-top: var(--padding-section);
  margin-bottom: var(--padding-section);
}

/* Two of the same slot type back to back (no divider between them): read as one group,
   smaller gap than the usual 32px section spacing */
.approach .image-slot-4:has(+ .image-slot-4) {
  margin-bottom: var(--padding-paragraph);
}

.approach .image-slot-4 + .image-slot-4 {
  margin-top: var(--padding-paragraph);
}

.image-slot-1 {
  aspect-ratio: 16 / 9;
}

.image-slot-2 {
  display: flex;
  gap: var(--padding-paragraph);
}

.image-slot-2 .slot-box {
  flex: 1;
  aspect-ratio: 1 / 1;
}

/* Below 1024px: Unimo's illustration/booth/product pairs and Driller Queens' poster pair
   stack full-width instead of sitting side by side. Desktop (1024px+) is unchanged. */
.case-study-unimo .image-slot-2,
.case-study-driller-queens .image-slot-2 {
  flex-direction: column;
}

@media (min-width: 1024px) {
  .case-study-unimo .image-slot-2,
  .case-study-driller-queens .image-slot-2 {
    flex-direction: row;
  }
}

.image-slot-3 {
  display: flex;
  gap: var(--padding-paragraph);
}

.image-slot-3 .slot-box {
  flex: 1;
  aspect-ratio: 3 / 4;
}

.image-slot-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--padding-section);
}

.image-slot-4 .slot-box {
  flex: 0 1 30%;
  aspect-ratio: 4 / 3;
}

/* Mobile: two across (three rows of two) instead of three across — legible typography/data
   in the deck spreads needs the extra width. Desktop's 30% basis is untouched. */
@media (max-width: 768px) {
  .image-slot-4 .slot-box {
    flex-basis: calc(50% - 16px);
  }
}

/* Below 1024px: Driller Queens' pitch deck slides are stacked one per row (see the flex-basis
   override further down), so the standard 32px grid gap reads as too much space between stacked
   items — tightened to 16px. Desktop (1024px+) keeps the original 32px grid gap. */
.case-study-driller-queens .image-slot-4 {
  gap: var(--padding-paragraph);
}

@media (min-width: 1024px) {
  .case-study-driller-queens .image-slot-4 {
    gap: var(--padding-section);
  }
}

/* Below 1024px: Driller Queens' pitch deck slides stack one per row instead of a grid
   (overrides both the base 30% and the 768px 50% rules above). Desktop (1024px+) restores
   the standard three-across layout, unchanged. */
.case-study-driller-queens .image-slot-4 .slot-box {
  flex-basis: 100%;
}

@media (min-width: 1024px) {
  .case-study-driller-queens .image-slot-4 .slot-box {
    flex-basis: 30%;
  }
}

/* Mobile-only: these two Unimo instances show the image at its natural ratio, no cropping.
   Scoped to these specific modifier classes so the standard slot-1/slot-2 system (used for
   placeholders and other case studies) is untouched. The desktop rules further down still
   target the base .image-slot-1 / .image-slot-2 classes, so they continue to win at 1024px+. */
.image-slot-1--natural {
  aspect-ratio: auto;
}

.image-slot-1--natural img {
  height: auto;
  object-fit: contain;
}

/* Posters: keep the existing box size/shape (mobile and desktop), just stop cropping —
   scale the full image down to fit inside instead, accepting empty space around it. */
.image-slot-2--natural .slot-box {
  background: none;
}

.image-slot-2--natural .slot-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Instagram screenshots (Driller Queens): each screenshot shows 4 IG posts in a row, too small
   to read at mobile widths. Below 1024px, the full image is swapped for two half-width crops
   (object-fit: cover + object-position: left/right) so each pair of posts is legible; the
   1.5:1 aspect-ratio is half the source images' own ~3:1 ratio, so the two crops meet cleanly
   at the actual midpoint. Desktop (1024px+) keeps the original single full-width image. */
.approach .ig-screenshot-group {
  margin-top: var(--padding-paragraph);
}

.ig-screenshot-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ig-screenshot-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ig-screenshot-full {
  display: none;
}

.ig-screenshot-crop {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.ig-screenshot-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-screenshot-crop--left img {
  object-position: left;
}

.ig-screenshot-crop--right img {
  object-position: right;
}

@media (min-width: 1024px) {
  .ig-screenshot-full {
    display: flex;
  }

  .ig-screenshot-crop {
    display: none;
  }
}

/* Slot image + caption, grouped so the 32px slot spacing applies to the pair, not just the image */
.approach .slot-group {
  margin-top: var(--padding-section);
  margin-bottom: var(--padding-section);
}

.slot-group .image-slot-1,
.slot-group .image-slot-2,
.slot-group .image-slot-3,
.slot-group .image-slot-4 {
  margin: 0;
}

.slot-caption {
  margin: var(--padding-paragraph) 0 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  color: var(--warm-charcoal);
}

/* Case study Outcome */
.outcome {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.outcome-list {
  margin: 0 0 var(--padding-section);
  padding-left: 20px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.outcome-list li:not(:last-child) {
  margin-bottom: var(--padding-paragraph);
}

.outcome-list li::marker {
  font-weight: var(--font-weight-bold);
}

.highlight {
  font-weight: var(--font-weight-bold);
}

.next-case-study {
  margin: 0 0 var(--padding-section);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.next-case-study-link {
  color: var(--neon-green);
  text-decoration: none;
}

.next-case-study-link:hover {
  text-decoration: underline;
}

.pdf-link {
  display: block;
  width: fit-content;
  margin: 0 0 var(--padding-section);
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--warm-charcoal);
  text-decoration: underline;
  cursor: pointer;
}

/* Print: strip page chrome so the case study prints/saves-as-PDF cleanly */
@media print {
  .nav,
  .nav-overlay,
  .site-footer,
  .btn,
  .pdf-link {
    display: none;
  }
}

/* Contact page */
.contact-page {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.contact-form {
  margin-top: var(--padding-section);
  display: flex;
  flex-direction: column;
  gap: var(--padding-paragraph);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field label {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 14px;
  color: var(--warm-charcoal);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  font-variant-ligatures: none;
  padding: 12px;
  border: 1px solid var(--warm-charcoal);
  border-radius: 0;
  background: var(--cream);
  color: var(--warm-charcoal);
}

.form-field textarea {
  resize: vertical;
}

.contact-form .btn {
  align-self: flex-start;
  margin-top: var(--padding-paragraph);
}

/* Impressum page */
.impressum-page {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.impressum-copy {
  margin: var(--padding-paragraph) 0 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

/* Thanks page (contact form confirmation) */
.thanks-page {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
}

.thanks-copy {
  margin: var(--padding-paragraph) 0 var(--padding-section);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

/* 404 page */
.notfound {
  background: var(--cream);
  padding: var(--padding-section) var(--padding-horizontal);
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--padding-section);
}

.notfound-mac-wrap {
  position: relative;
  width: 100%;
  max-width: 260px;
  /* Matches mac-illustration.svg's own viewBox ratio, so the illustration and the spinner
     positioned on top of it always scale together. */
  aspect-ratio: 200.488 / 243.87;
}

.notfound-mac {
  display: block;
  width: 100%;
  height: 100%;
}

.notfound-spinner {
  /* Percentages estimated from the screen shape's own path coordinates in mac-illustration.svg
     (roughly x: 8%-71%, y: 16%-57% of the full illustration) — sized to leave visible padding
     around it inside the screen rather than filling it edge to edge. */
  position: absolute;
  top: 37%;
  left: 40%;
  width: 32%;
  height: auto;
  transform: translate(-50%, -50%);
}

.notfound-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padding-paragraph);
}

.notfound-number {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  color: var(--neon-green);
  font-size: 64px;
  line-height: 1;
}

.notfound-subheading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
  font-size: 20px;
}

/* ==========================================================================
   Phase 2 — Desktop (min-width: 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  /* Container: redefining this one variable centres every section's content
     within a 1200px column (min 24px padding either side) with no other
     changes needed, since every section already uses var(--padding-horizontal). */
  :root {
    --padding-horizontal: max(24px, calc((100% - 1200px) / 2));
  }

  /* Nav: standard bar instead of hamburger overlay */
  .hamburger {
    display: none;
  }

  .nav-overlay,
  .nav-overlay[hidden] {
    position: static;
    inset: auto;
    background: none;
    display: flex;
  }

  .nav-overlay-close {
    display: none;
  }

  .nav-overlay-links {
    flex-direction: row;
    gap: 32px;
  }

  .nav-overlay-links a {
    font-size: 14px;
  }

  .nav-work-item {
    position: relative;
  }

  .nav-work-row {
    gap: 2px;
  }

  .nav-work-toggle {
    width: 20px;
    height: 20px;
  }

  /* Desktop: the overlay is no longer a full-screen dark scrim here — it's an inline row
     sitting directly on the nav bar's own neon-green background, so its neon-green links and
     arrow icon need to switch to charcoal or they're invisible (green on green). The mobile
     overlay is untouched — it keeps its own dark background, where neon links are correct. */
  .nav-overlay-links a {
    color: var(--warm-charcoal);
  }

  .nav-work-toggle span {
    border-right-color: var(--warm-charcoal);
    border-bottom-color: var(--warm-charcoal);
  }

  /* Contact page: fields shouldn't flood the full container width */
  .contact-form {
    width: 66.6667%;
  }

  .nav-work-sublist {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--warm-charcoal);
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 160px;
  }

  /* The dropdown keeps its own dark charcoal background on desktop (unlike the top-level
     nav links, which sit directly on the green nav bar) — so its links need to stay neon
     green, not switch to charcoal like the .nav-overlay-links a rule above does. */
  .nav-work-sublist a {
    color: var(--neon-green);
  }

  /* Hero */
  .hero-pattern {
    /* Exactly 40px shorter than the plain aspect-ratio would give at any viewport width
       (this box is full-bleed/100vw, no horizontal padding of its own). */
    aspect-ratio: auto;
    height: calc(100vw * 135.147 / 373.65 - 40px);
    overflow: hidden;
  }

  .hero-wordmark {
    font-size: 96px;
    /* Restore the full 32px gap to the subheading below — only mobile needed the reduction. */
    bottom: var(--padding-section);
  }

  .hero-subheading {
    padding-top: var(--padding-section);
  }

  .hero-subheading p {
    font-size: 20px;
  }

  .mobile-only-break {
    display: none;
  }

  /* About: side by side, more generous spacing, much smaller headshot */
  .about-content {
    flex-direction: row;
    align-items: center;
    gap: var(--padding-section);
  }

  .about-headshot {
    width: 17.5%;
  }

  .about-copy-block {
    flex: 1;
  }

  /* Work: row of three, more breathing room before the logo grid and CTA */
  .work-list {
    flex-direction: row;
    gap: var(--padding-section);
  }

  .work-card {
    flex: 1;
  }

  .work-card-image--other-nature img {
    max-width: 50.6%;
    max-height: 50.6%;
  }

  /* Logo grid: one row (4 logos) */
  .logo-grid-tiles {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: calc(var(--padding-section) * 2);
  }

  /* Hire Me For: three columns */
  .hire-blocks {
    flex-direction: row;
  }

  .hire-block {
    flex: 1;
  }

  /* 404 page: Mac illustration left, text stack right */
  .notfound {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: calc(var(--padding-section) * 2);
  }

  .notfound-mac-wrap {
    max-width: 180px;
  }

  .notfound-content {
    align-items: flex-start;
  }

  .notfound-number {
    font-size: 96px;
  }

  /* Case study Context & Outcome: max-width 800px, left aligned to match Approach */
  .context .section-title,
  .context-copy,
  .outcome .section-title,
  .outcome-list,
  .outcome .pdf-link,
  .outcome .btn {
    max-width: 800px;
  }

  /* Case study hero: back to matching the homepage hero's height */
  .case-hero-pattern {
    aspect-ratio: 373.65 / 135.147;
  }

  /* Case study hero logo: 100% bigger than the base (mobile) size */
  .case-hero-logo-img {
    max-width: 400px;
    max-height: 160px;
  }

  /* Driller Queens: 15% bigger again, box footprint held as close to before as the numbers allow */
  .case-hero-block--driller-queens {
    padding: 0;
  }

  .case-hero-logo-img--driller-queens {
    max-width: 500px;
    max-height: 276px;
  }

  /* Case study Approach image slots: too tall on desktop */
  .image-slot-1 {
    aspect-ratio: 16 / 5.4;
  }

  /* Driller Queens header image: 15% bigger than the standard slot-1 height, this instance only */
  .image-slot-1--dq-header {
    aspect-ratio: 16 / 6.21;
  }

  .image-slot-2 .slot-box {
    flex: 1;
    aspect-ratio: 42 / 35;
  }

  .image-slot-3 .slot-box {
    aspect-ratio: 3 / 3.4;
  }
}

/* Lightbox (case study Approach section images) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 39, 36, 0.95);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1;
  color: var(--neon-green);
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox-prev {
  left: 8px;
}

.lightbox-next {
  right: 8px;
}

.lightbox-nav span {
  display: block;
  width: 14px;
  height: 14px;
  border-style: solid;
  border-color: var(--neon-green);
  border-width: 0 3px 3px 0;
}

.lightbox-prev span {
  transform: rotate(135deg);
}

.lightbox-next span {
  transform: rotate(-45deg);
}

/* Testimonial block: reusable component for the case study Approach section, not an image slot.
   Floods full-bleed with its own dark-grey background, same idea as the Context/Outcome sections
   rather than sitting inset inside the white Approach padding. */
.approach .testimonial {
  margin: var(--padding-section) calc(-1 * var(--padding-horizontal));
  padding: 48px var(--padding-horizontal);
  background: var(--cream);
}

.section-title--white {
  color: var(--warm-charcoal);
}

.testimonial-quote-block::before {
  content: '"';
  display: block;
  position: relative;
  top: 25px;
  margin: 0 0 4px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  color: var(--neon-green);
  font-size: 52px;
  line-height: 1;
}

.testimonial-quote {
  margin: 0 0 var(--padding-paragraph);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--warm-charcoal);
}

.testimonial-attribution {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  color: var(--neon-green);
}

@media (min-width: 1024px) {
  .approach .testimonial {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .testimonial-quote-block::before,
  .testimonial-quote,
  .testimonial-attribution {
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
  }
}