html{scroll-behavior:smooth}
[id]{scroll-margin-top:24px}
button{font:inherit;cursor:pointer}
header a,.motion-control,.theme-control,.gallery-meta button{background:#faf7ecbd;color:#232622;border:0;border-radius:999px;padding:9px 13px;text-decoration:none;font-size:13px}
header .active{background:#303132;color:white}
.intro a{text-decoration:none}
.project-hit{position:absolute;inset:0;width:100%;border:0;background:none;color:inherit;text-align:left;padding:0}
.project-hit:focus-visible{outline:3px solid white;outline-offset:-5px;border-radius:inherit}
.project-hit img,.project-hit video{display:block;width:100%;height:100%;object-fit:cover}
.project-hit video{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.project-hit video.playing{opacity:1}
.project-hit .project-caption{position:absolute;left:8px;bottom:8px;background:#faf7ecc4;color:#232622;backdrop-filter:blur(16px);border-radius:14px;padding:7px 12px;font-size:13px}
.project-hit strong,.project-hit small{display:block}
.project-hit strong{font-size:23px;font-weight:400}
[data-reveal]{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.3,1);transition-delay:var(--delay,0ms)}
.motion-ready [data-reveal]:not(.visible){opacity:0;transform:translateY(18px)}
#project-dialog{font-family:inherit;width:min(940px,calc(100% - 32px));max-height:90dvh;padding:24px;border:0;border-radius:20px;background:#f6f3eb;color:#232622}
#project-dialog::backdrop{background:#20221dd1;backdrop-filter:blur(8px)}
#project-dialog form{text-align:right}
#project-dialog button{border:0;border-radius:999px;padding:9px 16px}
#project-dialog h2{margin:12px 0 18px;font-size:clamp(32px,5vw,62px)}
#project-dialog video{width:100%;max-height:61dvh;background:#222;border-radius:12px}
.film-link{display:inline-block;margin-top:14px;color:inherit}
@media(max-width:600px){header{flex-wrap:wrap;height:auto;min-height:57px;padding-block:8px}header a,.motion-control,.theme-control{padding:6px;font-size:11px}.storyboard{--art-x:46%}}
.motion-off,.motion-off *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
.motion-off [data-reveal]{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready [data-reveal]{opacity:1!important;transform:none!important}}

/* Landscape spotlight. The gutter exposes the neighbouring projects. */
.gallery {
  --slide-width: 64%;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  padding: 26.4px calc((100% - var(--slide-width)) / 2);
  margin: 24px 0 0;
  aspect-ratio: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - var(--slide-width)) / 2);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  user-select: none;
  cursor: grab;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.dragging { scroll-snap-type: none; cursor: grabbing; }
.gallery.dragging button { cursor: grabbing; }
.gallery .tile:nth-child(n) {
  display: block;
  flex: 0 0 100%;
  aspect-ratio: 40 / 27;
  height: auto;
  min-height: 0;
  border-radius: 15px;
  scroll-snap-align: center;
  transform: none;
  outline: none;
}
.gallery .project-hit {
  border-radius: inherit;
  overflow: hidden;
  transform: perspective(1000px);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s ease;
}
.gallery [data-position=before] .project-hit {
  transform: perspective(1000px) rotateY(19deg) scale(.97);
  transform-origin: right center;
  opacity: .78;
}
.gallery [data-position=after] .project-hit {
  transform: perspective(1000px) rotateY(-19deg) scale(.97);
  transform-origin: left center;
  opacity: .78;
}
.gallery .project-caption {
  display: grid;
  gap: 4px;
  left: clamp(9px,1.5vw,20px);
  bottom: clamp(9px,1.5vw,20px);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  background: #f4f0e3dc;
}
.gallery .project-caption small { font: 10px monospace; letter-spacing: .08em; }
.gallery .project-caption strong { font-size: clamp(18px,2.3vw,33px); line-height: 1; }
.gallery .project-summary { font-size: 14px; margin-block: 2px 4px; }
.gallery .tile:not([data-position=current]) :is(.project-summary,.project-caption small) { display: none; }
.project-detail { max-width: 68ch; }
.project-detail p { margin-block: 10px; font-size: 15px; line-height: 1.5; }
.project-detail .project-description { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.case-story { margin-top: 12px; }
.case-story summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.case-story h3 { margin: 14px 0 0; font-size: 17px; }
.case-story .case-category { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
@media(max-width:650px) {
  .gallery { --slide-width: 88%; padding-block: 14.4px; }
  .gallery .project-caption { padding: 6px 9px; }
  .gallery .project-summary { font-size: 12px; }
}

.process-grid .raised-mark {
  inset: auto 4% 0 auto;
  width: clamp(54px, 24%, 91.5px);
  aspect-ratio: 1;
  opacity: .42;
  transform: rotate(-12deg);
}
.process-grid article { padding-bottom: 78px; }
.process-grid article.visible .raised-mark {
  animation: mark-settle 1.1s ease-out both;
  animation-delay: var(--delay);
}
@keyframes mark-settle {
  from { opacity: 0; transform: translateY(14px) rotate(-27deg) scale(.88); }
}
.story-intro { box-shadow: none; }
.pricing article {
  box-shadow: none;
  position: relative;
  isolation: isolate;
  --symbol-light: #c9c9b8;
  --symbol-dark: #75796a;
}
.pricing article:nth-child(2), .process-grid article:nth-child(4) { --symbol-light:#c0cdc0; --symbol-dark:#647b68; }
.pricing article:nth-child(3) { --symbol-light:#dfca8f; --symbol-dark:#967840; }
.pricing article:nth-child(4) { --symbol-light:#cfad94; --symbol-dark:#865c4e; }
.pricing .raised-mark, .plai-packages .raised-mark {
  inset: 11px 12px auto auto;
  width: 57px;
  aspect-ratio: 1;
  opacity: .65;
  filter: none;
}
.pricing article > small { max-width: calc(100% - 40px); box-shadow: none; }

.title-tint {
  --tint-a: #415441;
  --tint-b: #657b5b;
  --tint-c: #756456;
  background-image: linear-gradient(100deg,var(--tint-a),var(--tint-b),var(--tint-c),var(--tint-a));
  background-size: 210% 100%;
  animation: tint-drift 14s ease-in-out infinite alternate;
}
.contact .title-tint { background-image: linear-gradient(100deg,#fffdf3,#b9c6ab,#e4d4ba,#fffdf3); }
@keyframes tint-drift { to { background-position: 100% 50%; } }

html[data-theme=dark] {
  color-scheme: dark;
  --graphite: #f0ede5;
  --dark-glass: #343a33db;
  --dark-control: #484e44d9;
  --dark-rule: #62695e;
}
[data-theme=dark] body { background: radial-gradient(ellipse at 80% 55%,#30392e,transparent 44%),#222521; color: var(--graphite); }
[data-theme=dark] .hero { background: radial-gradient(ellipse at 80% 0%,#414e3d,transparent 58%),#232722; }
[data-theme=dark] .plai-chapter { background: linear-gradient(150deg,#282f27,#2e2925); }
[data-theme=dark] .social { background: #292f29; }
[data-theme=dark] .contact { background: #1d201d; }
[data-theme=dark] :is(.section,footer,.questions details,.pricing details,.pricing article>a,.three>* ) { border-color: var(--dark-rule); }
[data-theme=dark] :is(header span,header a,.theme-control,.motion-control,.gallery-meta button,.project-caption,.story-intro,.matched article p,.matched .tile-end,.plai-package-grid article>small,.pricing article>small,.questions details,.gallery-meta span) {
  background: var(--dark-control);
  color: var(--graphite);
}
[data-theme=dark] :is(header .active,.pill,.story-intro .story-link) { background:#d3dfca; color:#21271f; }
[data-theme=dark] :is(.process-grid article,.pricing article,.voices figure,.plaiground-demo,.plai-package-grid article,.matched article,.feed-grid article,.campaign .campaign-copy,#project-dialog) {
  background: var(--dark-glass);
  color: var(--graphite);
}
[data-theme=dark] :is(.plai-package-grid:not(.process-grid) article,.pricing article):nth-child(2) { background:#344037d9; }
[data-theme=dark] :is(.plai-package-grid:not(.process-grid) article,.pricing article):nth-child(3) { background:#46412ed9; }
[data-theme=dark] :is(.plai-package-grid:not(.process-grid) article:first-child,.pricing article:nth-child(4)) { background:#453831d9; }
[data-theme=dark] :is(.campaign small,.terms,.feed-grid small) { color:var(--graphite); }
[data-theme=dark] .title-tint { --tint-a:#c5d6ba; --tint-b:#a7c199; --tint-c:#e0c4ae; }
[data-theme=dark] .project-hit .project-caption { background: #343a33e6; color: var(--graphite); }
[data-theme=dark] .matched article:nth-child(n) h3.lockup span,
[data-theme=dark] .story-intro h2 span { color:#232622; }

header .header-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.075em;
}
.header-brand img { width: 18px; height: 18px; object-fit: contain; }
[data-theme=dark] .header-brand img { filter: brightness(0) invert(.9); }
.project-crop :is(img,video) { scale: 1.045; }
.project-crop { overflow: hidden; border-radius: inherit; }

.gallery { --slide-width: 55%; }
.gallery .tile:nth-child(n) { overflow: visible; }
.gallery .tile:nth-child(n) .project-hit {
  transform: perspective(560px) rotateY(var(--tilt,0deg)) scaleY(var(--edge-rise,1));
  transform-origin: center;
  opacity: var(--edge-opacity,1);
  transition: none;
}
.gallery .tile[data-position=before] .project-hit { transform-origin: right center; }
.gallery .tile[data-position=after] .project-hit { transform-origin: left center; }
.motion-off .gallery .tile .project-hit { transform: none; }
@media(max-width:650px) { .gallery { --slide-width: 87%; } }

.process-grid article:nth-child(n) {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(16px,2vw,27px);
  min-height: 360px;
  background: #e9e4d8;
}
.process-grid article:nth-child(2) { background: #d1dbcc; }
.process-grid article:nth-child(3) { background: #e4ddcc; }
.process-grid article:nth-child(4) { background: #dce0d8; }
.process-grid article::before { display: none; }
.process-grid article .process-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: #f8f5ebad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.process-brand img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(1px 2px 1px #514d4560); }
.process-grid article .process-index { padding: 4px 8px; margin-top: 5px; background: #f8f5ebad; font: 10px monospace; }
.process-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: .78;
}
.process-grid h3.lockup {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
  font-size: clamp(26px,3.35vw,49px);
  letter-spacing: -.075em;
  line-height: .99;
  margin: 20px 0 24px;
}
.process-grid .lockup span {
  --chip: #f8f4e7a8;
  display: block;
  position: relative;
  padding: .16em .36em .22em;
  border-radius: 999px;
  background: var(--chip);
  backdrop-filter: blur(8px) saturate(115%);
  font-size: inherit;
}
.process-grid .lockup span + span { margin: -.08em 0 0 .38em; }
.process-grid article:nth-child(2) .lockup span { --chip: #e2ebdcb0; }
.process-grid article p {
  margin: auto 0 0;
  padding: 11px 13px;
  max-width: 35ch;
  border-radius: 13px;
  background: #f8f5ebae;
  backdrop-filter: blur(12px);
  font-size: 15px;
  line-height: 1.45;
}
[data-theme=dark] .process-grid article:nth-child(n) { background: #343a33; }
[data-theme=dark] .process-grid article :is(.process-brand,.process-index) { background: #252d25cf; }
[data-theme=dark] .process-grid .process-brand img { filter: brightness(0) invert(.9); }
[data-theme=dark] .process-grid .lockup span { --chip: #252d25c7; color: #f0ede5; }
[data-theme=dark] .process-grid article p { background: #292f29c9; }
@media(max-width:850px) { .process-grid h3.lockup { font-size: clamp(33px,6vw,49px); } }
@media(max-width:500px) { .process-grid article:nth-child(n) { min-height: 310px; } }

.storyboard { position: relative; isolation: isolate; overflow: hidden; background: #ece7df; }
.story-motion,.demo-motion { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.plaiground-demo:has(.demo-motion)::before { display: none; }
.demo-motion {
  inset: -8% 0 -8% auto;
  width: 61%;
  height: 116%;
  filter: blur(7px);
  opacity: .47;
  mask-image: linear-gradient(90deg,transparent,#000 38%);
}
.story-motion { width: 100%; height: 100%; }
.assembly-art .art-composition {
  transform-box: view-box;
  transform-origin: center;
  transform: scale(1.035);
  animation: artwork-drift 18s ease-in-out infinite;
  animation-play-state: paused;
}
.assembly-art .art-piece {
  transform-box: view-box;
  animation: artwork-assemble 18s ease-in-out infinite;
  animation-play-state: paused;
}
.assembly-art.art-in-view :is(.art-composition,.art-piece) { animation-play-state: running; }
.feed-grid article:first-child svg > :is(image,.art-composition) {
  transform-box: view-box;
  transform-origin: center;
  rotate: 180deg;
}
.feed-grid article:nth-child(2) .art-composition,
.feed-grid article:nth-child(4) .art-composition { animation-direction: reverse; }
@keyframes artwork-drift {
  0%,100% { transform: translate(-.7%,.3%) scale(1.055); }
  50% { transform: translate(.9%,-.7%) scale(1.075); }
}
@keyframes artwork-assemble {
  0%,100% { transform: translate(var(--piece-x),var(--piece-y)); }
  50% { transform: translate(0,0); }
}

.gallery-hint {
  flex: 1 1 auto;
  margin: 0 8px;
  text-align: right;
  font-size: 13px;
}
@media(max-width:600px) {
  .gallery-meta { flex-wrap: wrap; }
  .gallery-hint { order: 1; flex-basis: 100%; margin: 4px 0 0; text-align: left; }
}

[data-theme=dark] .matched article:nth-child(n) { background: #343a3399; }
[data-theme=dark] .matched article:nth-child(2) { background: #3e493c99; }

.gallery-entrance .tile { animation: gallery-peek 850ms ease-in-out; }
@keyframes gallery-peek {
  0%,100% { translate: 0; }
  52% { translate: clamp(-46px,-5vw,-24px) 0; }
}

.voices figure { position: relative; }
.voices figcaption { padding-right: 42px; }
.voices figure::after, .feed-grid article::after, .contact-mark {
  content: "";
  display: block;
  width: 34px;
  aspect-ratio: 1;
  background: linear-gradient(145deg,#f2f0df 10%,#b4b6a0 85%);
  mask: url(mineral-mark.png) center / contain no-repeat;
  pointer-events: none;
}
.voices figure::after { position: absolute; bottom: 16px; right: 16px; }
.feed-grid article::after { position: absolute; bottom: 38px; left: 14px; }
.contact-mark { width: 46px; margin-bottom: 12px; }

.plai-story-wrap {
  position: relative;
  isolation: isolate;
  background: #ece7df;
}
.plai-story-wrap .story-motion { left: -24px; width: calc(100% + 48px); }
.plai-story-wrap .storyboard { background: transparent; }
.plai-story-wrap .plai-section-heading { color: #252923; }
[data-theme=dark] .plai-story-wrap .plai-section-heading .title-tint {
  --tint-a: #415441;
  --tint-b: #657b5b;
  --tint-c: #756456;
}
@media(max-width:600px) {
  .plai-story-wrap .story-motion { left: -14px; width: calc(100% + 28px); }
}
.plai-packages .plai-package-grid article:nth-child(n) {
  min-height: 256px;
  padding-block: 25.6px;
  background: #eff0ed;
  color: #232622;
  --symbol-light: #c9c9b8;
  --symbol-dark: #75796a;
}
.plai-packages .plai-package-grid article > small { max-width: calc(100% - 48px); }
.plaiground-demo > .pill,
.campaign .campaign-copy > .pill,
.questions details > summary {
  background-image: linear-gradient(105deg, #f3efe1, #c3d4bf 43%, #e1c8b7 71%, #f3efe1);
  background-size: 250% 100%;
  color: #212820;
  animation: action-gradient 7s ease-in-out infinite alternate;
}
.questions details > summary {
  border-radius: 13px;
  margin-inline: -16px;
  padding-inline: 16px;
  background-image: linear-gradient(105deg, #eeeee5, #d4e0ce 45%, #e8d9ce 74%, #eeeee5);
}
.questions details:nth-of-type(even) > summary { animation-delay: -2s; }
[data-theme=dark] .questions details > summary {
  color: #f2f0e8;
  background-image: linear-gradient(105deg, #2d3530, #485445 45%, #4f413b 74%, #2d3530);
}
.project-enquiry > .pill {
  font-size: 14.3px;
  padding: 9.9px 14.3px;
}
@keyframes action-gradient {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.campaign-video { object-fit: cover; }

#campaign:has(.campaign-video) { background: url(ceramic-modules.png) center / cover no-repeat; }
#campaign .campaign-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  pointer-events: none;
}
.panel-video, .feed-video {
  position: absolute;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.panel-video {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.14);
  z-index: -1;
  mask-image: linear-gradient(90deg, #0002, #000 75%);
}
.panel-video.film-ready { opacity: .47; }
[data-theme=dark] .panel-video.film-ready { opacity: .25; }
.feed-video {
  right: 0;
  bottom: 36px;
  width: 68%;
  height: 63%;
  border-radius: 55% 0 0 0;
  z-index: -1;
  object-position: 25% center;
}
.feed-video.film-ready { opacity: 1; }
.feed-grid article:nth-child(2) .feed-video { object-position: 42% center; }
.feed-grid article:nth-child(3) .feed-video { object-position: 66% center; }
.feed-grid article:nth-child(4) .feed-video { object-position: 78% center; }
@media (prefers-reduced-motion: reduce) {
  .panel-video, .feed-video { transition: none; }
}

.process-video, .matched .outputs-video {
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
}
.process-video.film-ready { opacity: .9; }
.process-grid article:nth-child(1) .process-video { object-position: 24% center; }
.process-grid article:nth-child(2) .process-video { object-position: 42% center; }
.process-grid article:nth-child(3) .process-video { object-position: 61% center; }
.process-grid article:nth-child(4) .process-video { object-position: 77% center; }
.matched .outputs-video { object-position: 72% center; }
.matched .outputs-video.film-ready { opacity: .93; }
.matched article:has(.outputs-video) > :is(h3,p) { position: relative; z-index: 1; }