/* ------------------------------------------------------------------
   Bernie Studios — landing page
   Tokens pulled from the Figma hero (node 4061:82531)
------------------------------------------------------------------ */

/* The headline face is Edict Display (Regular Italic for titles, Regular upright for the
   contact form). The woff2 files were built from the trial OTFs installed on this machine;
   swap in the licensed files under the same names when they arrive. Instrument Serif stays
   in the stack only as a per-glyph fallback for characters the trial cut leaves out. */
@font-face {
  font-family: "Edict Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Edict Display Trial Regular Italic"),
       local("EdictDisplayTrial-RegularItalic"),
       url("assets/fonts/EdictDisplay-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Edict Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Edict Display Trial Regular"),
       local("EdictDisplayTrial-Regular"),
       url("assets/fonts/EdictDisplay-Regular.woff2") format("woff2");
}

:root {
  --cream: #fcfbf7;
  --ink:   #312c2b;
  --sand:  #ece6e2;   /* inactive nav pill */
  --clay:  #d7cec8;   /* image placeholders, rules */
  --line-image: #d8dcdd;   /* border on project images (from the mock) */

  --serif: "Edict Display", "Instrument Serif", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 8vw, 115px);   /* 115px at the 1440 frame */
  --page:   1440px;
  --ps:     1;                          /* portrait scale */
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Page transitions ----------
   Browsers with cross-document view transitions cross-fade the whole page on
   navigation. Everywhere else, transitions.js fades the page out before it
   leaves and the page-in animation fades the next one up. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.28s ease-out both page-fade-out; }
::view-transition-new(root) { animation: 0.4s ease-out both page-fade-in; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in  { from { opacity: 0; } }

html.no-vt body { animation: page-in 0.45s ease-out both; }
html.no-vt body.is-leaving { opacity: 0; transition: opacity 0.26s ease-in; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.no-vt body { animation: none; }
  html.no-vt body.is-leaving { opacity: 1; transition: none; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }

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

/* ---------- Pills (nav + buttons) ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 2px;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 1.12px;
  text-decoration: none;
  white-space: nowrap;
}
.pill:not(.pill--active):not(.pill--solid):not(.pill--cream) { color: rgba(49, 44, 43, 0.75); }
.pill:hover { color: var(--ink); }

.pill--active {
  background: var(--ink);
  color: var(--cream);
  font-weight: 500;
}
.pill--active:hover { color: var(--cream); }

.pill--solid {
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
}
.pill--solid:hover { color: var(--cream); }

.pill--cream {
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
}

.pill__dot {
  width: 4px;
  height: 4px;
  background: currentColor;
  flex: none;
}

/* ---------- Hero ---------- */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__title {                       /* wordmark + tagline as one column, the portrait beside them */
  display: flex;
  align-items: flex-start;
  gap: 39px;
  margin-top: 29px;
}
.hero__text { flex: 1 1 auto; min-width: 0; }

.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 11.1vw, 160px);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink);
}

/* Framed portrait: sizes are the Figma node dimensions (138.64 × 187.87)
   with the inner picture placed by percentage so it scales as one unit. */
.portrait {
  position: relative;
  flex: none;
  width: calc(138.64px * var(--ps));
  height: calc(187.868px * var(--ps));
}
.portrait__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: rotate(180deg);
}
.portrait__frame img {
  position: absolute;
  left: 0;
  top: -4.66%;
  width: 100%;
  height: 110.64%;
  max-width: none;
}
.portrait__picture {
  position: absolute;
  left: 20.58%;
  top: 16.31%;
  width: 59.09%;
  height: 67.44%;
  overflow: hidden;
}
.portrait__picture img {
  position: absolute;
  left: -45.05%;
  top: -12.01%;
  width: 188.1%;
  height: 121.63%;
  max-width: none;
}

.hero__tagline {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 1.28px;
}

.hero__stage {
  position: relative;
  margin-top: 48px;                 /* 36px below the portrait's bottom edge at the 1440 frame */
  width: 100%;
  aspect-ratio: 6105 / 3600;
  background: #f4efe8;
  border: 1px solid #e6dccf;        /* light tan stroke around the collage frames */
  overflow: hidden;
}
.hero__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* frames keep their own ratio whatever the box does */
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero__stage img.is-on { visibility: visible; }

/* ---------- Sections ---------- */

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: 128px var(--gutter) 0;
}
.section--tight { padding-top: 96px; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: 40px;
}
.section__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.1;
}
.section__lede {
  max-width: 44ch;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: rgba(49, 44, 43, 0.75);
}

/* ---------- Selected projects carousel ---------- */

.projects {
  overflow: hidden;                 /* the exiting card slides past the page edge */
  margin-top: clamp(64px, 7vw, 104px);   /* breathing room below the collage */
}
.projects__inner {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}
.projects__title {
  position: absolute;
  right: var(--gutter);
  top: 0;
  width: 562px;
  height: auto;
}
.projects__track {
  position: relative;
  height: 552px;                    /* overwritten by carousel.js */
  touch-action: pan-y;              /* horizontal swipes are ours, vertical scroll stays native */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.projects__track.is-dragging { cursor: grabbing; transition: none; }
.projects__track.is-dragging .card, .projects__track.is-dragging .card__image { transition: none; }
.projects__track img, .projects__track video { -webkit-user-drag: none; pointer-events: none; }
.projects__track .card { visibility: hidden; }
.projects__track.is-ready .card { visibility: visible; }

.card {
  --bounce: cubic-bezier(0.34, 1.45, 0.64, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  transform-origin: 50% 100%;
  transition:
    left 0.95s var(--bounce),
    width 0.95s var(--bounce),
    opacity 0.55s ease,
    transform 0.95s var(--bounce);
  will-change: left, width, transform;
}
.card__tags,
.card__meta {
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 1.28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__tags {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card__tags span { color: rgba(49, 44, 43, 0.35); }
.card__image {
  --stroke: #d8d2cb;                /* overridden per card in index.html: slightly darker than the preview's own colour */
  position: relative;
  height: 240px;
  background: var(--clay);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(49, 44, 43, 0.06);
  transition: height 0.95s var(--bounce);
}
.card__image::after {               /* hairline stroke, drawn above the image/video */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--stroke);
  pointer-events: none;
  z-index: 1;
}
.card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.card__image img.card__img--fit { object-position: center; }
.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--clay);
}
.card__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.card__date {
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.4s ease;
}
.card__hit {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.card__hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.card.is-featured { z-index: 2; }
.card.is-featured .card__tags,
.card.is-featured .card__date { opacity: 1; transition-delay: 0.35s; }
.card.is-featured .card__hit { display: none; }
.card.is-featured[data-href] .card__hit { display: block; cursor: none; }   /* the floating "View work" label is the cursor here */
.card.is-featured[data-href] .card__hit:focus-visible { outline-offset: -2px; }

.card.is-leaving {
  z-index: 1;
  pointer-events: none;
  transition:
    left 0.95s var(--bounce),
    width 0.95s var(--bounce),
    opacity 0.5s ease 0.4s,
    transform 0.95s var(--bounce);
}

/* A quick settle when a card lands in the featured slot */
.card.is-arriving { animation: card-settle 0.95s var(--bounce) both; }
@keyframes card-settle {
  0%   { transform: translateY(0) rotate(0deg); }
  38%  { transform: translateY(-10px) rotate(-1.4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card__image { transition-duration: 0.01s; }
  .card.is-arriving { animation: none; }
}

/* ---------- Our bread and butter: the four things we sell ---------- */

.bread__title {
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 11.1vw, 160px);
  line-height: 0.95;
  white-space: nowrap;
}
.bread__line--in { padding-left: 1em; }   /* the first line sits on the margin, the second steps in */
.bread__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}
.offer-card__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #cbc9c8;       /* the export's own stroke, redrawn by CSS so it stays a crisp 1px on every side */
  background: #f6f3ee;
}
/* The two still cards: the chip is live HTML like the carousels', so all four chips share one size and face */
.offer-card__image--still { position: relative; }
.offer-card__image--still img { display: block; width: 100%; height: auto; }
.offer-card__image--still .tile__label { font-size: 18px; }
/* The LP D&D card: a vertical carousel of landing pages, one centred, the neighbours peeking in top and bottom */
.lp-stack {
  --bounce: cubic-bezier(0.34, 1.5, 0.64, 1);
  position: relative;
  aspect-ratio: 607 / 420;
  overflow: hidden;
  background: #f6f3ee;
}
.lp-stack .tile__label { font-size: 18px; }
.lp-stack img {
  position: absolute;
  left: 50%;
  top: 200%;                        /* parked below until it is needed */
  width: 71.4%;
  height: auto;
  transform: translateX(-50%);
  visibility: hidden;
  transition: top 0.85s var(--bounce), width 0.85s var(--bounce), visibility 0s 0.85s;
}
.lp-stack img[data-slot="-2"] { top: -120%; visibility: visible; transition: top 0.85s var(--bounce), width 0.85s var(--bounce); }
.lp-stack img[data-slot="-1"] { top: -58%;  visibility: visible; z-index: 2; transition: top 0.85s var(--bounce), width 0.85s var(--bounce); }
.lp-stack img[data-slot="0"]  { top: 13.4%; width: 78%; visibility: visible; z-index: 3; transition: top 0.85s var(--bounce), width 0.85s var(--bounce); }
.lp-stack img[data-slot="1"]  { top: 91.3%; visibility: visible; z-index: 2; transition: top 0.85s var(--bounce), width 0.85s var(--bounce); }
.lp-stack img.is-jump { transition: none !important; }
.lp-stack:not(.is-ready) img { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lp-stack img { transition-duration: 0.01s; }
}

/* The Branded Merch card: a horizontal carousel, three frames across with the outer two clipped by the edges */
.merch-row {
  --bounce: cubic-bezier(0.34, 1.5, 0.64, 1);
  position: relative;
  aspect-ratio: 607 / 420;
  overflow: hidden;
  background: #f6f3ee;
}
.merch-row .tile__label { font-size: 18px; z-index: 5; }
.merch-row img {
  position: absolute;
  top: 12.6%;
  left: -70.3%;                     /* waiting off the left edge */
  width: 44.3%;
  height: auto;
  visibility: hidden;
  transition: left 0.85s var(--bounce), visibility 0s 0.85s;
}
.merch-row img[data-slot="0"]  { left: -21.4%; visibility: visible; transition: left 0.85s var(--bounce); }
.merch-row img[data-slot="1"]  { left: 27.5%;  visibility: visible; transition: left 0.85s var(--bounce); }
.merch-row img[data-slot="2"]  { left: 76.4%;  visibility: visible; transition: left 0.85s var(--bounce); }
.merch-row img[data-slot="3"]  { left: 125.3%; visibility: visible; transition: left 0.85s var(--bounce); }
.merch-row img.is-jump { transition: none !important; }
.merch-row:not(.is-ready) img { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .merch-row img { transition-duration: 0.01s; }
}

.offer-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 1.28px;
  white-space: nowrap;
}
.offer-card__meta em { font-style: normal; color: rgba(49, 44, 43, 0.5); }

@media (max-width: 720px) {
  .bread__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bread__title { white-space: normal; }
}

/* ---------- YC batch package deal ---------- */

.yc-deal {
  margin-top: 128px;
  background: #f5f5ed;
}
.yc-deal__inner {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 56px var(--gutter) 64px;
}
.yc-deal__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.yc-deal__intro {
  flex: 0 0 350px;
  margin-top: 192px;               /* sits level with the second line of the title */
  font-size: 18px;
  line-height: 1.4;
  color: #2a2826;
}
.yc-deal__intro > p:first-child { text-align: justify; }
.yc-deal__intro .btn { margin-top: 20px; }
.yc-deal__note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.65;
}
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1.12px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #4e4840; }
.yc-deal__title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 66px;              /* clears the Y mark in the corner */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 11.1vw, 160px);
  line-height: 0.95;
  white-space: nowrap;
  color: #e4582e;
  text-align: right;
}
.yc-deal__line--in { padding-right: 1.85em; }   /* the first line steps in from the right */
.yc-deal__mark {
  position: absolute;
  right: 0;
  top: 43px;
  width: 50px;
  height: 45px;
}

.yc-deal__list {
  margin-top: 56px;
  border-top: 1px solid var(--clay);
}
.yc-deal__item {
  padding: 32px 0;
  border-bottom: 1px solid var(--clay);
}
.yc-deal__row {                      /* the clickable header of each service */
  --bounce: cubic-bezier(0.34, 1.5, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.yc-deal__row:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.yc-deal__num {
  flex: 0 0 32px;
  text-align: right;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}
.yc-deal__name {
  flex: 0 0 320px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}
.yc-deal__desc {
  flex: 1 1 0;
  min-width: 0;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 1.44px;
  color: rgba(49, 44, 43, 0.75);
  transition: color 0.3s ease;
}
.yc-deal__row[aria-expanded="true"] .yc-deal__desc,
.yc-deal__row:hover .yc-deal__desc { color: var(--ink); }
.yc-deal__x {
  flex: none;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);        /* the cross reads as a plus while closed */
  transition: transform 0.6s var(--bounce);
}
.yc-deal__row[aria-expanded="true"] .yc-deal__x { transform: rotate(0deg); }
.yc-deal__panel {                    /* height animates from 0 to its content */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.yc-deal__item.is-open .yc-deal__panel { grid-template-rows: 1fr; }
.yc-deal__bullets {
  min-height: 0;
  overflow: hidden;
  padding-left: 384px;             /* lines up under the description column: 32 + 16 + 320 + 16 */
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 1.44px;
  opacity: 0;
  transition: opacity 0.35s ease, padding-top 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.yc-deal__item.is-open .yc-deal__bullets { padding-top: 12px; opacity: 1; transition-delay: 0.1s, 0s; }
.yc-deal__bullets li { padding-left: 27px; text-indent: -27px; }
.yc-deal__bullets li::before { content: "\2022"; display: inline-block; width: 27px; text-indent: 0; }
.yc-deal__rate {
  margin-top: 32px;
  text-align: right;
  font-size: 18px;
  line-height: 1.1;
}
.yc-deal__rate strong { font-weight: 600; }

@media (max-width: 1100px) {
  .yc-deal__head { flex-direction: column-reverse; align-items: stretch; }
  .yc-deal__intro { flex: none; max-width: 350px; margin-top: 32px; }
  .yc-deal__title { margin-right: 0; }
  .yc-deal__mark {                   /* out of the corner and into the flow, above the title, so the two never overlap */
    position: static;
    align-self: flex-end;
    margin-bottom: 20px;
  }
  .yc-deal__row { flex-wrap: wrap; row-gap: 12px; }
  .yc-deal__name { flex: 1 1 0; min-width: 0; }
  .yc-deal__x { order: 1; }          /* stays on the name row; the description drops underneath */
  .yc-deal__desc { order: 2; flex: 1 1 100%; padding-left: 48px; }
  .yc-deal__bullets { padding-left: 48px; }
}
@media (max-width: 720px) {
  .yc-deal { margin-top: 88px; }
  .yc-deal__inner { padding: 40px var(--gutter) 48px; }
  .yc-deal__title { white-space: normal; font-size: clamp(44px, 14.4vw, 160px); }
  .yc-deal__line--in { padding-right: 0; }
  .yc-deal__mark { width: 40px; height: 36px; margin-bottom: 16px; }
  .yc-deal__intro { margin-top: 28px; font-size: 17px; }
  .yc-deal__intro > p:first-child { text-align: left; }
  .yc-deal__list { margin-top: 40px; }
  .yc-deal__item { padding: 24px 0; }
  .yc-deal__num { flex-basis: 28px; font-size: 17px; }
  .yc-deal__name { font-size: 17px; }
  .yc-deal__desc { padding-left: 44px; font-size: 16px; line-height: 1.35; letter-spacing: 0.4px; }
  .yc-deal__bullets { padding-left: 44px; font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; }
  .yc-deal__bullets li { padding-left: 20px; text-indent: -20px; }
  .yc-deal__bullets li::before { width: 20px; }
  .yc-deal__rate { margin-top: 24px; text-align: left; font-size: 17px; line-height: 1.4; }
}

/* Services */
.services {
  border-top: 1px solid var(--clay);
}
.services__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--clay);
}
.services__row dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.1;
}
.services__row dd {
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.5;
}

/* YC offer: the one dark block on the page */
.offer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px 64px;
}
.offer__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.1;
}
.offer__lede {
  margin-top: 20px;
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--clay);
}
.offer__list {
  border-top: 1px solid rgba(252, 251, 247, 0.25);
}
.offer__list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(252, 251, 247, 0.25);
  font-size: 17px;
  line-height: 1.4;
}
.offer__label {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 1.12px;
  color: var(--clay);
}
.offer__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.offer__price {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--clay);
}

/* ---------- About us ---------- */

.about__title {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 11.1vw, 160px);
  line-height: 1.1;
  white-space: nowrap;
}
.about__body {
  display: grid;
  gap: 24px;
  max-width: 841px;
  font-size: 20px;
  line-height: 1.4;
  color: #2a2826;
}
.about__body p { text-align: justify; }
.team {                              /* the two of us, tucked to the right under the story */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 64px;
}
.person { flex: 1 1 0; min-width: 240px; max-width: 350px; }
.person__photo {
  width: 100%;
  height: auto;                    /* beats the height attribute so the ratio holds in Safari */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #cbc9c8;
  background: #e8d3c1;
}
.person__name {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #2a2826;
}
.person__role {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: #2a2826;
}
.person__links {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}
.btn--soft { background: #483f3d; }
.btn--soft:hover { background: var(--ink); }

@media (max-width: 900px) {
  .about__body p { text-align: left; }
  .about__title { white-space: normal; }
  .team { justify-content: flex-start; }
}

/* Cursor-following label over a project that has its own page */
.cursor-tag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 1.12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(-6deg);
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.6, 0.64, 1);
  will-change: left, top, transform;
}
.cursor-tag.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-tag { display: none; }
  .card.is-featured[data-href] .card__hit { cursor: pointer; }
}

/* ---------- Project page (MadeThis, Figma node 4071:82868) ---------- */

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

.project {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}
.project__head {                    /* short names: title left, brief right, 48px above the work */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px clamp(40px, 8vw, 119px);
  padding: 29px 0 48px;
}
.project__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 11.1vw, 160px);
  line-height: 1.1;
  white-space: nowrap;
}
.project__head--stacked {           /* long names: title on its own line, brief right-aligned 16px below, 48px above the work */
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding-bottom: 48px;
}
.project__head--stacked .project__brief { flex: none; width: 100%; margin-left: auto; }
.project__head:not(.project__head--stacked) .project__brief {
  flex: 0 1 640px;                  /* wide enough for four lines; the row spans the full content width */
  max-width: 640px;
  margin-top: clamp(6px, 1.5vw, 24px);   /* first line sits on the title's cap height */
}
.project__brief { flex: none; width: 100%; margin-left: auto; }
.project__brief {
  flex: 1 1 360px;
  max-width: 565px;
  display: grid;
  gap: 8px;
  font-size: 18px;
  line-height: 1.4;
  color: #2a2826;
}
.project__brief p { text-align: justify; }
.project__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #858585;
  text-align: left !important;
}
.project__facts span + span {
  padding-left: 16px;
  border-left: 1px solid #858585;
}

.tiles {
  display: grid;
  gap: 32px;
}
.tiles__row {
  display: flex;
  gap: 32px;
}
.tile {
  display: block;
  width: 100%;
  height: auto;
  background: var(--clay);
  object-fit: cover;               /* exported tiles carry their own 1px edge */
}
.tiles__row .tile { width: auto; min-width: 0; }   /* let images shrink below their natural size */
.tile--wide   { flex: 662 1 0%; aspect-ratio: 662 / 500; }
.tile--narrow { flex: 530 1 0%; aspect-ratio: 530 / 500; }
.tile--sand { border-color: #eaded1; background: #fbf2ea; }
.tile--pink { border-color: #f7cdef; }
.tile--sky  { border-color: #c0d2ec; background: #bfd5ef; }

.tile--hero {
  position: relative;
  aspect-ratio: 1211 / 624;
  border: 1px solid #ecc89d;
  background: #f6b278;
  overflow: hidden;
}
.tile--hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;            /* plays on its own: no controls, hover or clicks */
  user-select: none;
  -webkit-user-select: none;
}
.tile--hero video::-webkit-media-controls { display: none !important; }

.project__next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 64px;
}
.project__next a {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  text-decoration: none;
}
.project__next a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

@media (max-width: 820px) {
  .project__title { white-space: normal; }
  .project__brief p { text-align: left; }
  .tiles, .tiles__row { gap: 16px; }
  .tiles__row { flex-direction: column; }
  .tile--wide, .tile--narrow { flex: none; }
}
@media (max-width: 600px) {
  .project { padding-bottom: 48px; }
  .project__head { padding: 20px 0 32px; gap: 16px; }
  .project__head--stacked { padding-bottom: 32px; }
  .project__title { font-size: clamp(44px, 14.4vw, 160px); line-height: 1; }
  .project__brief { font-size: 17px; }
  .project__facts { flex-direction: column; gap: 6px; }       /* stacked, so no stray rule when the row wraps */
  .project__facts span + span { padding-left: 0; border-left: 0; }
  .tiles, .tiles__row { gap: 12px; }
  .project__next { padding-top: 40px; gap: 12px; }
  .project__next a { font-size: 24px; }
}

/* ---------- Chapter One artifacts carousel ---------- */

.tile--hero-c1 { aspect-ratio: 3588 / 2160; border: 1px solid #e2e0db; background: #f1f0ed; }

/* Video tiles: a film filling the tile, or (inset) sitting centred on a plain ground like a framed screenshot */
.tile--video {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e0db;
  background: #f1f0ed;
}
.tile--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.tile--video video::-webkit-media-controls { display: none !important; }
.tile--video:not(.tile--narrow):not(.tile--wide) { aspect-ratio: 2400 / 1333; }
.tile--inset { background: #ede8e2; }
.tile--inset video {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 73.7%;
  height: auto;
  aspect-ratio: 3372 / 2160;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 40px rgba(49, 44, 43, 0.14), 0 2px 8px rgba(49, 44, 43, 0.06);
}

/* Label chip in the top-left corner of a tile, matching the chips baked into the exported tiles */
.tile__label {
  position: absolute;
  z-index: 5;
  left: 19px;
  top: 0;
  padding: 4px 10px;
  background: #5b5550;
  color: #fff;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
}

.artifacts {
  position: relative;
  aspect-ratio: 662 / 500;
  background: #f1f0ed;
  border: 1px solid #e2e0db;
  overflow: hidden;
}
.artifacts__label {
  position: absolute;
  z-index: 5;
  left: 19px;
  top: 0;
  padding: 4px 10px;
  background: #5b5550;
  color: #fff;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
}
.artifacts__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 662px;
  height: 500px;
  transform-origin: 0 0;
}
.artifact {
  --bounce: cubic-bezier(0.34, 1.5, 0.64, 1);
  position: absolute;
  top: 50%;
  transform-origin: 50% 100%;
  transition: left 0.9s var(--bounce), opacity 0.45s ease, transform 0.9s var(--bounce);
}
.artifact[data-kind="cd"]    { width: 220px; margin-top: -82px; }
.artifact[data-kind="books"] { width: 240px; margin-top: -99px; }
.artifact[data-kind="paper"] { width: 239px; margin-top: -91px; }
.artifact img { display: block; width: 100%; height: auto; }

.artifact.is-hop { animation: artifact-hop 0.9s var(--bounce) both; }
@keyframes artifact-hop {
  0%   { translate: 0 0; }
  40%  { translate: 0 -12px; }
  100% { translate: 0 0; }
}

.artifacts:not(.is-ready) .artifact { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .artifact, .artifact img { transition-duration: 0.01s; }
  .artifact.is-hop { animation: none; }
}

/* ---------- MadeThis visual identity: "Start a ___ business" ---------- */

.identity {
  --bounce: cubic-bezier(0.34, 1.5, 0.64, 1);
  position: relative;
  aspect-ratio: 2400 / 980;
  border: 1px solid #eaded1;
  background: #fbf2ea;
  overflow: hidden;
  container-type: inline-size;
}
.identity__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.identity__line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.7cqw;
  font-family: "Inria Serif", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3cqw;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.identity__stage {
  position: relative;
  width: 13.3cqw;
  height: 9.1cqw;
  margin-right: -1.4cqw;            /* the renders carry a cast shadow on the right; pull the word in so the gaps read even */
  flex: none;
}
.identity__obj {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 90%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-38%) scale(0.72) rotate(-7deg);
  transition: opacity 0.22s ease, transform 0.7s var(--bounce), visibility 0s 0.7s;
}
.identity__obj.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.26s ease 0.05s, transform 0.7s var(--bounce), visibility 0s;
}
.identity__obj.is-off {                        /* the one leaving: a short hop away, shrinking */
  opacity: 0;
  visibility: visible;
  transform: translateY(-30%) scale(0.7) rotate(6deg);
  transition: opacity 0.24s ease, transform 0.4s cubic-bezier(0.4, 0, 0.8, 0.4);
}

.identity__word {
  position: relative;
  display: inline-block;
  height: 1em;
  text-align: left;
  transition: width 0.7s var(--bounce);       /* the row re-centres as the new word's width lands */
}
.identity__measure {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
}
.identity__w {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform-origin: 0 100%;
  opacity: 0;
  transform: translateY(0.55em) rotate(2deg);
  transition: opacity 0.22s ease, transform 0.7s var(--bounce);
}
.identity__w.is-on  { opacity: 1; transform: none; transition: opacity 0.26s ease 0.06s, transform 0.7s var(--bounce); }
.identity__w.is-off { opacity: 0; transform: translateY(-0.5em) rotate(-2deg); transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.4, 0, 0.8, 0.4); }

.identity:not(.is-ready) .identity__line { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .identity__obj, .identity__w, .identity__word { transition-duration: 0.01s; }
}

/* ---------- Closing call to action: the ticket ---------- */

.cta {
  margin-top: 128px;                 /* sits on the page ground, no panel behind it */
}
.cta__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 52px var(--gutter) 120px;
}
.cta__title {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 6.95vw, 100px);
  line-height: 1.1;
  white-space: nowrap;
}
.cta__line--end { padding-left: 33%; }      /* the second line steps in about a third of the way across */
.cta__ticket {
  --bounce: cubic-bezier(0.34, 1.5, 0.64, 1);
  position: relative;
  display: block;
  width: 91.6%;
  aspect-ratio: 2274 / 1266;
  margin: 90px 0 0 4.2%;
}
.cta__ticket img {
  position: absolute;
  display: block;
  pointer-events: none;
}
.cta__ticket .cta__ticket-front {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.cta__ticket .cta__ticket-back {    /* the image carries clear margin on every side, so it can rotate without clipping */
  left: -5.28%;
  top: -9.48%;
  width: 110.56%;
  height: 118.96%;
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 0.7s var(--bounce);
}
.cta__ticket:hover .cta__ticket-back,
.cta__ticket:focus-visible .cta__ticket-back { transform: rotate(1.5deg); }   /* a slight clockwise tilt, tucking in behind the front ticket */
@media (prefers-reduced-motion: reduce) {
  .cta__ticket .cta__ticket-back { transition: none; }
}

.cta__ticket:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }

@media (max-width: 720px) {
  .cta__title { white-space: normal; }
  .cta__line--end { padding-left: 0; }
  .cta__ticket { width: 100%; margin: 48px 0 0; }
  .cta__inner { padding-bottom: 64px; }
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: var(--page);
  margin: 0 auto;
  padding: 29px var(--gutter) 96px;
}
.legal__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.1;
}
.legal__meta {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 1.12px;
  color: rgba(49, 44, 43, 0.75);
}
.legal > p, .legal > ul {
  max-width: 72ch;
  font-size: 18px;
  line-height: 1.55;
  color: #2a2826;
}
.legal > p { margin-top: 20px; }
.legal__meta + p { margin-top: 48px; }
.legal h2 {
  max-width: 72ch;
  margin-top: 48px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.legal h2 + p { margin-top: 12px; }
.legal > ul { margin-top: 16px; padding-left: 24px; list-style: disc; }
.legal > ul li { margin-top: 10px; }
.legal a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal strong { font-weight: 500; }

/* ---------- Contact page ---------- */

.page--contact { background: #fcfbf7; }
.contact {
  max-width: var(--page);
  margin: 0 auto;
  padding: 29px var(--gutter) 96px;
}
.contact__head {
  display: flex;
  align-items: center;             /* the portrait sits centred on the two-line title */
  justify-content: space-between;
  gap: 32px;
}
.contact__title {
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 11.1vw, 160px);
  line-height: 0.9;
  white-space: nowrap;
}
.contact__line--in { padding-left: 1.8em; }
.portrait--contact {
  --ps: 1;
  flex: none;
  width: 245px;
  height: 332px;
  margin-top: 0;
  margin-right: clamp(0px, 4vw, 60px);
}

.enquiry {
  max-width: 877px;
  margin-top: 84px;
  border-top: 1px solid #cbc9c8;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.4;
  color: #2a2826;
}
.enquiry__row {
  padding: 28px 0;
  border-bottom: 1px solid #cbc9c8;
}
.enquiry__row--split {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
.enquiry__row--split > :last-child { margin-right: calc(100% - 640px); }   /* the two columns sit within the first 640px, the rule runs full width */
.enquiry__field { display: block; flex: 1 1 auto; }
.enquiry__field--narrow { flex: 0 0 140px; }
.enquiry input[type="text"], .enquiry input[type="email"], .enquiry input[type="tel"], .enquiry input[type="url"], .enquiry textarea {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}
.enquiry input::placeholder, .enquiry textarea::placeholder { color: #2a2826; opacity: 0.75; }
.enquiry input:focus::placeholder, .enquiry textarea:focus::placeholder { opacity: 0.4; }
.enquiry textarea { min-height: 200px; resize: vertical; }
.enquiry__group {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.enquiry__group--narrow { flex: 0 0 140px; }
.enquiry__group legend { padding: 0; margin-bottom: 16px; opacity: 0.75; }
.enquiry__check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.enquiry__check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #2a2826;
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}
.enquiry__check input:checked { background: #2a2826; }
.enquiry__check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.enquiry__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 28px;
}
.btn--submit {
  min-width: 104px;
  height: 38px;
  font-size: 16px;
  letter-spacing: 1.28px;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.enquiry__status {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(49, 44, 43, 0.75);
  text-align: right;
}
.enquiry__status:empty { display: none; }
.enquiry__status[data-tone="ok"] { color: var(--ink); }
.enquiry__status[data-tone="error"] { color: #a33d1f; }
.btn--submit:disabled { opacity: 0.6; cursor: default; }
.enquiry__trap {                      /* honeypot: off-screen for people, filled in by bots */
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .contact__head { align-items: center; gap: 16px; }
  .contact { padding-top: 20px; }
  .contact__title { flex: 1 1 auto; min-width: 0; padding-top: 0; white-space: normal; font-size: clamp(44px, 14.4vw, 160px); }
  .contact__line--in { padding-left: 0; }
  .portrait--contact { width: clamp(88px, 26vw, 160px); height: auto; aspect-ratio: 245 / 332; margin: 0; }
  .enquiry { margin-top: 40px; font-size: 20px; }
  .enquiry__row { padding: 22px 0; }
  .enquiry__row--split { flex-direction: column; gap: 24px; }
  .enquiry__row--split > :last-child { margin-right: 0; }
  .enquiry__field--narrow, .enquiry__group--narrow { flex: none; }
  .enquiry textarea { min-height: 160px; }
  .enquiry__actions { padding-top: 22px; }
  .btn--submit { width: 100%; height: 48px; }
  .enquiry__status { text-align: left; }
}

/* ---------- Standalone pages: YC deal, About, Playground ---------- */

.page--yc { background: #f5f5ed; }     /* the whole page, nav included, sits on the YC ground */
.yc-deal--page { margin-top: 0; }
.about--page { padding-top: 29px; padding-bottom: 96px; }

.page--soon { background: #f5f5ed; }
.soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 64px var(--gutter);
}
.soon__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6.95vw, 100px);
  line-height: 1.1;
  text-align: center;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  background: #d7cec8;             /* signature behind it is #e3dad3 */
  color: var(--ink);
  overflow: hidden;
}
.footer__inner {
  position: relative;
  max-width: var(--page);
  min-height: 400px;
  margin: 0 auto;
  padding: 66px var(--gutter) 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__watermark {                 /* the signature, oversized and faint behind everything */
  position: absolute;
  left: calc(50% + 44.5px);
  top: 50%;
  width: 1519px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;            /* the vector carries its own faint tone */
  user-select: none;
}
.portrait--footer {
  --ps: 1;
  position: relative;
  z-index: 1;
  width: 212px;
  height: 287px;
}
.footer__row {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 212px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.footer__socials { display: flex; gap: clamp(32px, 5.5vw, 80px); }
.footer__row a { text-decoration: none; }
.footer__row a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer__bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 26px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  line-height: 1.1;
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal { display: flex; gap: 40px; }

@media (max-width: 900px) {
  .footer__inner { min-height: 0; padding-top: 48px; padding-bottom: 32px; gap: 40px; }
  .footer__row, .footer__bottom { position: static; width: 100%; flex-wrap: wrap; }
  .footer__row { justify-content: flex-start; row-gap: 16px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  :root { --ps: 0.8; }
  .hero__title { gap: 28px; }
}

@media (max-width: 820px) {
  :root { --ps: 0.6; }
  .hero__title { gap: 20px; margin-top: 24px; }
  .wordmark { white-space: normal; }
  .section { padding-top: 88px; }
  .section--tight { padding-top: 64px; }
  .projects__title { position: static; display: block; width: 62%; margin: 0 0 32px auto; }
  .projects__inner { padding-bottom: 32px; }
  .services__row { grid-template-columns: 1fr; gap: 10px; }
  .offer { grid-template-columns: 1fr; gap: 32px; }
  .about { grid-template-columns: 1fr; }
  .footer { margin-top: 88px; }
  .footer__meta { margin-top: 56px; }
}

/* ---------- Phones (Figma iPhone 16 frame, node 4165:36188) ----------
   16px gutters, 56px display titles that scale with the viewport,
   14px body copy, 12px secondary text, hamburger nav. */

.nav__toggle {                       /* hidden until the phone breakpoint */
  display: none;
  flex-direction: column;
  gap: 5px;                          /* whole pixels only: 2px bars on 7px centres never land on a half pixel */
  width: 18px;
  height: 16px;
  padding: 8px;                      /* a 34 x 32 tap target around an 18 x 16 glyph */
  margin: -8px;
  box-sizing: content-box;
  border: 0;
  background: none;
  cursor: pointer;
  --bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transform-origin: 50% 50%;
  transition: transform 0.45s var(--bounce), opacity 0.2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.projects__heading { display: none; } /* the phone title; desktop keeps the SVG */

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --ps: 0.49;
    --title: clamp(40px, 14.25vw, 56px);     /* 56px on the 393 frame */
  }
  html, body { overflow-x: clip; }
  body { font-size: 14px; }

  /* Nav: hamburger left, Contact right; the pills drop in beneath when opened */
  .hero { padding-top: 16px; }
  .nav { flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; }
  .nav__toggle { display: inline-flex; align-self: flex-start; margin-top: 0; }   /* top-anchored, so the bars sit on whole pixels instead of centring on the pill's 31.4px height */
  .nav__list {
    display: none;
    order: 3;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 4px;
  }
  .nav.is-open .nav__list { display: flex; animation: nav-drop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
  .nav__list .pill { display: flex; padding: 12px 16px; }
  .pill { font-size: 14px; letter-spacing: 1.12px; }

  /* Hero: one-line wordmark over the tagline, the portrait centred on the pair */
  .hero__title { align-items: center; gap: 16px; margin-top: 36px; }
  .wordmark { font-size: clamp(36px, 12.7vw, 50px); line-height: 1; white-space: normal; }
  .hero__title .portrait {
    width: 17.3vw;                   /* 68px on the 393 frame */
    height: calc(17.3vw * 187.868 / 138.64);
  }
  .hero__tagline { margin-top: 20px; font-size: 14px; line-height: 1.5; letter-spacing: 1.12px; }
  .hero__stage { margin-top: 20px; }

  /* Selected projects: text heading, 12px captions, only the featured project is named */
  .projects { margin-top: 80px; }
  .projects__title { display: none; }
  .projects__heading {
    display: block;
    margin: 0 0 22px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--title);
    line-height: 1.1;
  }
  .projects__inner { padding-bottom: 0; }
  .card { gap: 6px; }
  .card__tags, .card__meta { font-size: 12px; letter-spacing: 0.96px; }
  .card__meta { transition: opacity 0.4s ease; }
  .card:not(.is-featured) .card__meta { opacity: 0; }

  /* Sections */
  .section, .section--tight { padding-top: 80px; }
  .bread__title { margin-bottom: 20px; font-size: var(--title); line-height: 1.1; }
  .bread__line--in { padding-left: 1.68em; }   /* 94px on the 393 frame */
  .bread__grid { gap: 20px; }
  .offer-card__meta { margin-top: 8px; font-size: 12px; letter-spacing: 0.96px; }

  /* YC deal: orange title left-aligned with the second line stepped in, Y mark back in the corner */
  .yc-deal { margin-top: 80px; }
  .yc-deal__inner { padding: 40px var(--gutter) 40px; }
  .yc-deal__title { align-items: flex-start; text-align: left; font-size: var(--title); line-height: 1.1; }
  .yc-deal__line--in { padding-right: 0; }
  .yc-deal__line:not(.yc-deal__line--in) { padding-left: 1.68em; }
  .yc-deal__mark { position: absolute; right: 0; top: 8px; width: 26px; height: 24px; margin: 0; }
  .yc-deal__intro { max-width: none; margin-top: 24px; font-size: 14px; line-height: 1.4; letter-spacing: 0.56px; }
  .yc-deal__intro > p:first-child { max-width: 75%; text-align: justify; }
  .yc-deal__intro .btn { margin-top: 16px; }
  .yc-deal__note { margin-top: 14px; font-size: 14px; }
  .yc-deal__list { margin-top: 40px; }
  .yc-deal__item { padding: 24px 0; }
  .yc-deal__row { align-items: flex-start; gap: 16px; row-gap: 16px; }
  .yc-deal__num { flex-basis: 20px; font-size: 14px; }
  .yc-deal__name { font-size: 14px; }
  .yc-deal__x { width: 10px; height: 10px; margin-top: 2px; }
  .yc-deal__desc { padding-left: 0; padding-right: 40px; font-size: 14px; line-height: 1.25; letter-spacing: 1.12px; }
  .yc-deal__bullets { padding-left: 0; padding-right: 40px; font-size: 14px; line-height: 1.6; letter-spacing: 0.56px; }
  .yc-deal__bullets li { padding-left: 18px; text-indent: -18px; }
  .yc-deal__bullets li::before { width: 18px; }
  .yc-deal__rate { margin-top: 24px; text-align: right; font-size: 14px; line-height: 1.1; }

  /* About */
  .about__title { margin-bottom: 20px; font-size: var(--title); line-height: 1.1; }
  .about__body { gap: 16px; font-size: 14px; line-height: 1.5; }
  .team { gap: 24px; margin-top: 40px; }
  .person { min-width: 0; max-width: none; flex-basis: 100%; }
  .person__name { margin-top: 8px; font-size: 14px; }
  .person__role { margin-top: 4px; font-size: 12px; }
  .person__links { gap: 8px; margin-top: 12px; }

  /* Closing ticket */
  .cta { margin-top: 80px; }
  .cta__inner { padding: 40px var(--gutter) 48px; }
  .cta__title { font-size: clamp(36px, 12vw, 56px); line-height: 1.1; }
  .cta__line--end { padding-left: 1.68em; }
  .cta__ticket { margin-top: 32px; }

  /* Project pages */
  .project { padding-bottom: 48px; }
  .project__head, .project__head--stacked { padding: 24px 0; gap: 16px; }
  .project__title { font-size: var(--title); line-height: 1.1; }
  .project__brief { gap: 8px; font-size: 14px; line-height: 1.5; letter-spacing: 0.28px; }
  .project__facts { gap: 6px; font-size: 12px; letter-spacing: 0.96px; }
  .tiles, .tiles__row { gap: 20px; }
  .project__next { padding-top: 40px; gap: 12px; }
  .project__next a { font-size: 22px; }

  /* Legal, contact, coming soon */
  .legal { padding: 24px var(--gutter) 64px; }
  .legal__title { font-size: var(--title); }
  .legal__meta { margin-top: 12px; font-size: 12px; }
  .legal > p, .legal > ul { font-size: 14px; line-height: 1.55; }
  .legal__meta + p { margin-top: 32px; }
  .legal h2 { margin-top: 32px; font-size: 14px; font-weight: 600; }
  .legal > ul { padding-left: 18px; }

  .contact { padding: 24px var(--gutter) 64px; }
  .contact__title { font-size: var(--title); }
  .contact__line--in { padding-left: 1em; }
  .enquiry { margin-top: 40px; font-size: 16px; }   /* 16px floor: anything smaller makes iOS zoom the page on focus */
  .enquiry__row { padding: 18px 0; }
  .enquiry__group { gap: 12px; }
  .enquiry__group legend { margin-bottom: 12px; }
  .enquiry__status { font-size: 12px; }

  .about--page { padding-top: 24px; padding-bottom: 64px; }
  .soon { min-height: 50vh; padding: 48px var(--gutter); }
  .soon__title { font-size: clamp(36px, 12vw, 56px); }

  /* Footer */
  .footer__inner { padding: 40px var(--gutter) 24px; gap: 28px; }
  .portrait--footer { width: 150px; height: 203px; }
  .footer__row { row-gap: 12px; font-size: 14px; }
  .footer__socials { gap: 24px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
  .footer__legal { gap: 20px; }
}

@keyframes nav-drop {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav__list { animation: none; }
  .nav__toggle span { transition: none; }
}

/* Tile label chips: smaller on phones (kept last so it wins over the base rules above) */
@media (max-width: 600px) {
  .tile__label, .artifacts__label, .lp-stack .tile__label, .merch-row .tile__label, .offer-card__image--still .tile__label {
    left: 11px;
    top: -1px;
    padding: 3px 8px;
    font-size: 12px;
  }
}