@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --muted: #8a8a8a;
  --rule: #d9d9d9;

  --font: 'Inter', sans-serif;

  --gutter: clamp(24px, 4.5vw, 64px);
  --section-gap: clamp(48px, 6vw, 96px);
  --col-gap: clamp(20px, 3vw, 40px);
}

/* Universal column gap for every 6-column grid row, so text and cells
   never sit flush against their neighbor. */
.nav-row,
.hero-new,
.section-head-row,
.about-teaser-row,
.footer-row,
.footer-bottom-row,
.page-head-row,
.body-row,
.media-row,
.proj-nav-row {
  column-gap: var(--col-gap);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: overflow:hidden turns body into a scroll
     container, which silently stops position:sticky working on the nav.
     overflow:clip suppresses the same sideways overflow without that. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font); background: none; border: none; cursor: pointer; color: inherit; }
ul { list-style: none; }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- NAV (as grid row) ---------- */

.nav-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  /* follows the scroll on every page. z-index sits below the homepage
     intro overlay (200) but above all page content. */
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
}

/* anchor jumps land below the sticky bar rather than under it */
[id] { scroll-margin-top: 76px; }

.nav-row > * {
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nav-cell--muted a {
  color: var(--muted);
}

/* Keep all five links on a single row at every width. The old rule
   dropped to 3 columns, which wrapped Contact and Services onto a
   second line and left a dead cell. */
@media (max-width: 760px) {
  .nav-row > * { padding: 15px 4px; }
  .nav-cell a { font-size: 12px; }
  [id] { scroll-margin-top: 60px; }
}

@media (max-width: 480px) {
  .nav-row > * { padding: 13px 2px; }
  .nav-cell a { font-size: 10.5px; letter-spacing: -0.01em; }
}

@media (max-width: 360px) {
  .nav-cell a { font-size: 9.5px; }
}

.nav-cell a {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  position: relative;
  transition: opacity 0.25s ease;
}

.nav-cell a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.nav-cell a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ---------- INTRO SEQUENCE ---------- */

.intro {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  z-index: 200;
}

.intro-image-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: top, left, width, height;
}

.intro-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.intro-logo {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.intro-logo img {
  width: clamp(220px, 30vw, 420px);
  height: auto;
}

.intro-skip {
  position: fixed;
  bottom: 28px;
  right: var(--gutter);
  z-index: 5;
  font-size: 12px;
  color: var(--paper);
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.intro-skip:hover { opacity: 1; }

[data-build] {
  opacity: 0;
  transform: translateY(16px);
}

/* ---------- HERO (full-width headline + photo band) ---------- */

.hero-new {
  padding: 0;
}

.hero-headline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  padding: 48px var(--gutter) 32px;
  gap: 40px;
}

.hero-logo-img {
  width: clamp(280px, 55vw, 760px);
  height: auto;
  display: block;
}

.hero-headline-meta {
  text-align: right;
  padding-bottom: 8px;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 6px;
}

.hero-tagline {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.hero-photo-band {
  width: 100%;
  height: clamp(260px, 38vw, 520px);
  overflow: hidden;
}

.hero-photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-info-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--col-gap);
  padding: 32px var(--gutter) 0;
}

.hero-info-label {
  grid-column: span 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  padding-top: 4px;
}

.hero-info-copy {
  grid-column: span 3;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.hero-readmore {
  grid-column: span 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  gap: 8px;
  transition: gap 0.25s ease, opacity 0.25s ease;
}

.hero-readmore:hover {
  gap: 12px;
  opacity: 0.7;
}

.hero-divider {
  border-top: 1px solid var(--rule);
  margin-top: 48px;
}

@media (max-width: 860px) {
  .hero-headline-row {
    grid-template-columns: 1fr;
  }
  .hero-headline-meta {
    text-align: left;
  }
  .hero-info-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-info-label { grid-column: span 2; }
  .hero-info-copy { grid-column: span 2; }
  .hero-readmore { grid-column: span 2; justify-content: flex-start; }
}

.pin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  width: fit-content;
  transition: gap 0.25s ease, opacity 0.25s ease;
}

.pin-link:hover {
  gap: 12px;
  opacity: 0.7;
}

/* ---------- WORK INDEX (grid-celled, GO-style, on homepage) ---------- */

.section-head-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}

.section-head-row > * {
  padding: 0 var(--gutter);
}

.section-head-row h2 {
  grid-column: span 3;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.section-head-row p {
  grid-column: span 3;
  font-size: 14px;
  color: var(--muted);
  max-width: 280px;
  justify-self: end;
  text-align: right;
}

.work-grid-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* row-gap is much larger than column-gap: once the grid wraps past three
     projects, row two's label needs clearance from row one's imagery */
  gap: 52px 24px;
  border-top: 1px solid var(--rule);
  padding: 0 var(--gutter) 56px;
}

.work-cell {
  display: flex;
  flex-direction: column;
}

.work-cell-text {
  height: 110px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.work-cell-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: 32px;
  margin-bottom: 8px;
}

.work-cell-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
}

.work-cell-media {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #fafafa;
  margin-top: 20px;
}

.work-cell-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}

.work-cell:hover .work-cell-media img {
  transform: scale(1.04);
  opacity: 0.92;
}

@media (max-width: 860px) {
  .work-grid-cells {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section-head-row h2,
  .section-head-row p { grid-column: span 2; }
  .section-head-row { grid-template-columns: repeat(2, 1fr); }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- ABOUT TEASER (grid row) ---------- */

.about-teaser-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule);
  padding-top: 56px;
  padding-bottom: var(--section-gap);
}

.about-teaser-row > * {
  padding: 0 var(--gutter);
}

.about-teaser-row h2 {
  grid-column: span 4;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.about-teaser-row div {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.about-teaser-row div p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .about-teaser-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-teaser-row h2,
  .about-teaser-row div {
    grid-column: span 2;
  }
}

/* ---------- FOOTER (white, grid-celled) ---------- */

.site-footer {
  background: var(--paper);
  color: var(--ink);
}

.footer-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule);
}

.footer-row > * {
  padding: 72px var(--gutter);
}

.footer-cta-cell {
  grid-column: span 3;
}

.footer-cta {
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 24px;
}

.footer-email {
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  width: fit-content;
  padding-bottom: 3px;
  transition: opacity 0.25s ease;
}

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

.footer-col { grid-column: span 1; }

.footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 18px;
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--ink);
}

.footer-col a:hover { text-decoration: underline; }

.footer-bottom-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule);
}

.footer-bottom-row > * {
  padding: 22px var(--gutter);
  font-size: 12px;
  color: var(--muted);
}

.footer-bottom-row span:first-child { grid-column: span 3; }
.footer-bottom-row span:last-child { grid-column: span 3; text-align: right; }

@media (max-width: 860px) {
  .footer-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-cta-cell,
  .footer-col {
    grid-column: span 2;
  }
  .footer-bottom-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-bottom-row span:first-child,
  .footer-bottom-row span:last-child {
    grid-column: span 1;
  }
}

/* ---------- INNER PAGES (about, contact, work index, project) ---------- */

.page-head-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--rule);
}

.page-head-row > * {
  padding: 120px var(--gutter) 56px;
}

.page-head-row h1 {
  grid-column: span 4;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.page-head-row .meta-cell {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
}

.meta-block span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 6px;
}

.meta-block p {
  font-size: 14px;
}

.meta-link {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.meta-link:hover {
  border-bottom-color: var(--ink);
}

@media (max-width: 860px) {
  .page-head-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-head-row h1,
  .page-head-row .meta-cell {
    grid-column: span 2;
  }
}

.body-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.body-row > * {
  padding: 0 var(--gutter);
}

.body-row .text-cell {
  grid-column: span 4;
}

.body-row .text-cell p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 640px;
}

.body-row .spacer-cell {
  grid-column: span 2;
}

@media (max-width: 860px) {
  .body-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .body-row .text-cell,
  .body-row .spacer-cell {
    grid-column: span 2;
  }
}

.media-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
  gap: 8px;
}

.media-row > * {
  padding: 0 !important;
  aspect-ratio: 16/10;
  overflow: hidden;
}

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

.media-row.split > * {
  grid-column: span 3;
  aspect-ratio: 4/5;
}

.media-row.full > * {
  grid-column: span 6;
}

@media (max-width: 860px) {
  .media-row { grid-template-columns: repeat(2, 1fr); }
  .media-row.split > * { grid-column: span 2; aspect-ratio: 4/3; }
  .media-row.full > * { grid-column: span 2; }
}

.proj-nav-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule);
  margin-bottom: var(--section-gap);
}

.proj-nav-row > * {
  padding: 32px var(--gutter);
}

.proj-nav-row a:first-child { grid-column: span 3; }
.proj-nav-row a:last-child { grid-column: span 3; text-align: right; }

@media (max-width: 860px) {
  .proj-nav-row { grid-template-columns: repeat(2, 1fr); }
  .proj-nav-row a:first-child,
  .proj-nav-row a:last-child { grid-column: span 1; }
}

/* ---------- CONTACT PAGE ---------- */

.contact-page {
  padding-top: 64px;
  padding-bottom: var(--section-gap);
}

.contact-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 72px;
  gap: 40px;
  padding: 0 var(--gutter);
}

.contact-big-title {
  font-size: clamp(52px, 8.5vw, 112px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
}

.contact-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 280px;
  text-align: right;
  flex-shrink: 0;
  padding-bottom: 8px;
}

.contact-rule {
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  padding: 64px var(--gutter) 0;
}

.contact-left {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.contact-info-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.contact-info-group p,
.contact-info-group a {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.contact-info-group a:hover {
  text-decoration: underline;
}

.contact-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.contact-right .field {
  margin-bottom: 28px;
}

.contact-right .field input,
.contact-right .field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-family: var(--font);
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  transition: border-color 0.3s ease;
}

.contact-right .field input::placeholder,
.contact-right .field textarea::placeholder {
  color: var(--muted);
}

.contact-right .field input:focus,
.contact-right .field textarea:focus {
  border-color: var(--ink);
  outline: none;
}

.contact-right .field textarea {
  resize: vertical;
  min-height: 110px;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  padding: 16px 28px;
  margin-top: 8px;
  transition: background 0.25s ease, color 0.25s ease;
  width: fit-content;
}

.submit-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.form-status {
  font-size: 13px;
  margin-top: 16px;
  display: none;
}

.form-status.is-visible { display: block; }

@media (max-width: 860px) {
  .contact-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-sub { text-align: left; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- ABOUT PAGE ---------- */

.about-page {
  padding-bottom: 0;
}

.about-hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--col-gap);
  padding: 72px var(--gutter) 64px;
  align-items: flex-end;
}

.about-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 20px;
}

.about-title {
  font-size: clamp(52px, 8.5vw, 112px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
}

.about-intro-copy {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 380px;
  align-self: flex-end;
  justify-self: end;
  text-align: right;
}

.about-rule {
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}

/* Experience / Education rows */

.about-section {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--col-gap);
  padding: 48px var(--gutter);
}

.about-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  padding-top: 2px;
}

.about-section-content {
  display: flex;
  flex-direction: column;
}

.exp-block {
  padding: 20px 0;
}

.exp-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 8px;
}

.exp-year {
  font-size: 12px;
  color: var(--muted);
}

.exp-company {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.exp-role {
  font-size: 13px;
  color: var(--muted);
}

.exp-location {
  font-size: 12px;
  color: var(--muted);
}

/* Services — expandable rows */

.about-section--services .about-section-content {
  gap: 0;
}

.service-item {
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.service-item:first-child {
  border-top: 1px solid var(--rule);
}

.service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  user-select: none;
  gap: 16px;
}

.service-header:hover {
  opacity: 0.7;
}

.service-num {
  display: none;
}

.service-name {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-arrow {
  font-size: 18px;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  display: block;
  text-align: right;
}

.service-item.is-open .service-arrow {
  transform: rotate(90deg);
}

.service-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), padding 0.35s ease;
  padding-left: 0;
}

.service-item.is-open .service-detail {
  max-height: 240px;
  padding-bottom: 28px;
}

.service-detail p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 18px;
}

.service-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  width: fit-content;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.service-cta:hover {
  opacity: 0.6;
}

.about-section--two-col {
  grid-template-columns: 120px 1fr 120px 1fr;
}

@media (max-width: 860px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-section--two-col {
    grid-template-columns: 1fr;
  }
  .service-detail { padding-left: 0; }
}


/* ---------- SERVICES PAGE ---------- */

.services-page {
  padding-bottom: 0;
}

.services-hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--col-gap);
  padding: 72px var(--gutter) 64px;
  align-items: flex-end;
}

.services-title {
  font-size: clamp(52px, 8.5vw, 112px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.services-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
  gap: 28px;
}

.services-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 420px;
}

.services-enquire {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  width: fit-content;
  transition: opacity 0.25s ease;
}

.services-enquire:hover { opacity: 0.6; }

.services-rule {
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}

/* Accordion */

.services-accordion {
  padding: 0 var(--gutter);
}

.srv-item {
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.srv-item:first-child {
  border-top: 1px solid var(--rule);
}

.srv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  user-select: none;
}

.srv-header:hover { opacity: 0.65; }

.srv-name {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.srv-arrow {
  font-size: 20px;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}

.srv-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.16,1,0.3,1);
  padding-left: 0;
}

.srv-item.is-open .srv-detail {
  max-height: 400px;
  padding-bottom: 36px;
}

.srv-detail p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 20px;
}

.srv-list {
  list-style: none;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  flex-direction: column;
  max-width: 480px;
}

.srv-list li {
  font-size: 13px;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}

.srv-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  width: fit-content;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.srv-cta:hover { opacity: 0.6; }

/* Packages */

.packages-section {
  padding: 72px var(--gutter) 80px;
}

.packages-header {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--col-gap);
  align-items: flex-end;
  margin-bottom: 56px;
}

.packages-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.packages-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 320px;
  justify-self: end;
  text-align: right;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  margin-bottom: 40px;
}

.package-card {
  background: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
}

.package-card {
  background: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}

.package-card:hover {
  background: #f5f5f3;
}

.package-top {
  margin-bottom: 32px;
}

.package-tier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 10px;
}


.package-tagline {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.package-list {
  list-style: none;
  flex: 1;
  margin-bottom: 36px;
}

.package-list li {
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.package-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  width: fit-content;
  transition: opacity 0.2s ease;
}

.package-cta:hover { opacity: 0.6; }

.packages-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.packages-note a {
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s ease;
}

.packages-note a:hover {
  border-color: var(--ink);
}

@media (max-width: 860px) {
  .services-hero,
  .packages-header {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .services-hero-right,
  .packages-sub,
  .about-intro-copy {
    text-align: left;
    align-items: flex-start;
    justify-self: start;
  }
  .packages-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- PROJECT PAGES ---------- */

.proj-page {
  padding-bottom: var(--section-gap);
}

.proj-hero-img {
  width: 100%;
  height: clamp(320px, 55vw, 680px);
  overflow: hidden;
}

.proj-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.proj-title-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: flex-end;
  padding: 56px var(--gutter) 48px;
}

.proj-title {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

.proj-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-self: end;
  text-align: right;
}

.proj-meta-item {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  align-items: baseline;
}

.proj-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.proj-meta-item span:last-child {
  font-size: 14px;
  color: var(--ink);
}

.proj-rule {
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}

.proj-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--col-gap);
  padding: 64px var(--gutter);
}

.proj-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding-top: 4px;
}

.proj-section-body {
  max-width: 640px;
}

.proj-section-body--wide {
  max-width: 100%;
}

.proj-lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.proj-section-body p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.proj-section-body .proj-lead {
  color: var(--ink);
}

/* Full-width image */
.proj-img-full {
  width: 100%;
  height: clamp(280px, 45vw, 580px);
  overflow: hidden;
  margin: 56px 0;
}

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

/* Image pair */
.proj-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 56px var(--gutter);
}

.proj-img-pair-item {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.proj-img-pair-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* Colour swatches */
.proj-colours {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.proj-colour-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proj-swatch {
  width: 80px;
  height: 80px;
}

.proj-swatch-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.proj-swatch-val {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Typography specimen */
.proj-type-specimen {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 48px;
  align-items: start;
}

.proj-type-display {
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.proj-type-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

.proj-type-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 420px;
}

.proj-type-sample {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}

/* Outcome — slightly different treatment, larger lead */
.proj-section--outcome .proj-section-body {
  max-width: 560px;
}

/* Prev/next nav */
.proj-nav-row {
  display: flex;
  justify-content: space-between;
  padding: 48px var(--gutter) 0;
}

.proj-nav-row a {
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color 0.2s ease;
}

.proj-nav-row a:hover {
  border-color: var(--ink);
}

@media (max-width: 860px) {
  .proj-title-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .proj-meta {
    justify-self: start;
    text-align: left;
  }
  .proj-meta-item {
    justify-content: flex-start;
  }
  .proj-section {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px var(--gutter);
  }
  .proj-img-pair {
    grid-template-columns: 1fr;
  }
  .proj-type-specimen {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.proj-img-full--dark {
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--gutter);
  height: auto;
}

.proj-img-full--dark img {
  width: auto;
  height: auto;
  max-width: 60%;
  object-fit: contain;
}

.proj-img-full--pad {
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--gutter);
  height: auto;
}

.proj-img-full--pad img {
  width: auto;
  height: auto;
  max-width: 50%;
  object-fit: contain;
}

.proj-type-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- PROJECT PAGE — SKETCH LAYOUT ---------- */

/* Intro: name/paragraph left, meta right */
.proj-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  padding: 56px var(--gutter) 48px;
  align-items: start;
}

.proj-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-bottom: 20px;
}

.proj-intro-para {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 440px;
}

.proj-intro-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-self: end;
  text-align: right;
}

.proj-meta-item {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  align-items: baseline;
}

.proj-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.proj-meta-item span:last-child {
  font-size: 14px;
  color: var(--ink);
}

/* Challenge / Process — two equal columns */
.proj-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  padding: 56px var(--gutter);
}

.proj-col-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
}

.proj-col-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

/* Colour section */
.proj-colour-section {
  padding: 56px var(--gutter);
}

.proj-colour-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-bottom: 48px;
}

.proj-colour-title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.proj-colour-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 360px;
  justify-self: end;
  text-align: right;
}

.proj-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.proj-swatch-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
}

.proj-swatch-block {
  width: 100%;
  aspect-ratio: 1 / 1;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}

.proj-swatch-card:hover .proj-swatch-block {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.proj-swatch-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.proj-swatch-val {
  font-size: 12px;
  color: var(--muted);
}

/* Typography section */
.proj-type-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  padding: 56px var(--gutter);
  align-items: center;
}

.proj-type-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proj-type-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- SLIDE-UP SCROLL ANIMATIONS ---------- */

.slide-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

.slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger swatches */
.proj-swatch-card:nth-child(1) { transition-delay: 0ms; }
.proj-swatch-card:nth-child(2) { transition-delay: 80ms; }
.proj-swatch-card:nth-child(3) { transition-delay: 160ms; }
.proj-swatch-card:nth-child(4) { transition-delay: 240ms; }

@media (max-width: 860px) {
  .proj-intro,
  .proj-two-col,
  .proj-colour-header,
  .proj-type-section {
    grid-template-columns: 1fr;
  }
  .proj-intro-meta { justify-self: start; text-align: left; }
  .proj-meta-item { justify-content: flex-start; }
  .proj-colour-desc { justify-self: start; text-align: left; }
  .proj-swatches { grid-template-columns: repeat(2, 1fr); }
}

.work-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: #e8e8e8;
}

/* ---------- CAKE SOCIAL PROJECT PAGE ---------- */

/* Placeholder blocks */
.proj-placeholder {
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
}

/* Colour section: swatches left, paragraph right */
.cs-colour-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: center;
  padding: 56px var(--gutter);
}

.cs-swatches {
  display: flex;
  gap: 24px;
}

.cs-colour-para {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 400px;
}

/* Typography section: image left, text + second image right */
.cs-type-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  padding: 56px var(--gutter);
  align-items: start;
}

.cs-type-img {
  width: 100%;
  aspect-ratio: 4/3;
}

.cs-type-caption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.cs-type-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-type-secondary {
  width: 100%;
  aspect-ratio: 4/3;
  margin-top: 8px;
}

/* Full-width logo */
.cs-logo-full {
  padding: 0 var(--gutter) 40px;
}

.cs-logo-placeholder {
  width: 100%;
  height: clamp(280px, 40vw, 520px);
}

/* Logo variations */
.cs-logo-vars {
  padding: 0 var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-logo-var-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cs-var {
  aspect-ratio: 4/3;
}

/* 2x2 mockup grid */
.cs-mockup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 var(--gutter) 8px;
}

.cs-mock {
  aspect-ratio: 4/3;
}

/* Business card full width */
.cs-biz-card {
  padding: 0 var(--gutter) 8px;
}

.cs-biz-placeholder {
  width: 100%;
  height: clamp(200px, 30vw, 400px);
}

/* Mockup pair */
.cs-mockup-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 var(--gutter) 56px;
}

.cs-mock-pair {
  aspect-ratio: 4/3;
}

/* Photography section */
.cs-photo-section {
  padding: 56px var(--gutter) 56px;
}

.cs-photo-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-bottom: 40px;
}

.cs-photo-title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cs-photo-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 360px;
  justify-self: end;
  text-align: right;
}

.cs-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cs-photo {
  aspect-ratio: 3/4;
}

@media (max-width: 860px) {
  .cs-colour-section,
  .cs-type-section,
  .cs-photo-header { grid-template-columns: 1fr; }
  .cs-logo-var-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-mockup-grid,
  .cs-mockup-pair { grid-template-columns: 1fr; }
  .cs-photo-grid { grid-template-columns: 1fr; }
  .cs-photo-desc { justify-self: start; text-align: left; }
}









/* ============================================
   CAKE SOCIAL — PARIS AGENCY EDITORIAL
   ============================================ */

.cs-page {
  --S: 96px;   /* single spacing unit — everything is a multiple of this */
  --G: 3px;    /* image grid gap */
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Placeholders ---- */
.cs-ph { background: #e8e8e8; display: block; width: 100%; }
.cs-ph--cinematic { aspect-ratio: 21/9; }
.cs-ph--wide      { aspect-ratio: 16/6; }
.cs-ph--landscape { aspect-ratio: 4/3; }
.cs-ph--square    { aspect-ratio: 1/1; }
.cs-ph--portrait  { aspect-ratio: 3/4; }

/* ---- Hero ---- */
.cs-hero {
  width: 100%;
  height: 75vh;
  min-height: 500px;
  max-height: 680px;
  overflow: hidden;
}
.cs-hero img, .cs-hero .cs-ph {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

/* ---- Universal block spacer ---- */
/* Every major section is wrapped in .cs-block which provides
   identical padding above and below — no exceptions */
.cs-block {
  padding: 0 var(--gutter);
  margin-top: var(--S);
}

/* ---- Overline ---- */
.cs-overline {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: block;
}

/* ---- Opener ---- */
.cs-opener {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: end;
  padding: calc(var(--S) * 0.75) var(--gutter) var(--S);
}

.cs-project-name {
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.cs-opener-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}

.cs-opener-tagline {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.cs-opener-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 340px;
}

.cs-meta-row-inline {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 13px;
}

.cs-meta-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  min-width: 64px;
}

.cs-meta-val { color: var(--ink); }

/* ---- Full width image (inside .cs-block) ---- */
.cs-full { overflow: hidden; width: 100%; }
.cs-full img, .cs-full .cs-ph {
  width: 100%; display: block; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.cs-full:hover img { transform: scale(1.03); }

/* ---- Caption below image ---- */
.cs-caption {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  margin-top: 20px;
  align-items: start;
}

.cs-caption-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---- Narrative: 3 columns ---- */
.cs-narrative {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.cs-narrative-item { display: flex; flex-direction: column; }

.cs-narrative-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---- Color palette ---- */
.cs-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.cs-palette-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cs-palette-title {
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: -3px;
}

.cs-palette-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.cs-swatches {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}

.cs-swatch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  cursor: default;
  transition: padding-left 0.55s cubic-bezier(0.16,1,0.3,1);
}
.cs-swatch-wrap:first-child { border-top: 1px solid var(--rule); }
.cs-swatch-wrap:hover { padding-left: 14px; }

.cs-swatch-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cs-swatch-block {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  transition: width 0.55s cubic-bezier(0.16,1,0.3,1), box-shadow 0.55s ease;
}
.cs-swatch-wrap:hover .cs-swatch-block {
  width: 68px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.cs-swatch-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cs-swatch-hex {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Split: image + text ---- */
.cs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cs-split-img { overflow: hidden; }
.cs-split-img img, .cs-split-img .cs-ph {
  width: 100%; height: 100%;
  object-fit: cover; display: block; min-height: 380px;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.cs-split-img:hover img { transform: scale(1.04); }

.cs-split-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cs-split-heading {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cs-split-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---- Pair (2-col images) ---- */
.cs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--G);
}

.cs-pair--mt { margin-top: var(--G); }

.cs-pair-img { overflow: hidden; }
.cs-pair-img img, .cs-pair-img .cs-ph {
  width: 100%; aspect-ratio: 1/1; display: block; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.cs-pair-img:hover img { transform: scale(1.04); }

/* ---- Photography ---- */
.cs-photo-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 32px;
}

.cs-photo-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-top: 8px;
}

.cs-photo-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  padding-bottom: 6px;
}

.cs-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--G);
}

.cs-trio-img { overflow: hidden; }
.cs-trio-img img, .cs-trio-img .cs-ph {
  width: 100%; aspect-ratio: 3/4; display: block; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.cs-trio-img:hover img { transform: scale(1.04); }

/* ---- Nav ---- */
.cs-nav {
  padding: var(--S) var(--gutter) var(--S);
}

.cs-nav a {
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color 0.25s ease;
}
.cs-nav a:hover { border-color: var(--ink); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .cs-opener    { grid-template-columns: 1fr; gap: 32px; }
  .cs-narrative { grid-template-columns: 1fr; gap: 36px; }
  .cs-palette   { grid-template-columns: 1fr; gap: 40px; }
  .cs-split     { grid-template-columns: 1fr; gap: 32px; }
  .cs-caption   { grid-template-columns: 1fr; gap: 10px; }
  .cs-photo-header { grid-template-columns: 1fr; }
  .cs-pair      { grid-template-columns: 1fr; }
  .cs-trio      { grid-template-columns: 1fr; }
}


/* ============================================
   CASE STUDY SYSTEM v2
   --------------------------------------------
   Shared by work/matcha-mania.html and
   work/freaky-cat.html. Scoped to .cs-page--v2
   so work/cake-social.html (the older v1 layout)
   is completely unaffected.

   To start another case study: copy the markup
   skeleton from either page. Nothing here is
   project specific; per-project color lives in
   inline --c / --ink-on on .cs-seg.
   ============================================ */

.cs-page--v2 {
  --S:  84px;   /* space between a section rule and its content */
  --Si: 44px;   /* space inside a section: text block to imagery */
}

/* ---- Section rules ----
   Every section opens with a hairline inset to the gutter, so the
   page reads as a set of clearly separated parts. Images themselves
   carry no border. */
.cs-page--v2 .cs-block {
  position: relative;
  margin-top: 0;
  padding-top: var(--S);
  padding-bottom: var(--S);
}
.cs-page--v2 .cs-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--rule);
}
/* consecutive blocks share one rule, never stack two */
.cs-page--v2 .cs-block + .cs-block { padding-top: var(--S); }

/* The meta strip is a compact row, not a full section */
.cs-page--v2 .cs-block--facts {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ---- Artwork field: shown whole, on white, no border ---- */
.cs-page--v2 .cs-art {
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 5vw, 80px);
}
.cs-page--v2 .cs-art img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  display: block;
}

/* Same idea as one half of a .cs-split */
.cs-page--v2 .cs-split-img--art {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  min-height: 340px;
}
.cs-page--v2 .cs-split-img--art img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 320px;
  object-fit: contain;
}
.cs-page--v2 .cs-split-img--art:hover img { transform: none; }

/* ---- Motion: the animated lockup ---- */
.cs-page--v2 .cs-motion {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px) 0;
}
.cs-page--v2 .cs-motion img {
  width: 100%;
  max-width: 720px;   /* sized to the smallest motion source, never upscaled */
  height: auto;
  display: block;
}
/* For motion assets with a wider native source (freakycat-01.gif is
   1920px), so the loop is not stranded small in the section. */
.cs-page--v2 .cs-motion--wide img { max-width: 1040px; }

/* ---- Section header: the designated text zone ---- */
.cs-page--v2 .cs-shead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: var(--Si);
}
.cs-page--v2 .cs-shead-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.cs-page--v2 .cs-shead-desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 440px;
  padding-bottom: 5px;
}

/* ---- Caption below an image ---- */
.cs-page--v2 .cs-caption {
  grid-template-columns: 180px 1fr;
  gap: 56px;
  margin-top: var(--Si);
  max-width: 900px;
}
.cs-page--v2 .cs-caption-body {
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 620px;
}

/* ---- Splits ---- */
.cs-page--v2 .cs-split { gap: clamp(48px, 6vw, 88px); }
.cs-page--v2 .cs-split-text { gap: 22px; }
.cs-page--v2 .cs-split-body { max-width: 460px; line-height: 1.85; }

/* ---- Opener + meta strip ---- */
.cs-page--v2 .cs-opener-sub { line-height: 1.8; }

.cs-page--v2 .cs-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
}
.cs-page--v2 .cs-fact-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cs-page--v2 .cs-fact-val {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---- Process ---- */
.cs-page--v2 .cs-process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cs-page--v2 .cs-process-heading {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.cs-page--v2 .cs-process-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 8px;
  max-width: 540px;
}
.cs-page--v2 .cs-process-copy p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---- Color palette: accordion band ----
   One continuous band split into five segments. Hovering a segment
   expands it and squeezes its neighbours; the specs fade up from
   inside the color. Ink color per segment is set inline via --ink-on,
   chosen so every label clears 4.5:1 against its own background. */
.cs-band {
  display: flex;
  width: 100%;
  height: clamp(340px, 34vw, 460px);
  overflow: hidden;
}

.cs-seg {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--c);
  color: var(--ink-on);
  transition: flex-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* every segment yields a little while the band is active... */
.cs-band:hover .cs-seg { flex-grow: 0.84; }
/* ...and the hovered one takes the room. Must come after. */
.cs-band .cs-seg:hover { flex-grow: 2.6; }

.cs-seg-index {
  position: absolute;
  top: 22px;
  left: 24px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.55;
}

.cs-seg-inner {
  width: 100%;
  min-width: 0;
  padding: 24px;
}

.cs-seg-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cs-seg-specs {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease,
    margin-top 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-seg:hover .cs-seg-specs {
  max-height: 130px;
  opacity: 1;
  margin-top: 16px;
}

.cs-spec-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  font-size: 11px;
  line-height: 1.85;
  white-space: nowrap;
}
.cs-spec-row dt { font-weight: 600; letter-spacing: 0.05em; opacity: 0.6; }
.cs-spec-row dd { font-variant-numeric: tabular-nums; }

/* Touch and small screens get no hover, so the band becomes a
   stack of rows with every value already visible. */
@media (max-width: 860px), (hover: none) {
  .cs-band { flex-direction: column; height: auto; }
  .cs-seg  { flex: none; align-items: stretch; }
  .cs-band:hover .cs-seg,
  .cs-band .cs-seg:hover { flex-grow: 0; }
  .cs-seg-index { position: static; display: block; margin-bottom: 10px; }
  .cs-seg-inner { padding: 22px 24px 24px; }
  .cs-seg-specs { max-height: none; opacity: 1; margin-top: 14px; overflow: visible; }
}

/* ---- Live gradient swatch ----
   Used as a segment of .cs-band when a brand's palette includes a
   gradient. The layer drifts on its own and re-centres on the
   pointer via --mx / --my, set by main.js. */
.cs-seg--gradient { background: #010101; --mx: 50%; --my: 50%; }

.cs-grad-layer {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at var(--mx) var(--my),
      #FF2E22 0%, rgba(219, 49, 43, 0.62) 34%, rgba(219, 49, 43, 0) 68%),
    radial-gradient(38% 42% at 16% 24%,
      #DB312B 0%, rgba(219, 49, 43, 0) 62%),
    radial-gradient(44% 48% at 84% 78%,
      #A81C18 0%, rgba(168, 28, 24, 0) 66%);
  filter: blur(12px);
  animation: cs-grad-drift 19s ease-in-out infinite alternate;
  transition: background-position 0.5s ease;
}
@keyframes cs-grad-drift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.06); }
  50%  { transform: translate3d( 5%,  4%, 0) scale(1.18); }
  100% { transform: translate3d(-2%,  5%, 0) scale(1.10); }
}
/* the segment's own label sits above the moving layer */
.cs-seg--gradient .cs-seg-index,
.cs-seg--gradient .cs-seg-inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .cs-grad-layer { animation: none; }
}

/* ---- Video: a piece of motion work shown in place ----
   No autoplay: these carry sound, so the visitor starts them. */
.cs-page--v2 .cs-video { width: 100%; background: var(--paper); }
.cs-page--v2 .cs-video video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
}

/* ---- Split image on its own black field ----
   For a photo that is already shot on black. cover was cropping 19%
   off the width of the open-catalog shot, cutting into the black
   margin the composition needs. contain shows the whole frame, and
   because the photo's own edge is pure #000 the fill blends into it
   invisibly: it just reads as more black. */
.cs-page--v2 .cs-split-img--black {
  background: #000;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-page--v2 .cs-split-img--black img {
  object-fit: contain;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
}
.cs-page--v2 .cs-split-img--black:hover img { transform: none; }

/* ---- Reader: one spread at a time ----
   A .cs-carousel in single-page mode. Same scroll-snap track, so
   swipe, arrow keys and the prev/next buttons all still work; the
   only difference is that one item fills the frame and clicking a
   spread turns the page. */
.cs-carousel--reader .cs-carousel-track { gap: 0; }

.cs-carousel--reader .cs-carousel-item {
  width: 100%;
  cursor: e-resize;      /* hints that a click moves forward */
}
.cs-carousel--reader .cs-carousel-item img {
  width: 100%;
  aspect-ratio: 1152 / 720;
  object-fit: contain;
  background: #f4f4f4;
  transition: none;       /* no zoom-on-hover while reading */
}
.cs-carousel--reader .cs-carousel-item:hover img { transform: none; }

.cs-reader-label {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
}
.cs-reader-pages {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cs-reader-what { color: var(--muted); }

@media (max-width: 640px) {
  .cs-carousel--reader .cs-carousel-item { width: 100%; }
  .cs-reader-label { grid-template-columns: 76px 1fr; gap: 14px; font-size: 11px; }
}

/* ---- Reader, tall variant ----
   For portrait artwork. The item still spans the full track so
   scroll-snap keeps working, but the image is height-capped and
   centred inside it instead of filling the width. */
.cs-carousel--tall .cs-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: e-resize;
}
.cs-carousel--tall .cs-carousel-item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 76vh;
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
}
.cs-carousel--tall .cs-reader-label { width: 100%; }

@media (max-width: 640px) {
  .cs-carousel--tall .cs-carousel-item img { max-height: 62vh; }
}

/* ---- Carousel: click-through frame set ----
   Native scroll-snap does the moving, so touch swipe and trackpad
   gestures work with no JS. main.js adds the buttons, the counter
   and keyboard arrows on top. */
.cs-carousel-track {
  display: flex;
  gap: var(--G);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cs-carousel-track::-webkit-scrollbar { display: none; }
.cs-carousel-track:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.cs-carousel-item {
  flex: 0 0 auto;
  width: calc((100% - var(--G) * 2) / 3);
  scroll-snap-align: start;
  cursor: pointer;
  overflow: hidden;
}
.cs-carousel-item img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-carousel-item:hover img { transform: scale(1.03); }

.cs-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.cs-carousel-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cs-carousel-btns { display: flex; gap: 8px; }

.cs-carousel-btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cs-carousel-btn:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.cs-carousel-btn:disabled { opacity: 0.28; cursor: default; }
.cs-carousel-btn svg { width: 15px; height: 15px; display: block; }

@media (max-width: 1024px) {
  .cs-carousel-item { width: calc((100% - var(--G)) / 2); }
}
@media (max-width: 640px) {
  /* peek the next frame so the track reads as scrollable */
  .cs-carousel-item { width: 78%; }
}

/* ---- Image pairs ---- */
.cs-page--v2 .cs-pair--wide .cs-pair-img img { aspect-ratio: 3/2; }
.cs-page--v2 .cs-pair--43   .cs-pair-img img { aspect-ratio: 4/3; }
.cs-page--v2 .cs-pair--169  .cs-pair-img img { aspect-ratio: 16/9; }
.cs-page--v2 .cs-full + .cs-full { margin-top: var(--G); }

@media (max-width: 860px) {
  .cs-page--v2 { --S: 64px; --Si: 32px; }
  .cs-page--v2 .cs-shead   { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .cs-page--v2 .cs-shead-desc { padding-bottom: 0; }
  .cs-page--v2 .cs-process { grid-template-columns: 1fr; gap: 26px; }
  .cs-page--v2 .cs-facts   { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .cs-page--v2 .cs-caption { grid-template-columns: 1fr; gap: 12px; }
  .cs-page--v2 .cs-art     { padding: 24px 8px; }
  .cs-page--v2 .cs-split-img--art { min-height: 0; padding: 24px 8px; }
}


/* ============================================
   RESPONSIVE SCALE
   ============================================
   Everything above this block was written for a wide desktop window
   and one phone layout, with a single collapse at 860px. That left two
   problems in the middle:

   1. FIXED GAPS IN FLUID GRIDS. The two-column text splits
      (.cs-opener, .cs-shead, .cs-process, .cs-photo-header) hold a
      56 to 64px gap no matter how narrow the window gets. At 1024px
      that gap is eating 7% of the page and both columns are squeezed
      to pay for it. Every one of those gaps is fluid now.

   2. NOTHING BETWEEN 861px AND 860px. The work grid stayed three
      across down to 861px, where the cells are 245px wide, and then
      snapped straight to one full-width column. Same story for the
      image pairs and trios. There are intermediate steps now.

   THE LADDER (each step only does what that width actually needs)
     1180   split gaps start tightening
     1000   work grid 3 across becomes 2
      980   case study meta strip 4 across becomes 2
      900   openers and pairs ease off
      860   the original collapse, still the main one
      700   image trios and pairs go single column
      620   work grid 2 across becomes 1
      480   phone tuning
      380   smallest phones

   RULE FOR EDITING THIS BLOCK: it is appended last on purpose, so it
   wins ties on specificity. Match the selector prefix of whatever you
   are overriding (.cs-page--v2 included) or the override silently
   loses. Nothing here changes the design at 1440px and up.
   ============================================ */

/* ---- Fluid gap for the two-column text splits ----
   Same shape as --gutter and --col-gap: a floor, a viewport-relative
   middle, and the original desktop value as the ceiling. */
:root {
  --gap-split: clamp(26px, 4.4vw, 64px);
}

/* ---- Fixes that apply at every width, not just narrow ones ---- */

/* .work-cell-text was a hard 110px box with overflow:hidden. Any
   description that wrapped to a fourth line was silently cut off, and
   narrower columns make that more likely, not less. Min-height keeps
   the labels aligned across a row without ever clipping. */
.work-cell-text {
  height: auto;
  min-height: 104px;
  overflow: visible;
}

/* Measured in characters rather than pixels, so it tracks the column
   instead of ignoring it. */
.work-cell-desc { max-width: 36ch; }

/* 10px is below the floor for anything anyone is expected to read,
   and these two are labels, not decoration. */
.cs-page--v2 .cs-fact-label,
.cs-seg-index {
  font-size: 11px;
}

/* ---- 1180: the splits start giving ground ---- */
@media (max-width: 1180px) {
  .cs-opener        { gap: var(--gap-split); }
  .cs-page--v2 .cs-shead   { gap: var(--gap-split); }
  .cs-page--v2 .cs-process { gap: var(--gap-split); }
  .cs-photo-header  { gap: var(--gap-split); }
  .about-hero       { gap: var(--gap-split); }
  .services-hero    { gap: var(--gap-split); }
  .packages-header  { gap: var(--gap-split); }
}

/* ---- 1000: three work cells across stops paying off ----
   At 1000px a three-across cell is 295px and shrinking. Two across
   puts it back to 442px, which is a portfolio thumbnail again. */
@media (max-width: 1000px) {
  .work-grid-cells {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(36px, 4.5vw, 52px) clamp(16px, 2.4vw, 24px);
  }
}

/* ---- 980: the case study meta strip ----
   Four columns of label-and-value fit until roughly here; past it
   values like "Brand identity, print and packaging" wrap to three
   lines against a two-word label.

   The min-width guard is load-bearing. This block is appended after
   the 860px collapse, so without it these two-column rules win on
   phones as well and put .about-section--two-col and .packages-grid
   back into multiple columns, which overflowed about.html by 152px
   at 320px. Any max-width block added here that restates something
   the 860px collapse already handles needs the same guard. */
@media (min-width: 861px) and (max-width: 980px) {
  .cs-page--v2 .cs-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px var(--col-gap);
  }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
  /* An odd card would sit alone in a half-width column, so the last
     one spans the full row instead of hanging. */
  .packages-grid .package-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .about-section--two-col { grid-template-columns: 88px 1fr 88px 1fr; }
}

/* ---- 900: openers ease off before they collapse ---- */
@media (max-width: 900px) {
  .about-teaser-row h2  { grid-column: span 3; }
  .about-teaser-row div { grid-column: span 3; }
  .hero-info-copy { grid-column: span 4; }
  .hero-readmore  { grid-column: span 1; }
}

/* ---- 860: the original collapse ----
   Kept as it was. These are additions to it, not replacements. */
@media (max-width: 860px) {
  /* The description sat in a right-aligned column with a max-width,
     so once stacked it read as indented under its own heading
     instead of aligned with it. */
  .section-head-row p {
    justify-self: start;
    max-width: none;
  }
  .about-teaser-row h2 { margin-bottom: 26px; }

  /* Three cells of footer padding read as one block side by side and
     as three separate ones stacked, which made the footer taller than
     some of the pages above it. */
  .footer-row > *     { padding: 40px var(--gutter); }
  .footer-cta-cell    { padding-bottom: 30px; }
  .footer-col         { padding-top: 0; padding-bottom: 26px; }
  .footer-col h4      { margin-bottom: 12px; }

  /* Both accordions animate open with max-height, so the cap has to
     clear the tallest panel or the last line of copy is cut off. At
     320px the Brand Identity panel wraps to 414px against a 400px
     cap. Measured at 1440 / 768 / 390 / 320. */
  .srv-item.is-open .srv-detail          { max-height: 720px; }
  .service-item.is-open .service-detail  { max-height: 520px; }
}

/* ---- 700: image pairs and trios go single column ----
   A trio of 3:4 portraits holds up as a trio down to about here. At
   640px each one is 190px wide, which is a contact sheet, not a
   presentation. The 860px rules above already sent these to one
   column; this puts the two and three across layouts back for the
   tablet range where they still work. */
@media (min-width: 701px) and (max-width: 860px) {
  .cs-trio { grid-template-columns: repeat(3, 1fr); }
  .cs-pair { grid-template-columns: 1fr 1fr; }
}

/* ---- 620: the last step down for the work grid ---- */
@media (max-width: 620px) {
  .work-grid-cells {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .work-cell-text { min-height: 0; }
}

/* ---- Gradient swatch: keep the moving layer inside its own segment ----
   .cs-grad-layer is deliberately oversized (inset: -25%) so the drift
   animation never exposes an edge. Its segment was overflow:visible,
   so the only thing clipping it was .cs-band, which meant the layer
   could pass over the neighbouring swatch. It never showed at rest
   because the radial stops reach zero alpha first, but --mx / --my
   follow the pointer, and near the segment's edge the glow lands on
   the swatch next door. Scoped to the gradient segment so the plain
   swatches, which use an inset box-shadow for their hairline, are
   untouched. */
.cs-seg--gradient { overflow: hidden; }


/* ============================================
   PHONE
   ============================================
   Below 860px every two-column header has already stacked, which
   leaves a set of paragraphs that were written to sit right-aligned
   in a right-hand column now sitting right-aligned under a
   left-aligned heading. One short line gets away with that. Two or
   three wrapped lines read as a mistake, because every line starts at
   a different x and nothing lines up with the heading above it.

   Sizes here go UP, not down. 13px is fine on a 27 inch monitor at
   arm's length and mean on a phone held in one hand.
   ============================================ */

@media (max-width: 860px) {

  /* ---- Every stacked right-aligned paragraph goes left ---- */
  .section-head-row p,
  .about-intro-copy,
  .services-hero-right,
  .services-intro,
  .packages-sub,
  .cs-photo-desc,
  .proj-intro-meta,
  .proj-colour-desc,
  .proj-meta {
    text-align: left;
  }

  /* The right-hand column also has to stop pinning itself to the
     right edge, or the text block sits offset from the heading even
     once its own alignment is fixed. */
  .about-intro-copy,
  .packages-sub,
  .cs-photo-desc {
    justify-self: start;
    max-width: none;
  }

  .services-hero-right {
    align-items: flex-start;
  }

  /* ---- Readable body copy ---- */
  .work-cell-desc,
  .section-head-row p,
  .about-teaser-row div p,
  .footer-col a,
  .footer-col p {
    font-size: 14px;
    line-height: 1.6;
  }

  .hero-info-copy,
  .about-intro-copy,
  .services-intro,
  .packages-sub {
    font-size: 15px;
    line-height: 1.65;
  }

  .cs-page--v2 .cs-shead-desc,
  .cs-page--v2 .cs-process-copy p,
  .cs-opener-sub {
    font-size: 15px;
    line-height: 1.7;
  }

  /* ---- Cards align to the page gutter ----
     .package-card carries 32px of side padding, so on a 390px screen
     its text started 56px in while every heading on the page started
     at 24px. Nothing lined up. The card keeps its vertical padding
     and gives up the horizontal, since stacked cards are already
     separated by the grid's rules. */
  .package-card {
    padding: 32px 0 30px;
  }

  .packages-grid {
    gap: 1px;
  }
}

/* ---- Touch targets ----
   Pointer-coarse rather than a width, because the thing that matters
   is a fingertip, not a screen size. 44px is the usual floor and the
   nav was sitting at about 36. */
@media (hover: none) and (pointer: coarse) {
  .nav-cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .nav-row > * { padding: 0 4px; }

  .footer-col a {
    padding: 7px 0;
    margin-bottom: 2px;
  }

  .cs-carousel-btn { width: 46px; height: 46px; }
}

/* ---- 480: small phones ---- */
@media (max-width: 480px) {
  /* The case study rhythm is built on --S. At 64px it is a desktop
     value doing desktop work on a 4 inch screen, where it just reads
     as a gap someone forgot to fill. */
  .cs-page--v2 { --S: 48px; --Si: 26px; }

  .work-cell-label { margin-top: 26px; }
  .work-cell-media { margin-top: 16px; }

  /* Section heads and page titles were already fluid; this stops the
     largest of them running to three and four lines. */
  .cs-project-name { line-height: 1.02; }
}

/* ---- 380: the narrowest phones still in use ----
   Five nav items have to share the width. The original rule dropped
   them to 9.5px at 360px, which is below anything readable. Measured
   at 320px: the widest label, Services, is about 46px at 11px, and
   each cell has 64px to work with, so 11px fits with room left. */
@media (max-width: 380px) {
  .nav-cell a { font-size: 11px; letter-spacing: 0; }
}