/* Layers: header 10, skip navigation 30, native dialog top layer. */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  gap: 24px;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.wordmark::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--coral);
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.masthead nav > a:not(.cta) {
  color: var(--ink);
  font-size: 0.84rem;
  text-decoration: none;
}
.masthead nav > a:not(.cta):hover,
.masthead nav > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 7px;
}
.menu-toggle {
  display: none;
}
.home-hero {
  position: relative;
  isolation: isolate;
  padding-top: 55px;
  text-align: center;
}
.hero-mosaic {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 650px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  pointer-events: none;
  opacity: 0.28;
  mask-image: linear-gradient(transparent, black 12%, black 65%, transparent);
}
.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 650px;
  background: radial-gradient(
    ellipse 50% 65% at 50% 30%,
    var(--paper) 30%,
    color-mix(in srgb, var(--paper) 90%, transparent) 60%,
    transparent 100%
  );
  pointer-events: none;
}
.mosaic-column {
  min-width: 0;
}
.mosaic-set {
  display: grid;
  gap: 18px;
  padding-bottom: 18px;
}
.mosaic-set img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 18px;
}
.enhanced .mosaic-track {
  animation: mosaic-scroll 64s linear infinite;
}
.mosaic-column:nth-child(even) .mosaic-track {
  animation-direction: reverse;
  animation-duration: 78s;
}
.mosaic-column:nth-child(3n) .mosaic-track {
  animation-delay: -24s;
}
.home-hero[data-motion-paused] .mosaic-track {
  animation-play-state: paused;
}
@keyframes mosaic-scroll {
  to {
    transform: translateY(-50%);
  }
}
.motion-toggle {
  display: none;
  position: absolute;
  top: 2px;
  right: 36px;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.enhanced .motion-toggle {
  display: inline-flex;
}
@media (max-width: 760px) {
  .hero-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    opacity: 0.22;
  }
  .mosaic-column:nth-child(n + 4) {
    display: none;
  }
  .mosaic-set {
    gap: 12px;
    padding-bottom: 12px;
  }
  .mosaic-set img {
    height: 180px;
    border-radius: 12px;
  }
  .home-hero::before {
    background: radial-gradient(
      ellipse 85% 60% at 50% 32%,
      var(--paper) 25%,
      color-mix(in srgb, var(--paper) 85%, transparent) 60%,
      transparent
    );
  }
  .motion-toggle {
    right: 10px;
    top: -7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .enhanced .motion-toggle {
    display: none;
  }
  .enhanced .mosaic-track {
    animation: none;
  }
}
.home-hero .eyebrow {
  margin: 0 0 24px;
}
.home-hero h1 {
  line-height: 1.01;
  letter-spacing: -0.065em;
  margin-bottom: 24px;
}
.home-hero h1 span {
  color: var(--seal);
}
.hero-lede {
  font-size: 1.2rem;
  margin: 0 auto 5px;
  color: var(--ink);
}
.language-line {
  font-size: 0.84rem;
  color: var(--ink-2);
  margin: 0 auto;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 28px;
}
.home-hero .hero-actions {
  justify-content: center;
  margin-bottom: 44px;
}
.home-hero .text-link {
  font-size: 0.88rem;
}
.hero-gallery {
  display: grid;
  grid-template-columns: 1fr 1.85fr 1.08fr;
  gap: 16px;
  height: 402px;
  text-align: left;
}
.citrus-art,
.serum-art {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
  isolation: isolate;
}
.citrus-art > img,
.serum-art > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.citrus-art:hover > img,
.serum-art:hover > img {
  transform: scale(1.04);
}
.poster-word {
  position: absolute;
  left: 22px;
  top: 27px;
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.96;
  color: var(--on-image);
  text-shadow: 0 2px 16px
    color-mix(in srgb, var(--image-shade) 35%, transparent);
}
.poster-foot {
  position: absolute;
  bottom: 22px;
  left: 24px;
  color: var(--on-image);
  font-size: 0.61rem;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.hero-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 80px;
  gap: 12px;
}
.serum-art img {
  object-position: 50% 68%;
}
.serum-copy {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1.7rem;
  letter-spacing: -0.045em;
  line-height: 1.04;
  font-weight: 600;
  color: var(--forest);
}
.film-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--mint);
  text-align: left;
}
.film-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 50%,
    color-mix(in srgb, var(--image-shade) 65%, transparent)
  );
}
.play-circle {
  display: grid;
  place-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--on-image);
  color: var(--forest);
  font-size: 1.1rem;
  transition: scale 0.2s;
}
.film-preview:hover .play-circle {
  scale: 1.1;
}
.film-caption {
  position: absolute;
  bottom: 25px;
  inset-inline: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--on-image);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.film-caption span:last-child {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0;
}
.voice-teaser {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px;
  border-radius: 12px;
  background: var(--mint);
  text-decoration: none;
  color: var(--ink);
}
.voice-teaser strong {
  display: block;
  font-size: 0.76rem;
  line-height: 1.3;
}
.voice-teaser small {
  display: block;
  font-size: 0.66rem;
  color: var(--ink-2);
}
.round-play {
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--seal);
  color: var(--paper);
  font-size: 0.65rem;
}
.waveform {
  flex: 1;
  font-size: 0.85rem;
  color: var(--seal);
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: -2px;
}
.sample-note {
  margin-top: 18px;
  font-size: 0.69rem;
}
.home-hero .sample-note {
  max-width: none;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 32px;
}
.section-heading h2 {
  margin-bottom: 0;
}
.section-heading > p {
  font-size: 1rem;
  color: var(--ink-2);
  max-width: 35ch;
  margin-bottom: 6px;
}
.filter-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0 24px;
  flex-wrap: wrap;
}
.filter-bar button {
  border: 1px solid var(--hairline);
  background: transparent;
  min-height: 44px;
  padding: 9px 22px;
  border-radius: 24px;
  font-size: 0.84rem;
  transition: background 0.2s;
}
.filter-bar button span {
  margin-left: 7px;
  font-size: 0.65rem;
  opacity: 0.7;
}
.filter-bar button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.filter-bar button:hover:not([aria-pressed="true"]) {
  background: var(--mint);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 30px;
}
.work-card {
  min-width: 0;
}
.work-media,
.work-card > .film-preview,
.voice-art {
  height: 340px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.work-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.work-media img[src*="skincare"] {
  object-position: center 68%;
}
.work-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  align-items: baseline;
}
.work-caption h3 {
  font-size: 0.91rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
}
.work-caption > span {
  font-size: 0.65rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.poster-sample .poster-word {
  font-size: 4.2rem;
}
.voice-art {
  padding: 26px;
  background: var(--mint);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.voice-art > h3 {
  font-size: 2.6rem;
  color: var(--seal);
}
.voice-art .eyebrow {
  margin-bottom: 10px;
  font-size: 0.6rem;
}
.voice-art .voice-player {
  padding: 0;
  background: transparent;
}
.voice-art .voice-heading {
  font-size: 0.66rem;
}
.voice-art .transcript {
  display: none;
}
.formats-section {
  background: var(--mint);
  padding-block: 85px;
}
.format-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: 75px;
  align-items: center;
}
.format-layout > div > p:not(.eyebrow) {
  color: var(--ink-2);
  max-width: 36ch;
}
.format-layout .text-link {
  font-size: 0.86rem;
}
.format-examples {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  align-items: end;
  gap: 20px;
}
.format-examples figure > div {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}
.format-examples img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.format-examples figure > div > span {
  position: absolute;
  top: 18%;
  left: 9%;
  color: var(--on-image);
  font-size: 2.3rem;
  letter-spacing: -0.06em;
  line-height: 0.97;
  font-weight: 600;
  text-shadow: 0 2px 12px
    color-mix(in srgb, var(--image-shade) 35%, transparent);
}
.format-square > div {
  aspect-ratio: 1;
}
.format-story {
  grid-column: 2;
  grid-row: 1 / 3;
}
.format-story > div {
  aspect-ratio: 9/16;
}
.format-wide {
  grid-column: 1;
}
.format-wide > div {
  aspect-ratio: 16/9;
}
.format-wide > div > span {
  font-size: 1.55rem !important;
}
.format-examples figcaption {
  font-size: 0.65rem;
  color: var(--ink-2);
  margin-top: 7px;
}
.voice-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.voice-intro > p:not(.eyebrow) {
  color: var(--ink-2);
}
.voice-intro .note {
  font-size: 0.73rem;
}
.voice-intro .text-link {
  font-size: 0.84rem;
}
.voice-player {
  background: var(--mint);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}
.voice-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 0.87rem;
  margin-bottom: 16px;
}
.voice-heading > span:last-child {
  font-size: 0.69rem;
  color: var(--ink-2);
  font-weight: 400;
}
audio {
  width: 100%;
  height: 40px;
  display: block;
}
.transcript {
  font-size: 0.71rem;
  margin-top: 10px;
  color: var(--ink-2);
}
.transcript summary {
  padding: 4px 0;
  min-height: 32px;
}
.transcript p {
  margin: 8px 0 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 65px;
  margin-top: 55px;
}
.step-number {
  display: flex;
  width: 43px;
  height: 43px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--seal);
  font-size: 0.88rem;
  margin-bottom: 26px;
}
.steps h3 {
  font-size: 1.45rem;
  margin-bottom: 14px;
}
.steps p {
  font-size: 0.92rem;
  color: var(--ink-2);
}
.audience-section {
  padding-block: 10px 30px;
}
.audience-panel {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  padding: 64px;
  background: var(--forest);
  border-radius: 24px;
  color: var(--on-forest);
}
.audience-panel .eyebrow {
  color: var(--muted-forest);
}
.audience-panel h2 {
  font-size: 3.4rem;
}
.cta-light {
  background: var(--on-forest);
  color: var(--forest);
}
.audience-options {
  align-self: center;
}
.audience-options > a {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--on-forest);
  text-decoration: none;
  padding: 25px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-forest) 23%, transparent);
}
.audience-options > a > span {
  font-size: 0.8rem;
  color: var(--muted-forest);
}
.audience-options > a > span:last-child {
  margin-left: auto;
  font-size: 1.4rem;
}
.audience-options h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.audience-options p {
  color: var(--muted-forest);
  font-size: 0.8rem;
  margin: 0;
}
.audience-options > a:hover h3 {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.faq-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  list-style: none;
  padding: 22px 0;
  font-size: 0.98rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--seal);
  font-weight: 400;
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  color: var(--ink-2);
  font-size: 0.88rem;
  padding-right: 20px;
}
.demo-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 90px;
  padding: 50px;
  border-radius: 24px;
  background: var(--mint);
}
.demo-layout h2 {
  font-size: 4rem;
}
.demo-layout > div > p:not(.eyebrow) {
  color: var(--ink-2);
}
.demo-photo {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 28px;
}
.demo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
}
.demo-form {
  align-self: center;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  min-width: 0;
}
.field--wide {
  grid-column: 1 / -1;
}
.field label {
  display: block;
  font-size: 0.77rem;
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  line-height: 1.4;
  min-height: 46px;
}
.field textarea {
  resize: vertical;
  min-height: 100px;
}
.field input[aria-invalid="true"] {
  border-color: var(--error);
}
.honeypot {
  display: none;
}
.form-status {
  margin: 12px 0;
  font-size: 0.83rem;
}
.form-status[data-state="error"] {
  color: var(--error);
}
.form-status[data-state="sent"] {
  color: var(--seal);
}
.demo-form > button {
  width: 100%;
}
.form-purpose {
  font-size: 0.65rem;
  color: var(--ink-2);
  margin: 14px 0 0;
}
.footer {
  padding-block: 42px 28px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--hairline);
}
.footer-tagline {
  font-size: 0.74rem;
  color: var(--ink-2);
  margin-top: 14px;
  margin-bottom: 0;
}
.footer-links {
  display: flex;
  gap: 23px;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 0.73rem;
  color: var(--ink);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.footer-links a:hover {
  text-decoration: underline;
}
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.footer-id,
.footer-note {
  color: var(--ink-2);
  font-size: 0.65rem;
  margin: 0;
}
.footer-id strong {
  font-weight: 400;
}
.media-dialog {
  width: min(960px, calc(100% - 32px));
  max-height: 90dvh;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}
.media-dialog::backdrop {
  background: color-mix(in srgb, var(--image-shade) 80%, transparent);
}
.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.dialog-bar h2 {
  font-size: 1.3rem;
  margin: 0;
}
.dialog-close {
  background: var(--mint);
  border: 0;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 0.8rem;
}
.media-dialog video {
  width: 100%;
  max-height: 65dvh;
  border-radius: 10px;
  background: var(--image-shade);
}
.media-dialog .note {
  margin: 15px 0 0;
}
.media-error {
  color: var(--error);
  margin: 10px 0 0;
  font-size: 0.85rem;
}
.interior-hero {
  text-align: center;
  padding-top: 65px;
  padding-bottom: 65px;
}
.interior-hero .lede,
.interior-hero .eyebrow {
  margin-inline: auto;
}
.packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.package {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.package-image {
  height: 230px;
  overflow: hidden;
}
.package-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
}
.package-body {
  padding: 30px;
}
.package h2 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.package p {
  color: var(--ink-2);
  font-size: 0.9rem;
}
.package ul {
  list-style: none;
  padding: 10px 0;
  margin: 0 0 24px;
}
.package li {
  margin: 17px 0;
  font-size: 0.85rem;
}
.package li::before {
  content: "✓";
  display: inline-block;
  margin-right: 12px;
  color: var(--seal);
}
.package .cta {
  width: 100%;
  font-size: 0.83rem;
  gap: 10px;
}
.pricing-note {
  text-align: center;
  color: var(--ink-2);
  font-size: 0.8rem;
  margin-top: 30px;
}
.quote-factors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 18px;
  background: var(--mint);
  padding: 35px;
  gap: 30px;
  margin-top: 35px;
}
.quote-factors span {
  font-size: 0.78rem;
  color: var(--seal);
}
.quote-factors h3 {
  font-size: 1.3rem;
  margin: 20px 0 0;
}
.billing-details {
  padding: 23px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9rem;
}
.billing-details summary {
  min-height: 30px;
  font-weight: 600;
}
.billing-details p {
  padding-top: 16px;
  margin: 0;
  color: var(--ink-2);
}
.closing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 50px;
  background: var(--mint);
  border-radius: 18px;
}
.closing-cta h2 {
  margin-bottom: 14px;
}
.closing-cta p {
  margin: 0;
  color: var(--ink-2);
}
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding-block: 65px;
}
.about-hero h1 {
  font-size: clamp(3.3rem, 5.4vw, 5.2rem);
}
.about-hero .cta {
  margin-top: 15px;
}
.about-hero > div > p:not(.eyebrow) {
  font-size: 1rem;
  color: var(--ink-2);
}
.about-collage {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 14px;
}
.about-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.about-collage img:first-child {
  grid-row: 1 / 3;
}
.principles {
  margin-top: 50px;
}
.principles article {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  gap: 30px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.principles article > span {
  color: var(--seal);
}
.principles h3 {
  margin: 0;
  font-size: 1.6rem;
}
.principles p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.about-work {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 20px;
  height: 390px;
}
.about-work > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  object-position: center 65%;
}
.care-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  background: var(--mint);
  padding: 55px;
  border-radius: 18px;
}
.care-panel h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.care-panel p:not(.eyebrow) {
  color: var(--ink-2);
  font-size: 0.87rem;
  margin-bottom: 25px;
}
.document-page {
  padding-bottom: 50px;
}
.document-page > .hero {
  padding-block: 70px;
}
.document-page > .hero h1 {
  font-size: clamp(3rem, 5vw, 4.8rem);
  max-width: 18ch;
}
.document-page > .hero .lede {
  max-width: 64ch;
}
.document-page > .section {
  padding-block: 48px;
  border-top: 1px solid var(--hairline);
}
.document-page h2 {
  font-size: 2.1rem;
  max-width: 30ch;
}
.document-page h3 {
  font-size: 1.4rem;
}
.document-page p,
.document-page li {
  font-size: 0.96rem;
  color: var(--ink-2);
}
.document-page .split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
}
.document-page .plate {
  margin-top: 20px;
}
.document-page .plate img {
  border-radius: 18px;
  max-height: 380px;
  width: 100%;
  object-fit: cover;
}
.document-page figcaption {
  font-size: 0.73rem;
  color: var(--ink-2);
  margin-top: 14px;
}
.document-page > .hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 60px;
  align-items: center;
}
.document-page > .hero--text-only {
  display: block;
}
.document-page .hero > .plate img {
  height: 300px;
}
.table-wrap {
  margin: 30px 0;
  width: 100%;
}
.obligations {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.83rem;
}
.obligations th {
  text-align: left;
  color: var(--ink);
  background: var(--mint);
}
.obligations td,
.obligations th {
  padding: 20px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.obligations td {
  color: var(--ink-2);
}
.obligations p {
  font-size: inherit;
}
.regimes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 35px;
}
.pull {
  border-left: 2px solid var(--seal);
  padding-left: 22px;
}
.limits-list li {
  padding-bottom: 15px;
}
.credits-list {
  max-width: 960px;
}
.credits-list h2 {
  font-size: 2rem;
  margin-top: 45px;
}
.credits-list p,
.credits-list li {
  color: var(--ink-2);
  font-size: 0.95rem;
}
.credits-list li {
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
@media (min-width: 1000px) {
  .home-hero .hero-gallery {
    margin-inline: -5px;
  }
}
@media (max-width: 1050px) {
  .masthead nav {
    gap: 20px;
  }
  .hero-gallery {
    grid-template-columns: 1fr 1.65fr 1fr;
    height: 340px;
  }
  .waveform {
    display: none;
  }
  .voice-teaser {
    padding: 10px;
    gap: 8px;
  }
  .serum-copy {
    font-size: 1.4rem;
  }
  .work-grid {
    gap: 20px;
  }
  .work-media,
  .work-card > .film-preview,
  .voice-art {
    height: 290px;
  }
  .work-caption {
    flex-direction: column;
    gap: 3px;
  }
  .voice-art {
    padding: 20px;
  }
  .section-heading,
  .voice-section,
  .format-layout,
  .faq-section,
  .about-hero {
    gap: 40px;
  }
  .audience-panel {
    padding: 45px;
    gap: 40px;
  }
  .demo-layout {
    gap: 40px;
    padding: 35px;
  }
  .footer-top {
    align-items: flex-start;
  }
  .footer-links {
    gap: 15px;
    max-width: 380px;
  }
}
@media (max-width: 760px) {
  .masthead {
    min-height: 78px;
    position: relative;
    z-index: 10;
  }
  .wordmark {
    font-size: 1.85rem;
  }
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid var(--hairline);
  }
  .menu-toggle span {
    display: block;
    height: 1px;
    width: 20px;
    background: var(--ink);
  }
  .masthead nav {
    display: none;
    position: absolute;
    left: 22px;
    right: 22px;
    top: 74px;
    padding: 20px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 16px 30px
      color-mix(in srgb, var(--image-shade) 12%, transparent);
  }
  .masthead nav[data-open="true"] {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }
  .masthead nav > a:not(.cta) {
    padding: 12px 5px;
    font-size: 1rem;
  }
  .masthead .cta {
    margin-top: 10px;
  }
  .home-hero {
    padding-top: 38px;
  }
  .home-hero .eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    margin-bottom: 24px;
  }
  .home-hero h1 {
    letter-spacing: -0.065em;
    margin-bottom: 22px;
  }
  .hero-lede {
    font-size: 1.04rem;
    max-width: 27ch;
    line-height: 1.5;
  }
  .language-line {
    font-size: 0.74rem;
    max-width: 40ch;
    margin-top: 10px;
  }
  .home-hero .hero-actions {
    gap: 14px;
    margin-top: 25px;
    margin-bottom: 30px;
  }
  .home-hero .cta {
    width: 100%;
    max-width: 350px;
  }
  .home-hero .text-link {
    font-size: 0.8rem;
  }
  .hero-gallery {
    height: auto;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hero-film {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 280px;
  }
  .citrus-art {
    height: 270px;
  }
  .hero-side {
    height: 270px;
    grid-template-rows: 190px 68px;
  }
  .poster-word {
    font-size: 2.35rem;
    top: 20px;
    left: 15px;
  }
  .poster-foot {
    left: 15px;
    font-size: 0.46rem;
    bottom: 17px;
  }
  .serum-copy {
    font-size: 1.15rem;
    top: 16px;
    left: 13px;
  }
  .voice-teaser {
    gap: 8px;
    padding: 8px;
  }
  .voice-teaser strong {
    font-size: 0.64rem;
  }
  .voice-teaser small {
    font-size: 0.57rem;
  }
  .round-play {
    width: 28px;
    height: 28px;
    font-size: 0.55rem;
  }
  .sample-note {
    font-size: 0.65rem;
    line-height: 1.7;
  }
  .section-heading {
    display: block;
    margin-bottom: 20px;
  }
  .section-heading > p {
    margin-top: 20px;
    font-size: 0.9rem;
  }
  .filter-bar {
    gap: 6px;
    padding-bottom: 20px;
  }
  .filter-bar button {
    padding: 9px 14px;
    font-size: 0.76rem;
  }
  .filter-bar button span {
    display: none;
  }
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 14px;
  }
  .work-media,
  .work-card > .film-preview,
  .voice-art {
    height: 240px;
  }
  .work-caption h3 {
    font-size: 0.81rem;
  }
  .work-caption > span {
    font-size: 0.61rem;
  }
  .work-card .film-caption {
    bottom: 17px;
    inset-inline: 15px;
    font-size: 1.05rem;
  }
  .work-card .play-circle {
    width: 45px;
    height: 45px;
    font-size: 0.85rem;
  }
  .poster-sample .poster-word {
    font-size: 2.9rem;
  }
  .voice-art {
    padding: 15px;
  }
  .voice-art > h3 {
    font-size: 1.85rem;
    margin-bottom: 15px;
  }
  .voice-art .voice-heading {
    display: block;
  }
  .voice-art .voice-heading > span:last-child {
    display: none;
  }
  .voice-art .eyebrow {
    font-size: 0.48rem;
  }
  .voice-art audio {
    height: 36px;
  }
  .formats-section {
    padding-block: 60px;
  }
  .format-layout,
  .voice-section {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .format-examples {
    gap: 15px;
  }
  .format-examples figure > div > span {
    font-size: 2.1rem;
  }
  .steps {
    gap: 28px;
    grid-template-columns: 1fr;
    margin-top: 35px;
  }
  .steps article {
    position: relative;
    padding-left: 65px;
  }
  .step-number {
    position: absolute;
    left: 0;
    top: 0;
  }
  .steps h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  .steps p {
    margin: 0;
    font-size: 0.9rem;
  }
  .audience-panel {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 25px;
  }
  .audience-panel h2 {
    font-size: 2.9rem;
  }
  .audience-options > a {
    gap: 15px;
  }
  .audience-options p {
    font-size: 0.78rem;
  }
  .faq-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .faq summary {
    font-size: 0.92rem;
  }
  .demo-layout {
    grid-template-columns: 1fr;
    padding: 30px 22px;
    gap: 25px;
  }
  .demo-layout h2 {
    font-size: 3.1rem;
  }
  .demo-photo {
    display: none;
  }
  .form-grid {
    gap: 15px;
  }
  .field label {
    font-size: 0.73rem;
  }
  .field input {
    font-size: 16px;
  }
  .field textarea {
    font-size: 16px;
  }
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
  .footer-links {
    gap: 10px 22px;
  }
  .footer-top {
    padding-bottom: 25px;
  }
  .footer-bottom {
    gap: 15px;
  }
  .interior-hero {
    padding-top: 45px;
    padding-bottom: 40px;
  }
  .packages {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .package-image {
    height: 210px;
  }
  .package-body {
    padding: 25px;
  }
  .package li {
    margin: 13px 0;
  }
  .quote-factors {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 25px;
  }
  .quote-factors > div {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  .quote-factors h3 {
    margin: 0;
  }
  .closing-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
  }
  .closing-cta .cta {
    width: 100%;
  }
  .about-hero {
    grid-template-columns: 1fr;
    padding-block: 40px;
  }
  .about-hero h1 {
    font-size: 3.35rem;
  }
  .about-collage {
    grid-template-rows: 160px 160px;
  }
  .principles article {
    grid-template-columns: 30px 1fr;
    gap: 15px;
  }
  .principles h3 {
    font-size: 1.35rem;
  }
  .principles p {
    grid-column: 2;
  }
  .about-work {
    height: 270px;
    gap: 12px;
    grid-template-columns: 1.4fr 1fr;
  }
  .care-panel {
    grid-template-columns: 1fr;
    padding: 30px;
    gap: 30px;
  }
  .document-page > .hero {
    display: block;
    padding-block: 40px;
  }
  .document-page > .hero h1 {
    font-size: 3rem;
  }
  .document-page > .hero .lede {
    font-size: 1rem;
  }
  .document-page .split,
  .regimes {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .document-page h2 {
    font-size: 1.9rem;
  }
  .document-page > .section {
    padding-block: 35px;
  }
  .obligations,
  .obligations tbody {
    display: block;
  }
  .obligations thead {
    display: none;
  }
  .obligations tr {
    display: block;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .obligations td {
    display: block;
    padding: 16px;
    overflow-wrap: anywhere;
    border-bottom: 0;
  }
  .obligations td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink);
    font-size: 0.69rem;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .obligations td:first-child {
    background: var(--mint);
  }
}
@media (max-width: 390px) {
  .page {
    padding-inline: 18px;
  }
  .home-hero h1 {
    font-size: 2.85rem;
  }
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-media,
  .work-card > .film-preview,
  .voice-art {
    height: 330px;
  }
  .work-caption {
    flex-direction: row;
  }
  .voice-art > h3 {
    font-size: 3rem;
  }
  .voice-art .voice-heading {
    display: flex;
  }
  .voice-art .voice-heading > span:last-child {
    display: block;
  }
  .poster-sample .poster-word {
    font-size: 4.3rem;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.home-hero .eyebrow {
  max-width: none;
}
.theme-toggle {
  border: 1px solid var(--hairline);
  background: var(--mint);
  color: var(--ink);
  min-height: 44px;
  padding: 9px 14px;
  font-size: 0.7rem;
  margin-top: 18px;
}
.theme-toggle::before {
  content: "◐";
  margin-right: 8px;
  font-size: 1rem;
}
.theme-toggle[aria-checked="true"] {
  border-color: var(--seal);
}

.film-preview {
  text-decoration: none;
}
.optional-details {
  grid-column: 1 / -1;
  font-size: 0.76rem;
}
.optional-details > summary {
  min-height: 32px;
  color: var(--ink-2);
}
.optional-details > .form-grid {
  margin-top: 12px;
}
html:not(.enhanced) .filter-bar {
  display: none;
}
@media (max-width: 760px) {
  html:not(.enhanced) .menu-toggle {
    display: none;
  }
  html:not(.enhanced) .masthead {
    flex-wrap: wrap;
    padding-block: 20px;
  }
  html:not(.enhanced) .masthead nav {
    display: flex;
    position: static;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}

/* Grid tracks must not grow to an image's intrinsic height. */
.hero-gallery > *,
.about-work > * {
  min-height: 0;
  min-width: 0;
}
.about-work {
  grid-template-rows: minmax(0, 1fr);
}
@media (min-width: 761px) {
  .hero-gallery {
    grid-template-rows: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Automation sections: the content engine, its destinations, digital twins,
   and the choice between running it hands-off or hands-on.

   Each one deliberately takes a layout the page does not already use: a
   full-width stage rail, an asymmetric channel grid, a cascade on a dark
   band, and a two-column split on hairlines. Repeating an existing family
   here would make the page read as one long section.
   --------------------------------------------------------------------------- */

.engine-head {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 68px;
  align-items: center;
  margin-bottom: 72px;
}
.engine-head p:not(.eyebrow) {
  color: var(--ink-2);
  font-size: 1.1rem;
  max-width: 46ch;
  margin-bottom: 0;
}
.engine-art {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.engine-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s;
}
.engine-art:hover img {
  scale: 1.04;
}
.engine-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The spine is one line across the whole rail rather than a border per cell,
   so the six stages read as one continuous run instead of six boxes. */
.engine-rail::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--hairline);
  transform-origin: left center;
}
.engine-rail > li {
  position: relative;
  padding-block-start: 26px;
  padding-inline-end: 6px;
}
/* A tick down from the spine marks where each stage starts. It is structural
   (it indexes the rail), not an ornament: without it the columns float. */
.engine-rail > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 15px;
  background: var(--seal);
}
.engine-rail h3 {
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.engine-rail p {
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
  max-width: 28ch;
}
@keyframes rail-draw {
  to {
    transform: scaleX(1);
  }
}
/* Motivated motion: the line draws in the reading direction as the rail
   arrives, which is the one thing the static layout cannot say -- that these
   six stages run in order, on their own. Anything without scroll-driven
   animation, and anyone who asked for less motion, gets the finished line. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .engine-rail::before {
      transform: scaleX(0);
      animation: rail-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 32%;
    }
  }
}

.channels-section {
  background: var(--surface);
  padding-block: 92px;
}
.channels-head {
  max-width: 44rem;
  margin-bottom: 44px;
}
.channels-head > p {
  color: var(--ink-2);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 0;
}
/* The tall tile spans both rows, so the grid has to size the rows to it. Left
   to `auto` that slack lands inside the short tiles as dead space under their
   copy. Fixed proportions plus images that flex means every cell is filled by
   something on purpose. */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1.32fr 1fr;
  height: 624px;
  gap: 16px;
}
.channel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.channel-body {
  padding: 26px 28px 28px;
}
.channel h3 {
  font-size: 1.3rem;
  margin: 14px 0 10px;
}
.channel p {
  color: var(--ink-2);
  font-size: 0.87rem;
  line-height: 1.55;
  margin: 0;
}
.channel-mark {
  display: block;
  color: var(--seal);
}
.channel-reel {
  grid-column: 1 / 3;
}
.channel-reel > img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}
/* The two short tiles carry copy only, so it sits on the cell's centre line
   rather than hanging from the top edge. */
.channel-tint,
.channel-grid > .channel:not(.channel-reel):not(.channel-tall) {
  justify-content: center;
}
.channel-tall {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-content: flex-end;
  background: var(--forest);
  border-color: var(--forest);
  color: var(--on-forest);
}
.channel-tall > img {
  flex: 1 1 auto;
  min-height: 210px;
  width: 100%;
  object-fit: cover;
}
.channel-tall .channel-mark {
  color: var(--on-forest);
}
.channel-tall p {
  color: var(--muted-forest);
}
.channel-tint {
  background: var(--mint);
}
.channels-note {
  margin-top: 22px;
  margin-bottom: 0;
}

.twin-section {
  background: var(--forest);
  color: var(--on-forest);
  padding-block: 96px;
}
.twin-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.twin-copy h2 {
  color: var(--on-forest);
}
.twin-copy > p:not(.note) {
  color: var(--muted-forest);
  font-size: 1.1rem;
  max-width: 40ch;
  margin-bottom: 30px;
}
.twin-copy .note {
  color: var(--muted-forest);
  margin: 26px 0 0;
  max-width: 44ch;
  font-size: 0.76rem;
}
.twin-copy .note a {
  color: var(--on-forest);
}
/* One person, then their outputs, stepping away from them. The offset is the
   argument the section is making, so it is the layout rather than a caption. */
.twin-stack {
  display: grid;
  gap: 16px;
}
.twin-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--on-forest) 22%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--on-forest) 7%, transparent);
  padding: 22px 26px;
}
.twin-card:nth-child(2) {
  margin-inline-start: 38px;
}
.twin-card:nth-child(3) {
  margin-inline-start: 76px;
}
.twin-card h3 {
  font-size: 1.15rem;
  color: var(--on-forest);
  margin-bottom: 9px;
}
.twin-card p {
  color: var(--muted-forest);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0;
  max-width: 34ch;
}
.twin-card .waveform {
  display: block;
  color: var(--muted-forest);
  margin-top: 14px;
}
/* The portrait is taller than the heading and body stacked. Spanning it across
   two grid rows makes the grid deal the spare height out between them, which
   pushes the heading off its own paragraph. Taking it out of flow and reserving
   its width with padding keeps the text block tight and the portrait centred. */
.twin-card-face {
  position: relative;
  min-height: 160px;
  padding-inline-end: 172px;
}
.twin-card-face h3 {
  margin-bottom: 9px;
}
.twin-card-face img {
  position: absolute;
  inset-inline-end: 26px;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 128px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
}
.twin-card-face h3 {
  grid-column: 1;
}
.twin-card-face p {
  grid-column: 1;
}

.ways-section h2 {
  margin-bottom: 52px;
}
.ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
.ways h3 {
  font-size: 1.6rem;
  margin-bottom: 16px;
}
.ways p {
  color: var(--ink-2);
  font-size: 1rem;
  max-width: 44ch;
  margin: 0;
}
.ways figure {
  margin: 0 0 28px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.ways figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s;
}
.ways > article:hover figure img {
  scale: 1.04;
}

@media (max-width: 1050px) {
  .engine-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 38px;
  }
  .engine-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-bottom: 52px;
  }
  .engine-head p:not(.eyebrow) {
    max-width: none;
  }
  .twin-layout {
    gap: 48px;
  }
  .twin-card:nth-child(2) {
    margin-inline-start: 24px;
  }
  .twin-card:nth-child(3) {
    margin-inline-start: 48px;
  }
  .ways {
    gap: 44px;
  }
}
@media (max-width: 760px) {
  .engine-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 32px;
  }
  .engine-rail p {
    max-width: none;
  }
  .channels-section {
    padding-block: 64px;
  }
  .channel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .channel-reel,
  .channel-tall {
    grid-column: auto;
    grid-row: auto;
  }
  .channel-grid {
    grid-template-rows: none;
    height: auto;
  }
  .channel-reel > img {
    flex: 0 0 auto;
    height: 190px;
  }
  .channel-tall > img {
    flex: 0 0 auto;
    height: 300px;
  }
  .twin-section {
    padding-block: 64px;
  }
  .twin-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .twin-copy > p:not(.note),
  .twin-card p {
    max-width: none;
  }
  .twin-card:nth-child(2),
  .twin-card:nth-child(3) {
    margin-inline-start: 0;
  }
  .twin-card-face {
    padding-inline-end: 122px;
  }
  .twin-card-face img {
    inset-inline-end: 20px;
    width: 88px;
    height: 110px;
  }
  .ways {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .ways p {
    max-width: none;
  }
}
@media (max-width: 390px) {
  .engine-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .twin-card-face {
    padding-inline-end: 100px;
  }
  .twin-card-face img {
    width: 72px;
    height: 90px;
  }
}

/* ---------------------------------------------------------------------------
   Motion for the automation sections.

   Scroll-driven rather than JavaScript-driven, so it costs no main-thread work
   and each element carries its own view() timeline -- which is what staggers a
   grid of six stages without a single hard-coded delay. Everything here is
   gated twice: once on support for the timeline, once on the visitor not having
   asked for less motion. Without either, the finished state is the base state,
   so the page is complete before a frame of this runs.

   Only transform and opacity are animated. Nothing here reflows.
   --------------------------------------------------------------------------- */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@keyframes art-settle {
  from {
    scale: 1.08;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Each stage, tile and card arrives as it is reached. The point is that the
       reader meets them in sequence, which is the argument these sections make. */
    .engine-rail > li,
    .channel,
    .twin-card,
    .ways > article {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    /* The photographs ease out of a slight push-in, so they read as film rather
       than as a flat block dropped into the layout. */
    .engine-art img,
    .ways figure img,
    .channel-reel > img {
      animation: art-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
  }
}

/* Hovering the stack opens the fan a little further. The offset is the whole
   idea of the section, so responding to the pointer restates it rather than
   decorating it. */
.twin-card {
  transition:
    margin 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s;
}
.twin-stack:hover .twin-card:nth-child(2) {
  margin-inline-start: 52px;
}
.twin-stack:hover .twin-card:nth-child(3) {
  margin-inline-start: 104px;
}
.twin-card:hover {
  background: color-mix(in srgb, var(--on-forest) 12%, transparent);
}

.channel > img,
.channel-tall > img {
  transition: scale 0.7s;
}
.channel:hover > img {
  scale: 1.03;
}

@media (max-width: 1050px) {
  .twin-stack:hover .twin-card:nth-child(2) {
    margin-inline-start: 34px;
  }
  .twin-stack:hover .twin-card:nth-child(3) {
    margin-inline-start: 68px;
  }
}
@media (max-width: 760px) {
  .twin-stack:hover .twin-card:nth-child(2),
  .twin-stack:hover .twin-card:nth-child(3) {
    margin-inline-start: 0;
  }
}

/* Services expansion: native CSS, existing studio palette and type.
   Catalogue: 5/10 visual variation, 2/10 motion, 6/10 density.
   Existing masthead, hero, sample gallery and theme tokens are preserved. */
.services-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 42px; padding-block: 54px 66px; }
.services-hero h1 { font-size: clamp(3rem, 5.15vw, 4.75rem); letter-spacing: -.065em; line-height: 1.02; }
.services-hero h1 span { color: var(--seal); }
.services-hero .lede { max-width: 36ch; font-size: 1.13rem; margin-bottom: 30px; }
.services-hero-art img { width: 100%; aspect-ratio: 1.05; object-fit: cover; object-position: 64% center; border-radius: var(--radius); }
.services-hero-art figcaption, .campaign-example figcaption { font-size: .75rem; color: var(--ink-2); margin-top: 12px; }
.services-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; padding-block: 34px; border-block: 1px solid var(--hairline); }
.services-intro p { margin: 0; color: var(--ink-2); }
.services-intro p:first-child { font-size: 1.45rem; letter-spacing: -.03em; line-height: 1.4; color: var(--ink); }
.service-directory-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 74px; align-items: start; }
.directory-intro { position: sticky; top: 35px; }
.directory-intro h2 { font-size: clamp(2.35rem, 3.2vw, 3rem); }
.directory-intro > p { color: var(--ink-2); }
.directory-controls { margin-block: 28px; }
.directory-controls label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 8px; }
.directory-controls input { width: 100%; background: var(--surface); color: var(--ink); padding: 13px 12px; border: 1px solid var(--hairline); font-size: .88rem; }
.directory-controls input::placeholder { color: var(--ink-2); }
.service-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px; }
.service-filters button { background: transparent; border: 1px solid var(--hairline); padding: 9px 12px; font-size: .82rem; min-height: 40px; border-radius: 6px; }
.service-filters button:hover { background: var(--mint); }
.service-filters button[aria-pressed="true"] { background: var(--seal); color: var(--paper); border-color: var(--seal); }
.service-group { border-top: 1px solid var(--hairline); scroll-margin-top: 35px; }
.service-group:last-of-type { border-bottom: 1px solid var(--hairline); }
.service-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 25px 0; }
.service-group summary::-webkit-details-marker { display: none; }
.service-title { display: block; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.18; letter-spacing: -.035em; }
.service-description { display: block; color: var(--ink-2); font-size: .93rem; margin-top: 8px; }
.service-expand { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--seal); }
.service-expand::before { content: '+'; font-size: 23px; font-weight: 400; }
.service-group[open] .service-expand::before { content: '−'; }
.service-group[open] .service-title { color: var(--seal); }
.service-deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 30px; padding: 8px 0 35px; }
.service-deliverables h3 { font-size: 1rem; letter-spacing: -.015em; line-height: 1.35; margin-bottom: 6px; }
.service-deliverables p { color: var(--ink-2); font-size: .88rem; line-height: 1.55; margin: 0; }
.service-empty { background: var(--mint); padding: 35px; border-radius: var(--radius); }
.service-scope { max-width: 83ch; margin: 35px 0 0 auto; }
.campaign-heading { margin-bottom: 35px; }
.campaign-heading .lede { margin: 0; }
.campaign-example { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: center; }
.campaign-example img { width: 100%; aspect-ratio: 1.1; object-fit: cover; object-position: 65% center; border-radius: var(--radius); }
.campaign-delivery { list-style: none; margin: 0; padding: 0; display: grid; gap: 29px; }
.campaign-delivery li { display: grid; grid-template-columns: 35px 1fr; gap: 15px; }
.campaign-delivery li > span { font-family: var(--font-mono); font-size: .75rem; color: var(--seal); padding-top: 5px; }
.campaign-delivery h3 { font-size: 1.5rem; margin-bottom: 8px; }
.campaign-delivery p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.service-stories { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
.service-story { border-radius: var(--radius); overflow: hidden; background: var(--mint); }
.service-story h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.story-voice img { width: 100%; aspect-ratio: 1.75; object-fit: cover; }
.story-voice > div { padding: 32px; }
.service-story p { color: var(--ink-2); }
.story-calendar { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.content-rhythm { list-style: none; padding: 0; margin: 30px 0 20px; display: grid; gap: 12px; }
.content-rhythm li { display: grid; grid-template-columns: 40px 1fr; gap: 0 15px; background: var(--surface); border-radius: 8px; padding: 15px; }
.content-rhythm li > span:first-child { font-family: var(--font-mono); font-size: .7rem; color: var(--seal); grid-row: span 2; padding-top: 3px; }
.content-rhythm strong { font-weight: 600; font-size: .95rem; }
.content-rhythm li > span:last-child { font-size: .8rem; color: var(--ink-2); }
.story-calendar > .note { margin-bottom: 0; }
.services-faq { display: grid; grid-template-columns: 1fr 1.5fr; align-items: start; gap: 60px; }
.services-faq .faq-list p { color: var(--ink-2); }
.services-contact { padding: 50px; background: var(--mint); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.services-contact h2 { margin-bottom: 16px; }
.services-contact p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.services-contact .cta { flex-shrink: 0; }
.home-services-heading { max-width: 660px; margin-bottom: 34px; }
.home-services-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 54px; }
.home-service-feature { color: var(--ink); text-decoration: none; border-radius: var(--radius); overflow: hidden; background: var(--mint); }
.home-service-feature img { width: 100%; aspect-ratio: 1.8; object-fit: cover; object-position: 65% center; }
.home-service-feature > div { padding: 25px 30px; }
.home-service-feature h3 { margin-bottom: 12px; }
.home-service-feature p { color: var(--ink-2); margin-bottom: 10px; }
.home-service-feature .text-link { color: var(--seal); }
.home-services-links { display: grid; }
.home-services-links > a { position: relative; padding: 22px 35px 22px 0; border-top: 1px solid var(--hairline); text-decoration: none; }
.home-services-links > a:last-child { border-bottom: 1px solid var(--hairline); }
.home-services-links > a > span:first-child { font-size: 1.7rem; font-weight: 600; color: var(--ink); letter-spacing: -.04em; }
.home-services-links > a > span:last-child { position: absolute; right: 8px; top: 24px; font-size: 1.4rem; }
.home-services-links p { color: var(--ink-2); margin: 4px 0 0; }
.home-services-links > a:hover > span:first-child, .home-service-feature:hover h3 { color: var(--seal); }
.home-services-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.home-services-bottom .note { margin: 0; }
@media (min-width: 761px) and (max-width: 1100px) {
  .masthead nav { gap: 13px; }
  .masthead nav > a:not(.cta) { font-size: .77rem; }
  .masthead .cta-small { padding-inline: 13px; gap: 8px; }
  .masthead { gap: 14px; }
  .service-directory-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 35px; }
  .services-hero { gap: 28px; }
  .services-hero h1 { font-size: 4.8vw; }
  .service-stories { gap: 20px; }
  .story-calendar { padding: 28px; }
}
@media (max-width: 760px) {
  .services-hero { grid-template-columns: 1fr; gap: 30px; padding-block: 38px 40px; }
  .services-hero h1 { font-size: clamp(2.8rem, 10vw, 4.1rem); }
  .services-hero-art img { aspect-ratio: 1.5; }
  .services-intro { grid-template-columns: 1fr; gap: 18px; padding-block: 28px; }
  .service-directory-layout { grid-template-columns: 1fr; gap: 20px; }
  .directory-intro { position: static; }
  .directory-intro h2 br { display: none; }
  .directory-controls { margin-block: 22px; }
  .service-filters { gap: 7px; }
  .service-filters button { padding-inline: 11px; }
  .service-deliverables { gap: 22px; }
  .service-group summary { padding-block: 22px; gap: 13px; }
  .service-description { font-size: .86rem; }
  .service-scope { margin-top: 25px; }
  .campaign-example { grid-template-columns: 1fr; gap: 32px; }
  .campaign-example img { aspect-ratio: 1.4; }
  .service-stories, .services-faq { grid-template-columns: 1fr; gap: 28px; }
  .story-calendar, .story-voice > div { padding: 26px; }
  .services-contact { display: grid; padding: 28px; gap: 25px; }
  .services-contact .cta { justify-self: start; }
  .home-services-grid { grid-template-columns: 1fr; gap: 30px; }
  .home-services-links > a { padding-block: 19px; }
  .home-services-bottom { align-items: start; flex-direction: column; gap: 8px; }
  .home-service-feature > div { padding: 24px; }
}
@media (max-width: 420px) {
  .service-deliverables { grid-template-columns: 1fr; }
}

/* Plain-language overviews: always visible, with no filtering or disclosure. */
.plain-services > .lede {
  max-width: 58ch;
  margin-bottom: 36px;
}
.plain-service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 42px;
  margin: 0;
}
.plain-service-list dt {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 7px;
}
.plain-service-list dt a {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
}
.plain-service-list dt a:hover {
  text-decoration-color: currentColor;
}
.plain-service-list dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 35ch;
}
.plain-service-example {
  margin-top: 42px;
  padding: 30px 34px;
  background: var(--mint);
  border-radius: var(--radius);
}
.plain-service-example h3 {
  margin-bottom: 16px;
}
.plain-service-example p {
  max-width: 72ch;
  margin-bottom: 12px;
}
.plain-service-example p + p {
  color: var(--ink-2);
}
.plain-services-home {
  padding-block: 64px;
}
.plain-services-home > .text-link {
  margin-top: 30px;
}
@media (min-width: 761px) and (max-width: 1050px) {
  .plain-service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .plain-service-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .plain-service-list dd {
    max-width: none;
  }
  .plain-service-example {
    padding: 24px;
  }
  .plain-services-home {
    padding-block: 48px;
  }
}