.main-site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 18px var(--page-padding);
      margin: 0 calc(var(--page-padding) * -1);

      background:
        linear-gradient(
          to bottom,
          rgba(244, 243, 239, 0.96),
          rgba(244, 243, 239, 0.82),
          rgba(244, 243, 239, 0)
        );

      backdrop-filter: blur(4px);
    }

.nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: start;
      gap: 24px;
    }

.brand {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

.nav-links {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 13px;
      line-height: 1.25;
    }

.nav-links a {
      width: fit-content;
      position: relative;
    }

.nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 350ms ease;
    }

.nav-links a:hover::after,
    .nav-links a:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }

.nav-meta {
      justify-self: end;
      text-align: right;
      font-size: 11px;
      line-height: 1.4;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

.section-index {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

.contact {
      min-height: 65vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

.contact-title {
      max-width: 1000px;

      font-size: clamp(56px, 8vw, 130px);
      line-height: 0.86;
      letter-spacing: -0.065em;
      font-weight: 500;
      margin: 0;
    }

.contact-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 28px;

      font-size: 13px;
    }

.contact-links a {
      border-bottom: 1px solid currentColor;
      padding-bottom: 3px;
    }

.contact {
      border-top: 0;
      padding: 0;
      min-height: 0;
      display: block;
    }

.contact-inner {
      width: min(100%, var(--content-width));
      margin: 0 auto;
      /* the bottom padding parks the links in the clean sky, about 55 rows down into
         the picture: above its lamp post (which starts ~65 rows down) at any width */
      padding: clamp(56px, 6vw, 96px) var(--page-padding) calc(var(--scene-h) * 0.3 - var(--px) * 55);

      min-height: 65vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: clamp(32px, 4vw, 64px); /* heading and links never crowd each other */
    }

.contact .section-index {
      color: var(--text);
    }

/* Mubien-faithful case-study layout, keeping Andy's own site shell and sky footer. */
:root {
  --paper: #f4f3ef;
  --ink: #11110f;
  --project-muted: #77766f;
  --project-line: #d8d6cf;
  --project-gutter: clamp(20px, 3vw, 46px);
  --page-padding: clamp(20px, 4vw, 64px);
  --content-width: 1600px;
}

body { background: var(--paper); color: var(--ink); }
.project-content, .project-rail { font-family: "DM Sans", Arial, sans-serif; }
.page { max-width: 1600px; margin: 0 auto; padding: 0; overflow: visible; }
.main-site-header {
  position: sticky; top: 0; z-index: 100;
  padding: 18px var(--page-padding);
  margin: 0;
  background: linear-gradient(to bottom, rgba(244,243,239,.96), rgba(244,243,239,.82), rgba(244,243,239,0));
  backdrop-filter: blur(4px);
}
.nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:24px; }
.brand { font-size:14px; font-weight:700; letter-spacing:-.02em; }
.nav-links { display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.25; }
.nav-links a { width:fit-content; position:relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 350ms ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.nav-meta { justify-self:end; text-align:right; font-size:11px; line-height:1.4; color:var(--project-muted); text-transform:uppercase; letter-spacing:.08em; }

.page-layout { display:grid; grid-template-columns:minmax(210px, 23%) minmax(0,1fr); max-width:1800px; margin:0 auto; align-items:stretch; }
.project-rail { min-width:0; border-right:1px solid var(--project-line); padding:28px 24px 44px var(--project-gutter); }
.rail-sticky { position:sticky; top:105px; }
.eyebrow { margin:0 0 16px; color:var(--project-muted); font-size:9px; line-height:1.4; text-transform:uppercase; letter-spacing:.1em; }
.eyebrow span { float:right; }
.project-rail .rail-title { margin:0 0 17px; font-size:clamp(24px,2.2vw,34px); font-weight:500; letter-spacing:-.06em; line-height:1.02; }
.rail-summary { max-width:235px; margin:0; color:#686963; font-size:12px; line-height:1.7; }
.rail-rule { height:1px; margin:25px 0 20px; background:var(--project-line); }
.project-rail .project-info { display:flex; flex-direction:column; gap:17px; padding:0; margin:0; border:0; background:transparent; }
.project-rail .info-item { display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; padding:0; }
.project-rail .info-label { color:#898a84; font-size:10px; line-height:1.55; text-transform:none; letter-spacing:0; }
.project-rail .info-value { color:var(--ink); font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
.text-link { display:flex; justify-content:space-between; gap:12px; font-size:11px; transition:color .2s ease; }
.text-link:hover { color:#55564f; }
.project-content { min-width:0; }

/* Intro follows the compact editorial hierarchy of the reference. */
.project-content .project-header { position:static; padding:20px var(--project-gutter) 22px; margin:0; background:none; backdrop-filter:none; }
.crumbs { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 46px; color:#777872; font-size:10px; }
.crumbs i { color:#b2b2ad; font-style:normal; }
.project-content .project-kicker { margin:0 0 17px; color:#72736d; font-size:9px; line-height:1.4; text-transform:uppercase; letter-spacing:.1em; }
.project-content .project-header-grid { display:block; }
.project-content .project-title { max-width:1000px; margin:0 0 27px; font-size:clamp(38px,5.1vw,76px); line-height:.98; font-weight:400; letter-spacing:-.065em; }
.project-content .project-intro { max-width:680px; color:#666760; font-size:14px; line-height:1.75; }
.intro-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:42px; padding-top:12px; border-top:1px solid var(--project-line); color:#777872; font-size:10px; }

/* Broad project hero, set inside the right content column rather than full-viewport chrome. */
.project-content .hero-media { height:clamp(250px,38vw,540px); margin:0 var(--project-gutter); overflow:hidden; background:#e2e0d9; }
.project-content .hero-media-inner { width:100%; height:100%; min-height:0; }
.project-content .hero-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.project-content .caption { padding:10px 0 0; color:#777872; font-size:9px; line-height:1.5; }
.project-content .hero-media .caption { position:static; }

/* Story sections use the reference's labelled-left / narrative-right rhythm. */
.project-content .section { padding:clamp(58px,8vw,110px) var(--project-gutter); margin:0; border:0; }
.project-content .section > .narrow { display:grid; grid-template-columns:minmax(105px,1fr) minmax(0,2fr); gap:clamp(22px,3vw,40px); width:100%; max-width:1100px; margin:0 auto; }
.project-content .section-label { color:#777872; font-size:9px; line-height:1.5; text-transform:uppercase; letter-spacing:.08em; }
.project-content .large-copy { grid-column:2; margin:0 0 21px; max-width:680px; color:#242521; font-size:clamp(28px,3.3vw,48px); line-height:1.03; font-weight:400; letter-spacing:-.06em; }
.project-content .body-copy { grid-column:2; max-width:650px; color:#686963; font-size:13px; line-height:1.8; }
.project-content .body-copy p { margin:0 0 14px; }
.project-content .split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:start; }
.project-content .split-copy { min-width:0; }
.project-content .split-heading { margin:0 0 22px; max-width:600px; color:#242521; font-size:clamp(28px,3.25vw,46px); font-weight:400; line-height:1.03; letter-spacing:-.06em; }
.project-content .split-media { min-width:0; margin:0; overflow:hidden; background:#e2e0d9; }
.project-content .split-media img { display:block; width:100%; height:100%; min-height:230px; max-height:470px; object-fit:cover; }
.project-content .media-landscape { aspect-ratio:1.35; }
.project-content .media-portrait { aspect-ratio:.85; }
.project-content .media-square { aspect-ratio:1; }
.project-content .gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 var(--project-gutter); margin:0; }
.project-content .gallery-item { min-width:0; margin:0; overflow:hidden; background:#e2e0d9; }
.project-content .gallery-item img { display:block; width:100%; height:100%; min-height:190px; max-height:440px; object-fit:cover; }
.project-content .gallery-item.large { grid-column:1/-1; }
.project-content .gallery-item figcaption { padding:11px 12px; background:#e9e7e2; color:#666760; font-size:9px; line-height:1.5; }
.project-content .dark-section { margin:clamp(65px,9vw,130px) var(--project-gutter); padding:clamp(36px,6vw,84px); background:#20211d; color:#f4f3ef; }
.project-content .dark-statement { max-width:850px; font-size:clamp(28px,3.5vw,50px); line-height:1.08; font-weight:400; letter-spacing:-.055em; }
.project-content .technical-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(22px,4vw,60px); }
.project-content .technical-heading { font-size:clamp(26px,3vw,42px); font-weight:400; letter-spacing:-.055em; line-height:1.05; }
.project-content .technical-row { display:grid; grid-template-columns:minmax(95px,.8fr) minmax(0,1.2fr); gap:16px; padding:15px 0; border-top:1px solid var(--project-line); }
.project-content .technical-name { font-size:11px; }
.project-content .technical-description { color:#686963; font-size:11px; line-height:1.7; }
.project-content .bleed { margin:8px var(--project-gutter) 0; }
.project-content .reflection { max-width:800px; margin:0 auto; font-size:clamp(24px,3vw,42px); line-height:1.15; font-weight:400; letter-spacing:-.05em; }
.project-content .credits { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; }
.project-content .credit-row { display:grid; grid-template-columns:110px minmax(0,1fr); gap:15px; padding:13px 0; border-top:1px solid var(--project-line); font-size:11px; line-height:1.55; }
.project-content .credit-label { color:#777872; }
.project-content .project-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:35px; }
.project-content .project-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 15px; border:1px solid #bfc0ba; border-radius:100px; font-size:11px; }
.project-content .project-link:hover { background:#22231f; border-color:#22231f; color:#fff; }

/* Keep the next-project transition, but place it before the homepage footer. */
.project-content .next-project { padding:64px var(--project-gutter) 74px; border-top:1px solid var(--project-line); background:transparent; }
.project-content .next-inner { width:100%; max-width:none; margin:0; padding:0; }
.project-content .next-label { margin-bottom:18px; color:#777872; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.project-content .next-project a { display:flex; align-items:center; justify-content:space-between; gap:20px; border:0; }
.project-content .next-title { margin:0; font-size:clamp(30px,4vw,58px); font-weight:400; line-height:1; letter-spacing:-.06em; }
.project-content .next-arrow { font-size:28px; }

.sky { --content-width: 1600px; --page-padding: clamp(20px, 4vw, 64px); }

@media (max-width: 1050px) {
  .page-layout { grid-template-columns:minmax(190px,25%) minmax(0,1fr); }
  .project-rail { padding-right:18px; }
  .project-rail .info-item { grid-template-columns:1fr; gap:3px; }
  .project-content .technical-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .main-site-header { padding-top:14px; }
  .nav { grid-template-columns:1fr auto; }
  .nav-links { grid-column:1/-1; grid-row:2; flex-direction:row; flex-wrap:wrap; gap:3px 18px; padding-top:10px; }
  .nav-meta { display:none; }
  .page-layout { display:block; }
  .project-rail { display:none; }
  .project-content .project-header { padding-top:18px; }
  .crumbs { margin-bottom:36px; font-size:9px; }
  .project-content .project-title { font-size:clamp(36px,8.5vw,58px); margin-bottom:20px; }
  .project-content .project-intro { font-size:12px; }
  .intro-bottom { margin-top:30px; font-size:9px; }
  .project-content .hero-media { height:66vw; min-height:245px; max-height:420px; }
  .project-content .section > .narrow { grid-template-columns:1fr; gap:18px; }
  .project-content .large-copy, .project-content .body-copy { grid-column:1; }
  .project-content .split { grid-template-columns:1fr; gap:24px; }
  .project-content .split-media { order:2; }
  .project-content .gallery { grid-template-columns:1fr; }
  .project-content .gallery-item.large { grid-column:auto; }
  .project-content .technical-grid { grid-template-columns:1fr; }
  .project-content .credits { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:8px; }
  .footer-inner div, .footer-inner div:nth-child(2), .footer-inner div:nth-child(3) { text-align:left; }
  .project-content .next-project { padding:52px var(--project-gutter); }
}
@media (max-width: 520px) {
  .nav-links { gap:3px 14px; font-size:12px; }
  .project-content .project-title { font-size:clamp(34px,9vw,48px); }
  .intro-bottom { align-items:start; }
  .project-content .technical-row { grid-template-columns:1fr; gap:6px; }
  .project-content .credit-row { grid-template-columns:90px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition:none; }
  .cloud { animation:none; translate:calc(var(--phase) * 100vw) 0; }
}