:root {
  --page-pad: var(--spacing-40);
  --gap: var(--spacing-40);
  --aside: var(--layout-aside);
  --container: var(--layout-container);
  --prose: var(--layout-prose);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--content);
  font: var(--font-weight-base) var(--font-size-sm)/var(--line-height-sm) var(--font-family-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--content-brand); color: var(--bg-canvas); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: var(--font-weight-heading); font-family: var(--font-family-heading); letter-spacing: -0.01em; }
.link { color: var(--content-brand); transition: opacity .15s ease; }
.link:hover { opacity: .75; }
a:focus-visible {
  outline: 2px solid var(--content-brand);
  outline-offset: 3px;
  border-radius: var(--shape-surface-md);
}
.text-2 { color: var(--content-secondary); }
.text-2 p + p { margin-top: var(--spacing-20); }
.list { margin: 0; padding: 0; list-style: none; border-bottom: var(--border-width) solid var(--border); }
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-12);
  padding: var(--spacing-8) 0;
  border-top: var(--border-width) solid var(--border);
}
.row > :first-child { color: var(--content-secondary); }
.row > :last-child { text-align: right; white-space: nowrap; }
.shot {
  margin: 0;
  border-radius: var(--shape-surface-md);
  overflow: hidden;
  background: rgba(251, 250, 249, 0.04);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot video { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot.device { position: relative; background: none; }
.shot.device .bezel { position: absolute; inset: 0; pointer-events: none; }
.shot.device video { position: absolute; left: 36.9792%; top: 10.1074%; width: 26.1111%; height: 79.7852%; border-radius: 11.97% / 5.51%; }
.shot.beach { position: relative; aspect-ratio: 2880 / 2048; }
.shot.beach video { position: absolute; left: 39.1667%; top: 16.8181%; width: 21.7083%; height: 66.3346%; border-radius: 11.97% / 5.51%; }
.divider { width: 100%; height: 0; margin: 0; border: 0; border-top: var(--border-width) solid var(--border); }
.page {
  display: grid;
  grid-template-columns: var(--aside) minmax(0, 1fr);
  gap: var(--gap);
  max-width: calc(var(--container) + 2 * var(--page-pad));
  margin: 0 auto;
  padding: var(--page-pad);
}
.aside { display: flex; flex-direction: column; gap: var(--layout-aside-gap); }
.logo { display: block; width: 95px; height: 20px; color: var(--content); }
.logo svg { display: block; width: 100%; height: 100%; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-16); align-self: stretch; }
.info { display: flex; flex-direction: column; gap: var(--spacing-32); }
.block h2 { margin-bottom: var(--spacing-16); font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
.logos {
  overflow: hidden;
  color: var(--content-tertiary);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--spacing-32), #000 calc(100% - var(--spacing-32)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--spacing-32), #000 calc(100% - var(--spacing-32)), transparent);
}
.logos-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.logos:hover .logos-track { animation-play-state: paused; }
.logos-set { display: flex; align-items: center; gap: var(--spacing-24); margin: 0; padding: 0 var(--spacing-24) 0 0; list-style: none; }
.logos-set svg { display: block; height: 24px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.cases {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}
.case { display: flex; flex-direction: column; gap: var(--spacing-16); }
.case .shot { aspect-ratio: 2880 / 2048; }
.case-text { display: flex; align-items: flex-start; gap: var(--spacing-16); }
.case-icon { flex: none; width: var(--spacing-32); height: var(--spacing-32); border-radius: var(--shape-surface-md); }
.case-text > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-8); }
.tags { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: 0; padding: 0; list-style: none; }
.tags li { padding: var(--spacing-4) var(--spacing-8); border: var(--border-width) solid var(--border); border-radius: var(--shape-surface-md); color: var(--content-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.case-open { flex: none; line-height: var(--line-height-heading); }
.case:hover .case-open { opacity: .75; }
.case-text h2 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); transition: color .15s ease; }
.case:hover h2 { color: var(--content-brand); }
.shot { position: relative; }
.proof { position: absolute; top: var(--spacing-24); left: var(--spacing-24); z-index: 1; display: flex; align-items: center; gap: var(--spacing-6); margin: 0; white-space: nowrap; color: var(--content-inverse-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.proof-num { font: var(--font-weight-heading) var(--font-size-heading-sm)/var(--line-height-heading-sm) var(--font-family-heading); letter-spacing: -0.01em; color: var(--content-inverse); }
.laurel { width: 10px; height: 20px; fill: currentColor; flex: none; align-self: center; }
.laurel.flip { transform: scaleX(-1); }
.proofs { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-24); margin: 0; padding: 0; list-style: none; }
.proofs .proof { position: static; color: var(--content-secondary); }
.proofs .proof-num { color: var(--content); }
@media (max-width: 679px) { .case-text { flex-wrap: wrap; } }
.case:focus-visible { outline-offset: var(--spacing-6); border-radius: calc(var(--shape-surface-md) + var(--spacing-4)); }
@media (min-width: 1024px) {
  .aside {
    gap: var(--spacing-64);
    justify-content: space-between;
    min-height: calc(100vh - 2 * var(--page-pad));
    min-height: calc(100dvh - 2 * var(--page-pad));
  }
}
@media (min-width: 1024px) and (min-height: 760px) {
  .aside { position: sticky; top: var(--page-pad); align-self: start; }
}
@media (max-width: 1199px) {
  :root { --aside: 288px; --page-pad: var(--spacing-32); --gap: var(--spacing-32); }
}
@media (max-width: 1023px) {
  :root { --page-pad: var(--spacing-32); }
  .page { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-64); }
  .aside { gap: var(--spacing-56); }
  .info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--spacing-40);
    row-gap: var(--spacing-32);
  }
  .info .block:first-child { grid-row: span 2; }
}
@media (max-width: 679px) {
  :root { --page-pad: var(--spacing-20); }
  .page { gap: var(--spacing-48); padding-top: var(--spacing-24); }
  .aside { gap: var(--spacing-40); }
  .info { display: flex; flex-direction: column; gap: var(--spacing-32); }
}
.study {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-64);
  max-width: var(--layout-article);
  margin: 0 auto;
  padding: var(--page-pad);
  box-sizing: content-box;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}
.study > * { width: 100%; }
.study .shot { aspect-ratio: 4 / 3; }
.study .shot.device, .study .shot.beach { aspect-ratio: 2880 / 2048; }
.shot.window { aspect-ratio: 1800 / 1280; position: relative; background: none; }
.shot.scene { position: relative; }
.shot.scene video { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); object-position: top; border-radius: 0.75% / 1.13%; }
.shot.window video { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 1.1111% / 1.5625%; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); }
.steps { display: flex; flex-direction: column; gap: var(--spacing-8); margin: 0; padding-left: var(--spacing-24); }
.prose { max-width: var(--prose); display: flex; flex-direction: column; gap: var(--spacing-32); }
.prose section, .intro { display: flex; flex-direction: column; gap: var(--spacing-16); }
.intro { align-items: flex-start; }
.intro h1 { font-size: var(--font-size-heading-lg); line-height: var(--line-height-heading-lg); }
.prose h2 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
.stats { display: flex; gap: var(--spacing-32); margin: 0; }
.stats > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-8); }
.stats dt { color: var(--content-secondary); }
.stats dd { margin: 0; font: var(--font-weight-heading) var(--font-size-heading-lg)/var(--line-height-heading-lg) var(--font-family-heading); letter-spacing: -0.01em; white-space: nowrap; }
.metrics { width: 100%; border-collapse: collapse; border-bottom: var(--border-width) solid var(--border); }
.metrics th, .metrics td { padding: var(--spacing-8) 0; border-top: var(--border-width) solid var(--border); text-align: left; vertical-align: top; font-weight: var(--font-weight-base); }
.metrics th, .metrics td:not(:last-child) { color: var(--content-secondary); }
.metrics th:first-child, .metrics td:first-child { width: 175px; padding-right: var(--spacing-12); }
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: .25s ease both vt-out; }
::view-transition-new(root) { animation: .45s cubic-bezier(.2, .7, .2, 1) .08s both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(case-proxy), ::view-transition-new(case-proxy),
::view-transition-old(case-buzz), ::view-transition-new(case-buzz) {
  height: 100%;
  object-fit: cover;
  overflow: clip;
}
::view-transition-group(case-proxy), ::view-transition-group(case-buzz) { border-radius: var(--shape-surface-md); overflow: clip; }
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 679px) {
  .study { gap: var(--spacing-48); padding-top: var(--spacing-24); }
  .stats { gap: var(--spacing-16); }
  .stats dd { font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
  .metrics th:first-child, .metrics td:first-child { width: 48%; }
}
.gallery { display: flex; flex-direction: column; gap: var(--spacing-16); }
.gallery h2 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
.gallery-grid { display: grid; gap: var(--spacing-24); margin: 0; padding: 0; list-style: none; }
.tile {
  display: block; width: 100%; aspect-ratio: 2880 / 2048; padding: 0; border: 0; cursor: zoom-in;
  background: var(--bg-surface); border-radius: var(--shape-surface-md); overflow: hidden;
}
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile:focus-visible { outline-offset: var(--spacing-4); }
.lightbox {
  width: min(90vw, calc(90vh * 2880 / 2048)); aspect-ratio: 2880 / 2048; max-width: none; max-height: none; padding: 0; border: 0;
  background: var(--bg-surface); border-radius: var(--shape-surface-md); overflow: hidden; cursor: zoom-out;
}
.lightbox img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lightbox::backdrop { background: rgb(17 16 15 / 0.9); }