/* Aureline Studio, pages-4 route composition. Shared chrome and primitives remain foundation-owned. */

body[data-page="quiet-harbor"],
body[data-page="juniper-retreat"],
body[data-page="services"],
body[data-page="studio"] {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-plaster);
}

body[data-page="quiet-harbor"] *,
body[data-page="juniper-retreat"] *,
body[data-page="services"] *,
body[data-page="studio"] * {
  box-sizing: border-box;
}

body[data-page="quiet-harbor"] img,
body[data-page="juniper-retreat"] img,
body[data-page="services"] img,
body[data-page="studio"] img {
  display: block;
  width: 100%;
  height: auto;
}

body[data-page="quiet-harbor"] .route-inner,
body[data-page="juniper-retreat"] .route-inner,
body[data-page="services"] .route-inner,
body[data-page="studio"] .route-inner {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: var(--space-page-inline-desktop);
}

body[data-page="quiet-harbor"] .route-section,
body[data-page="juniper-retreat"] .route-section,
body[data-page="services"] .route-section,
body[data-page="studio"] .route-section {
  padding-block: 48px;
}

body[data-page="quiet-harbor"] .section-heading,
body[data-page="juniper-retreat"] .section-heading,
body[data-page="services"] .section-heading,
body[data-page="studio"] .section-heading {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: -0.025em;
}

body[data-page="quiet-harbor"] .section-intro,
body[data-page="juniper-retreat"] .section-intro,
body[data-page="services"] .section-intro,
body[data-page="studio"] .section-intro {
  max-width: var(--measure-copy);
  margin: 20px 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body[data-page="quiet-harbor"] .text-link,
body[data-page="juniper-retreat"] .text-link,
body[data-page="services"] .text-link,
body[data-page="studio"] .text-link,
body[data-page="quiet-harbor"] .project-link,
body[data-page="juniper-retreat"] .project-link {
  color: inherit;
  text-decoration-color: var(--color-walnut);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

body[data-page="quiet-harbor"] .text-link:hover,
body[data-page="juniper-retreat"] .text-link:hover,
body[data-page="services"] .text-link:hover,
body[data-page="studio"] .text-link:hover,
body[data-page="quiet-harbor"] .project-link:hover,
body[data-page="juniper-retreat"] .project-link:hover {
  text-decoration-thickness: 2px;
}

body[data-page="quiet-harbor"] .text-link:focus-visible,
body[data-page="juniper-retreat"] .text-link:focus-visible,
body[data-page="services"] .text-link:focus-visible,
body[data-page="studio"] .text-link:focus-visible,
body[data-page="quiet-harbor"] .project-link:focus-visible,
body[data-page="juniper-retreat"] .project-link:focus-visible,
body[data-page="quiet-harbor"] .related-card__media:focus-visible,
body[data-page="juniper-retreat"] .related-card__media:focus-visible,
body[data-page="services"] .faq-item summary:focus-visible,
body[data-page="studio"] .principle-card:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Project studies */
body[data-page="quiet-harbor"] .project-hero,
body[data-page="juniper-retreat"] .project-hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-paper);
}

body[data-page="quiet-harbor"] .project-hero__layout,
body[data-page="juniper-retreat"] .project-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: end;
}

body[data-page="quiet-harbor"] .project-hero__copy,
body[data-page="juniper-retreat"] .project-hero__copy {
  min-width: 0;
  padding: 72px 54px 64px max(var(--space-page-inline-desktop), calc((100vw - 1440px) / 2 + var(--space-page-inline-desktop)));
}

body[data-page="quiet-harbor"] .project-hero__title,
body[data-page="juniper-retreat"] .project-hero__title {
  max-width: 8ch;
  margin: 18px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7.2vw, 8rem);
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.035em;
}

body[data-page="quiet-harbor"] .project-hero__lede,
body[data-page="juniper-retreat"] .project-hero__lede {
  max-width: 34ch;
  margin: 0;
  color: var(--color-linen);
  font-size: var(--text-body);
  line-height: 1.55;
}

body[data-page="quiet-harbor"] .project-hero .eyebrow,
body[data-page="juniper-retreat"] .project-hero .eyebrow {
  color: var(--color-linen);
}

body[data-page="quiet-harbor"] .project-hero__media,
body[data-page="juniper-retreat"] .project-hero__media {
  display: flex;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  background: var(--color-walnut);
}

body[data-page="quiet-harbor"] .project-hero__media img,
body[data-page="juniper-retreat"] .project-hero__media img {
  width: 100%;
  height: auto;
}

body[data-page="quiet-harbor"] .project-meta,
body[data-page="juniper-retreat"] .project-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 22px 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

body[data-page="quiet-harbor"] .project-meta div,
body[data-page="juniper-retreat"] .project-meta div {
  min-width: 0;
}

body[data-page="quiet-harbor"] .project-meta dt,
body[data-page="juniper-retreat"] .project-meta dt {
  margin-bottom: 7px;
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

body[data-page="quiet-harbor"] .project-meta dd,
body[data-page="juniper-retreat"] .project-meta dd {
  margin: 0;
  line-height: 1.45;
}

body[data-page="quiet-harbor"] .project-brief__grid,
body[data-page="juniper-retreat"] .project-brief__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 8vw, 124px);
  align-items: start;
  margin-top: 32px;
}

body[data-page="quiet-harbor"] .project-brief__statement,
body[data-page="juniper-retreat"] .project-brief__statement {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.25rem);
  line-height: 0.98;
}

body[data-page="quiet-harbor"] .project-brief__copy,
body[data-page="juniper-retreat"] .project-brief__copy {
  min-width: 0;
  max-width: var(--measure-copy);
  padding-top: 4px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body[data-page="quiet-harbor"] .project-brief__copy p,
body[data-page="juniper-retreat"] .project-brief__copy p {
  margin: 0 0 1em;
}

body[data-page="quiet-harbor"] .project-gallery,
body[data-page="juniper-retreat"] .project-gallery {
  background: var(--color-paper);
}

body[data-page="quiet-harbor"] .project-gallery__grid,
body[data-page="juniper-retreat"] .project-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: var(--space-content-gap);
  align-items: start;
  margin-top: 32px;
}

body[data-page="quiet-harbor"] .project-gallery figure,
body[data-page="juniper-retreat"] .project-gallery figure {
  min-width: 0;
  margin: 0;
}

body[data-page="quiet-harbor"] .project-gallery figure:nth-child(2),
body[data-page="juniper-retreat"] .project-gallery figure:nth-child(2) {
  margin-top: clamp(40px, 8vw, 112px);
}

body[data-page="quiet-harbor"] .project-gallery figcaption,
body[data-page="juniper-retreat"] .project-gallery figcaption {
  max-width: 48ch;
  margin-top: 14px;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

body[data-page="quiet-harbor"] .material-story,
body[data-page="juniper-retreat"] .material-story {
  background: var(--color-olive);
  color: var(--color-paper);
}

body[data-page="quiet-harbor"] .material-story .eyebrow,
body[data-page="juniper-retreat"] .material-story .eyebrow {
  color: var(--color-paper);
}

body[data-page="quiet-harbor"] .material-story__grid,
body[data-page="juniper-retreat"] .material-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: center;
}

body[data-page="quiet-harbor"] .material-story__media,
body[data-page="juniper-retreat"] .material-story__media {
  min-width: 0;
}

body[data-page="quiet-harbor"] .material-story__copy,
body[data-page="juniper-retreat"] .material-story__copy {
  min-width: 0;
  max-width: 50ch;
}

body[data-page="quiet-harbor"] .material-story__copy h2,
body[data-page="juniper-retreat"] .material-story__copy h2 {
  max-width: 11ch;
  margin: 16px 0 24px;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--leading-display);
}

body[data-page="quiet-harbor"] .material-story__copy p,
body[data-page="juniper-retreat"] .material-story__copy p {
  margin: 0;
  color: var(--color-paper);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body[data-page="quiet-harbor"] .palette-list,
body[data-page="juniper-retreat"] .palette-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgb(251 249 245 / 0.35);
  list-style: none;
}

body[data-page="quiet-harbor"] .palette-list li,
body[data-page="juniper-retreat"] .palette-list li {
  min-width: 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

body[data-page="quiet-harbor"] .related-projects,
body[data-page="juniper-retreat"] .related-projects {
  background: var(--color-linen);
}

body[data-page="quiet-harbor"] .related-projects__header,
body[data-page="juniper-retreat"] .related-projects__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}

body[data-page="quiet-harbor"] .related-projects__grid,
body[data-page="juniper-retreat"] .related-projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-content-gap);
}

body[data-page="quiet-harbor"] .related-card,
body[data-page="juniper-retreat"] .related-card {
  min-width: 0;
}

body[data-page="quiet-harbor"] .related-card__media,
body[data-page="juniper-retreat"] .related-card__media {
  display: block;
  background: var(--color-walnut);
}

body[data-page="quiet-harbor"] .related-card__body,
body[data-page="juniper-retreat"] .related-card__body {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  border-top: var(--rule-thin) solid var(--color-ink);
}

body[data-page="quiet-harbor"] .related-card__body h3,
body[data-page="juniper-retreat"] .related-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 500;
  line-height: var(--leading-title);
}

body[data-page="quiet-harbor"] .related-card__body p,
body[data-page="juniper-retreat"] .related-card__body p {
  max-width: 22ch;
  margin: 4px 0 0;
  color: var(--color-ink-soft);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: right;
}

body[data-page="quiet-harbor"] .project-cta,
body[data-page="juniper-retreat"] .project-cta {
  background: var(--color-paper);
}

body[data-page="quiet-harbor"] .project-cta__layout,
body[data-page="juniper-retreat"] .project-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 40px;
  align-items: end;
}

body[data-page="quiet-harbor"] .project-cta__actions,
body[data-page="juniper-retreat"] .project-cta__actions,
body[data-page="services"] .services-cta__actions,
body[data-page="studio"] .studio-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

/* Services */
body[data-page="services"] .services-hero,
body[data-page="studio"] .studio-hero {
  position: relative;
  background: var(--color-paper);
}

body[data-page="services"] .services-hero__layout,
body[data-page="studio"] .studio-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
}

body[data-page="services"] .services-hero__copy,
body[data-page="studio"] .studio-hero__copy {
  min-width: 0;
  padding: 72px 56px 72px max(var(--space-page-inline-desktop), calc((100vw - 1440px) / 2 + var(--space-page-inline-desktop)));
}

body[data-page="services"] .services-hero__title,
body[data-page="studio"] .studio-hero__title {
  max-width: 8.5ch;
  margin: 18px 0 26px;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7.1vw, 8.25rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

body[data-page="services"] .services-hero__lede,
body[data-page="studio"] .studio-hero__lede {
  max-width: 40ch;
  margin: 0 0 30px;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body[data-page="services"] .services-hero__media,
body[data-page="studio"] .studio-hero__media {
  display: flex;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  background: var(--color-walnut);
}

body[data-page="services"] .services-hero__media img,
body[data-page="studio"] .studio-hero__media img {
  width: 100%;
  height: auto;
}

body[data-page="services"] .service-matrix__header,
body[data-page="studio"] .principles-header {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(36px, 7vw, 112px);
  align-items: end;
  margin-bottom: 40px;
}

body[data-page="services"] .service-list {
  border-top: var(--rule-thin) solid var(--color-rule);
}

body[data-page="services"] .service-entry {
  display: grid;
  grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(32px, 6vw, 96px);
  padding-block: 34px;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

body[data-page="services"] .service-entry__media {
  min-width: 0;
}

body[data-page="services"] .service-entry__content {
  min-width: 0;
}

body[data-page="services"] .service-entry__content h3 {
  margin: 8px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.7rem);
  font-weight: 500;
  line-height: 0.98;
}

body[data-page="services"] .service-entry__fit {
  max-width: var(--measure-copy);
  margin: 0 0 22px;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  line-height: 1.6;
}

body[data-page="services"] .service-entry__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

body[data-page="services"] .service-entry__details h4 {
  margin: 0 0 10px;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

body[data-page="services"] .service-entry__details ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-ink-soft);
  line-height: 1.65;
}

body[data-page="services"] .services-process {
  background: var(--color-ink);
  color: var(--color-paper);
}

body[data-page="services"] .services-process .eyebrow {
  color: var(--color-linen);
}

body[data-page="services"] .process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid rgb(251 249 245 / 0.3);
  list-style: none;
}

body[data-page="services"] .process-step {
  min-width: 0;
  padding: 26px 26px 4px 0;
}

body[data-page="services"] .process-step + .process-step {
  padding-left: 26px;
  border-left: 1px solid rgb(251 249 245 / 0.3);
}

body[data-page="services"] .process-step__number {
  color: var(--color-linen);
  font-family: var(--font-display);
  font-size: 2.25rem;
}

body[data-page="services"] .process-step h3 {
  margin: 28px 0 12px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
}

body[data-page="services"] .process-step p {
  margin: 0 0 14px;
  color: var(--color-linen);
  line-height: 1.6;
}

body[data-page="services"] .process-step strong {
  color: var(--color-paper);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}

body[data-page="services"] .fit-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 8vw, 120px);
}

body[data-page="services"] .fit-guide__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

body[data-page="services"] .fit-guide__columns h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
}

body[data-page="services"] .fit-guide__columns ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-ink-soft);
  line-height: 1.7;
}

body[data-page="services"] .services-faq {
  background: var(--color-linen);
}

body[data-page="services"] .faq-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}

body[data-page="services"] .faq-list {
  min-width: 0;
  border-top: var(--rule-thin) solid var(--color-ink);
}

body[data-page="services"] .faq-item {
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

body[data-page="services"] .faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 2px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
  list-style: none;
}

body[data-page="services"] .faq-item summary::-webkit-details-marker {
  display: none;
}

body[data-page="services"] .faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
}

body[data-page="services"] .faq-item[open] summary::after {
  content: "−";
}

body[data-page="services"] .faq-item__answer {
  max-width: 64ch;
  padding: 0 42px 22px 2px;
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}

body[data-page="services"] .faq-item__answer p {
  margin: 0;
}

body[data-page="services"] .services-cta,
body[data-page="studio"] .studio-cta {
  position: relative;
  color: var(--color-paper);
  background: var(--color-ink);
}

body[data-page="services"] .services-cta__media,
body[data-page="studio"] .studio-cta__media {
  position: absolute;
  inset: 0;
  opacity: 0.38;
}

body[data-page="services"] .services-cta__media::after,
body[data-page="studio"] .studio-cta__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(29 28 25 / 0.96), rgb(29 28 25 / 0.7) 55%, rgb(29 28 25 / 0.45));
  content: "";
}

body[data-page="services"] .services-cta__media img,
body[data-page="studio"] .studio-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="services"] .services-cta__layout,
body[data-page="studio"] .studio-cta__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 36px;
  align-items: end;
  min-height: 390px;
}

body[data-page="services"] .services-cta .section-heading,
body[data-page="studio"] .studio-cta .section-heading {
  max-width: 12ch;
}

body[data-page="services"] .services-cta .eyebrow,
body[data-page="studio"] .studio-cta .eyebrow,
body[data-page="services"] .services-cta .section-intro,
body[data-page="studio"] .studio-cta .section-intro {
  color: var(--color-linen);
}

/* Studio */
body[data-page="studio"] .studio-story {
  background: var(--color-linen);
}

body[data-page="studio"] .studio-story__grid,
body[data-page="studio"] .design-method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}

body[data-page="studio"] .studio-story__media,
body[data-page="studio"] .design-method__media {
  min-width: 0;
}

body[data-page="studio"] .studio-story__copy,
body[data-page="studio"] .design-method__copy {
  min-width: 0;
  max-width: 54ch;
}

body[data-page="studio"] .studio-story__copy blockquote {
  margin: 22px 0 26px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 0.98;
}

body[data-page="studio"] .studio-story__copy p,
body[data-page="studio"] .design-method__copy p {
  margin: 0 0 1em;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body[data-page="studio"] .principles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--rule-thin) solid var(--color-rule);
}

body[data-page="studio"] .principle-card {
  min-width: 0;
  padding: 26px 26px 12px 0;
}

body[data-page="studio"] .principle-card + .principle-card {
  padding-left: 26px;
  border-left: var(--rule-thin) solid var(--color-rule);
}

body[data-page="studio"] .principle-card__number {
  color: var(--color-walnut);
  font-family: var(--font-display);
  font-size: 2.1rem;
}

body[data-page="studio"] .principle-card h3 {
  margin: 48px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.05;
}

body[data-page="studio"] .principle-card p {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: 1.65;
}

body[data-page="studio"] .design-method {
  color: var(--color-paper);
  background: var(--color-walnut);
}

body[data-page="studio"] .design-method .eyebrow {
  color: var(--color-paper);
}

body[data-page="studio"] .studio-hero__title {
  max-width: none;
  font-size: clamp(3.75rem, 6vw, 6rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body[data-page="studio"] .design-method .section-heading {
  max-width: none;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body[data-page="studio"] .design-method__copy p {
  color: var(--color-paper);
}

body[data-page="studio"] .method-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgb(251 249 245 / 0.35);
  list-style: none;
}

body[data-page="studio"] .method-list li {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

body[data-page="studio"] .collaboration-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(40px, 8vw, 120px);
}

body[data-page="studio"] .collaboration-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: var(--rule-thin) solid var(--color-ink);
  list-style: none;
}

body[data-page="studio"] .collaboration-list li {
  display: grid;
  grid-template-columns: minmax(120px, 0.36fr) minmax(0, 0.64fr);
  gap: 28px;
  padding: 19px 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

body[data-page="studio"] .collaboration-list strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
}

body[data-page="studio"] .collaboration-list span {
  min-width: 0;
  color: var(--color-ink-soft);
  line-height: 1.65;
}

@media (max-width: 1100px) {
  body[data-page="quiet-harbor"] .route-inner,
  body[data-page="juniper-retreat"] .route-inner,
  body[data-page="services"] .route-inner,
  body[data-page="studio"] .route-inner {
    padding-inline: var(--space-page-inline-tablet);
  }

  body[data-page="services"] .process-list,
  body[data-page="studio"] .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="services"] .process-step:nth-child(3),
  body[data-page="studio"] .principle-card:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="services"] .process-step:nth-child(n + 3),
  body[data-page="studio"] .principle-card:nth-child(n + 3) {
    margin-top: 24px;
    padding-top: 28px;
    border-top: 1px solid rgb(251 249 245 / 0.3);
  }

  body[data-page="studio"] .principle-card:nth-child(n + 3) {
    border-top-color: var(--color-rule);
  }
}

@media (max-width: 899px) {
  body[data-page="quiet-harbor"] .project-hero__layout,
  body[data-page="juniper-retreat"] .project-hero__layout,
  body[data-page="services"] .services-hero__layout,
  body[data-page="studio"] .studio-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body[data-page="quiet-harbor"] .project-hero__copy,
  body[data-page="juniper-retreat"] .project-hero__copy,
  body[data-page="services"] .services-hero__copy,
  body[data-page="studio"] .studio-hero__copy {
    padding: 60px var(--space-page-inline-tablet) 44px;
  }

  body[data-page="quiet-harbor"] .project-hero__media img,
  body[data-page="juniper-retreat"] .project-hero__media img,
  body[data-page="services"] .services-hero__media img,
  body[data-page="studio"] .studio-hero__media img {
    height: auto;
    object-fit: contain;
  }

  body[data-page="quiet-harbor"] .project-brief__grid,
  body[data-page="juniper-retreat"] .project-brief__grid,
  body[data-page="services"] .service-matrix__header,
  body[data-page="services"] .service-entry,
  body[data-page="services"] .fit-guide__grid,
  body[data-page="services"] .faq-layout,
  body[data-page="studio"] .principles-header,
  body[data-page="studio"] .studio-story__grid,
  body[data-page="studio"] .design-method__grid,
  body[data-page="studio"] .collaboration-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  body[data-page="services"] .service-entry {
    gap: 24px;
  }

  body[data-page="quiet-harbor"] .project-gallery__grid,
  body[data-page="juniper-retreat"] .project-gallery__grid,
  body[data-page="quiet-harbor"] .material-story__grid,
  body[data-page="juniper-retreat"] .material-story__grid,
  body[data-page="quiet-harbor"] .project-cta__layout,
  body[data-page="juniper-retreat"] .project-cta__layout,
  body[data-page="services"] .services-cta__layout,
  body[data-page="studio"] .studio-cta__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="quiet-harbor"] .project-gallery figure:nth-child(2),
  body[data-page="juniper-retreat"] .project-gallery figure:nth-child(2) {
    width: 78%;
    margin: 0 0 0 auto;
  }

  body[data-page="quiet-harbor"] .material-story__copy,
  body[data-page="juniper-retreat"] .material-story__copy,
  body[data-page="studio"] .design-method__copy {
    order: -1;
  }

  body[data-page="quiet-harbor"] .project-cta__actions,
  body[data-page="juniper-retreat"] .project-cta__actions,
  body[data-page="services"] .services-cta__actions,
  body[data-page="studio"] .studio-cta__actions {
    justify-content: flex-start;
  }

  body[data-page="services"] .services-cta__layout,
  body[data-page="studio"] .studio-cta__layout {
    min-height: 350px;
  }
}

@media (max-width: 620px) {
  body[data-page="quiet-harbor"] .route-inner,
  body[data-page="juniper-retreat"] .route-inner,
  body[data-page="services"] .route-inner,
  body[data-page="studio"] .route-inner {
    padding-inline: var(--space-page-inline-mobile);
  }

  body[data-page="quiet-harbor"] .route-section,
  body[data-page="juniper-retreat"] .route-section,
  body[data-page="services"] .route-section,
  body[data-page="studio"] .route-section {
    padding-block: 30px;
  }

  body[data-page="quiet-harbor"] .project-hero__copy,
  body[data-page="juniper-retreat"] .project-hero__copy,
  body[data-page="services"] .services-hero__copy,
  body[data-page="studio"] .studio-hero__copy {
    padding: 48px var(--space-page-inline-mobile) 34px;
  }

  body[data-page="quiet-harbor"] .project-hero__title,
  body[data-page="juniper-retreat"] .project-hero__title,
  body[data-page="services"] .services-hero__title,
  body[data-page="studio"] .studio-hero__title {
    margin-top: 14px;
    font-size: clamp(3.5rem, 18vw, 5.15rem);
  }

  body[data-page="studio"] .studio-hero__title {
    font-size: clamp(3rem, 13vw, 4rem);
  }

  body[data-page="quiet-harbor"] .project-brief__grid,
  body[data-page="juniper-retreat"] .project-brief__grid,
  body[data-page="quiet-harbor"] .project-gallery__grid,
  body[data-page="juniper-retreat"] .project-gallery__grid {
    margin-top: 24px;
  }

  body[data-page="quiet-harbor"] .project-meta,
  body[data-page="juniper-retreat"] .project-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body[data-page="quiet-harbor"] .project-gallery figure:nth-child(2),
  body[data-page="juniper-retreat"] .project-gallery figure:nth-child(2) {
    width: 88%;
  }

  body[data-page="quiet-harbor"] .palette-list,
  body[data-page="juniper-retreat"] .palette-list,
  body[data-page="services"] .service-entry__details,
  body[data-page="services"] .fit-guide__columns,
  body[data-page="studio"] .method-list,
  body[data-page="quiet-harbor"] .related-projects__grid,
  body[data-page="juniper-retreat"] .related-projects__grid,
  body[data-page="services"] .process-list,
  body[data-page="studio"] .principles-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="quiet-harbor"] .related-projects__header,
  body[data-page="juniper-retreat"] .related-projects__header,
  body[data-page="quiet-harbor"] .related-card__body,
  body[data-page="juniper-retreat"] .related-card__body {
    display: block;
  }

  body[data-page="quiet-harbor"] .related-card__body p,
  body[data-page="juniper-retreat"] .related-card__body p {
    text-align: left;
  }

  body[data-page="services"] .process-step + .process-step,
  body[data-page="studio"] .principle-card + .principle-card {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="services"] .process-step:nth-child(n + 2),
  body[data-page="studio"] .principle-card:nth-child(n + 2) {
    margin-top: 18px;
    padding-top: 24px;
    border-top: 1px solid rgb(251 249 245 / 0.3);
  }

  body[data-page="studio"] .principle-card:nth-child(n + 2) {
    border-top-color: var(--color-rule);
  }

  body[data-page="studio"] .collaboration-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="quiet-harbor"] .project-hero__copy,
  body[data-page="juniper-retreat"] .project-hero__copy,
  body[data-page="services"] .services-hero__copy,
  body[data-page="studio"] .studio-hero__copy {
    animation: pages4-enter var(--motion-standard) var(--ease-standard) both;
  }

  body[data-page="quiet-harbor"] .project-hero__media,
  body[data-page="juniper-retreat"] .project-hero__media,
  body[data-page="services"] .services-hero__media,
  body[data-page="studio"] .studio-hero__media {
    animation: pages4-enter var(--motion-standard) var(--ease-standard) 80ms both;
  }

  body[data-page="quiet-harbor"] .project-hero__copy,
  body[data-page="quiet-harbor"] .project-hero__media {
    animation-name: quiet-harbor-enter;
  }
}

@keyframes quiet-harbor-enter {
  from {
    transform: translateY(12px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes pages4-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}