:root {
  color-scheme:dark;
  --header-h:84px;
  --bg:#0c0b0f;
  --bg-2:#111016;
  --surface:#16141b;
  --surface-2:#1d1a24;
  --line:#28242f;
  --line-strong:#3a3444;
  --text:#f4f1f7;
  --muted:#a29dab;
  --accent:#c9a6ff;
  --accent-deep:#8b5fe0;
  --warm:#e6b877;
  --radius:10px;
  --radius-sm:6px;
  --font:Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fine film grain keeps the dark surfaces from looking flat. */
body:before {
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.modal-open {
  overflow:hidden;
}

button,input,textarea {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  color:inherit;
  cursor:pointer;
  border:0;
}

a {
  color:inherit;
  text-decoration:none;
}

button:disabled {
  cursor:wait;
}

img {
  display:block;
  width:100%;
  height:auto;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  line-height:1.08;
  font-weight:500;
}

h1 em,h2 em {
  font-style:normal;
  color:var(--accent);
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--accent);
  color:var(--bg);
  padding:14px;
  z-index:101;
}

.skip-link:focus {
  top:10px;
}

/* Header */

.header {
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}

.header.is-scrolled {
  border-bottom-color:var(--line);
}

.header-inner {
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand {
  font-size:30px;
  font-weight:700;
  letter-spacing:-1.4px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  line-height:1;
}

.brand .brand-mark {
  width:48px;
  height:50px;
  flex-shrink:0;
  object-fit:contain;
}

/* Same look as the admin tabs: a capsule with the current section highlighted. */
.header nav {
  display:flex;
  gap:4px;
  font-size:14px;
  color:var(--muted);
  padding:4px;
  border:1px solid var(--line);
  border-radius:99px;
  background:#ffffff05;
}

.header nav a {
  padding:8px 16px;
  border-radius:99px;
  transition:background .2s,color .2s;
}

.header nav a[aria-current] {
  background:var(--surface-2);
  color:var(--text);
}

.header nav a:hover {
  background:#ffffff0d;
  color:var(--text);
}

/* The call to action and the social icons share one height so the row lines up. */
.header-cta {
  height:44px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:99px;
  padding:0 20px;
  font-size:14px;
  white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s;
}

.header-cta span {
  margin-left:10px;
  color:var(--accent);
}

.header-cta:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1024;
}

.header-cta:hover span {
  color:inherit;
}

.menu-toggle {
  display:none;
}

/* Hero */

.hero {
  min-height:min(calc(100svh - 84px),860px);
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:40px;
  position:relative;
}

/* Print-bed grid across the full width, fading towards the edges and the text. */
.hero:before {
  content:"";
  position:absolute;
  top:-84px;
  bottom:-60px;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background-image:
    linear-gradient(#ffffff10 1px,transparent 1px),
    linear-gradient(90deg,#ffffff10 1px,transparent 1px);
  background-size:56px 56px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 68% 45%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 70% at 68% 45%,#000 20%,transparent 75%);
  pointer-events:none;
}

/* Outlined wordmark across the bottom of the first screen, behind the figure. */
.hero-watermark {
  position:absolute;
  bottom:-60px;
  left:50%;
  transform:translateX(-50%);
  z-index:-1;
  font-size:clamp(90px,20vw,300px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px #c9a6ff38;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
}

.hero-copy {
  padding:56px 0;
  position:relative;
  z-index:2;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  line-height:1.6;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--accent);
}

.hero .eyebrow {
  display:inline-flex;
  color:#ddd4ea;
  padding:8px 16px 8px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:#ffffff06;
}


h1 {
  font-size:clamp(54px,6.2vw,96px);
  letter-spacing:-.045em;
  margin:30px 0 28px;
  line-height:1;
}


.hero-description {
  color:#bab4c4;
  max-width:440px;
  font-size:17px;
  line-height:1.7;
}

.hero-actions {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:38px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:56px;
  padding:15px 26px;
  font-size:15px;
  font-weight:600;
  border-radius:var(--radius-sm);
  transition:background .25s,transform .25s var(--ease),box-shadow .25s,border-color .25s;
}

.button span {
  font-size:20px;
  line-height:1;
  transition:transform .25s var(--ease);
}

.button:hover span {
  transform:translate(2px,-2px);
}

.button-primary {
  background:var(--accent);
  color:#1a1024;
}

.button-primary:hover {
  background:#dccaff;
}

.button-ghost {
  background:#ffffff06;
  border:1px solid var(--line-strong);
}

.button-ghost:hover {
  border-color:var(--accent);
  background:#c9a6ff12;
}

.button-ghost span {
  color:var(--accent);
}



.hero-art {
  height:min(94svh,940px);
  min-height:600px;
  margin-bottom:60px;
  position:relative;
  min-width:0;
}

/* Large cut-out figure that dissolves into the page towards the bottom. */
.hero-figure {
  position:absolute;
  top:5%;
  left:46%;
  width:auto;
  height:142%;
  max-width:none;
  transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 80%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 80%);
  pointer-events:none;
}

/* Sections */

.section {
  padding-block:120px;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:56px;
}

.section-heading .eyebrow:after,.studio-section>.eyebrow:after {
  content:"";
  width:48px;
  height:1px;
  background:currentColor;
  opacity:.5;
}

.section-heading .eyebrow {
  margin-bottom:22px;
}

h2 {
  font-size:clamp(34px,4.2vw,62px);
  letter-spacing:-.035em;
  line-height:1.05;
}

.section-description {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  padding-bottom:6px;
  text-align:right;
}

.micro {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}

/* Services */

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.service-card {
  --glow:#c9a6ff;
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  padding:34px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s;
}


.service-card:hover {
  border-color:var(--line-strong);
}


.service-card-featured {
  --glow:var(--warm);
}

.service-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  margin-bottom:46px;
  position:relative;
}

.service-num {
  font-size:13px;
  letter-spacing:.16em;
  color:var(--muted);
}

.service-top svg {
  width:48px;
  height:48px;
  padding:10px;
  border-radius:var(--radius-sm);
  background:#ffffff08;
  border:1px solid var(--line-strong);
  fill:none;
  stroke:var(--glow);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-card .micro {
  color:var(--glow);
  margin-bottom:12px;
}

.service-card h3 {
  font-size:26px;
  letter-spacing:-.02em;
  margin-bottom:16px;
}

.service-card>p:not(.micro) {
  font-size:15px;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:32px;
}

.card-link {
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:18px 0 0;
  background:none;
  border-top:1px solid var(--line);
  font-size:14px;
  text-align:left;
  transition:color .2s;
}

.card-link span {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  font-size:16px;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}

.card-link:hover span,.custom-tile:hover .card-link span {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1024;
  transform:rotate(45deg);
}

/* Before / after */

.transform-section {
  background:var(--bg-2);
  border-block:1px solid var(--line);
}

.transform-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.transform-copy h2 {
  margin:22px 0 24px;
}

.transform-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  max-width:460px;
}

.layers {
  list-style:none;
  counter-reset:layer;
  margin:36px 0 0;
  padding:0;
}

.layers li {
  counter-increment:layer;
  display:grid;
  grid-template-columns:44px 170px 1fr;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  color:var(--muted);
}

.layers li:before {
  content:counter(layer,decimal-leading-zero);
  font-size:12px;
  color:var(--accent);
  letter-spacing:.1em;
}

.layers li span {
  color:var(--text);
  font-size:15px;
}

.compare {
  position:relative;
  aspect-ratio:4/5;
  justify-self:center;
  width:min(100%,560px);
  border-radius:var(--radius);
  overflow:hidden;
  background:#18171b;
  border:1px solid var(--line-strong);
  box-shadow:0 40px 100px -40px #000;
  user-select:none;
}

.compare img {
  position:absolute;
  inset:0;
  height:100%;
  object-fit:cover;
}

/* Bases were shot from slightly different distances; the fade hides that. */
.compare:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:22%;
  z-index:1;
  background:linear-gradient(to top,#111016 10%,transparent);
  pointer-events:none;
}

.compare-before {
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}

.compare-label {
  position:absolute;
  top:18px;
  z-index:2;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:var(--radius-sm);
  background:#0c0b0fb3;
  border:1px solid #ffffff1f;
  backdrop-filter:blur(8px);
  pointer-events:none;
}

.compare-label-before {
  left:18px;
}

.compare-label-after {
  right:18px;
  color:var(--accent);
}

.compare-handle {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  width:2px;
  margin-left:-1px;
  background:#fff;
  z-index:2;
  pointer-events:none;
}

.compare-handle span {
  position:absolute;
  top:50%;
  left:50%;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  background:#fff;
  color:#1a1024;
  font-size:17px;
  font-weight:700;
  letter-spacing:2px;
  box-shadow:0 8px 30px #0008;
}

.compare-range {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:3;
}

.compare:has(.compare-range:focus-visible) {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

@media(max-width:1100px) {
  .layers li {
    grid-template-columns:40px 1fr;
    row-gap:2px;
  }
  .layers li:before {
    grid-row:span 2;
  }
}

/* Process */

.process-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  position:relative;
}

.process-grid:before {
  content:"";
  position:absolute;
  top:28px;
  left:28px;
  right:28px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),var(--warm),transparent);
  opacity:.5;
}

.step {
  position:relative;
  padding-right:12px;
}

.step-num {
  position:relative;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:var(--radius-sm);
  background:var(--bg);
  border:1px solid var(--line-strong);
  font-size:14px;
  color:var(--accent);
  margin-bottom:28px;
  transition:background .3s,color .3s,border-color .3s;
}

.step:hover .step-num {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1024;
}

.step h3 {
  font-size:22px;
  letter-spacing:-.02em;
  margin-bottom:12px;
}

.step p {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}

/* Works */

.works-section {
  background:var(--bg-2);
  border-block:1px solid var(--line);
}

.works-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}

.work-card {
  position:relative;
  flex:0 0 calc((100% - 40px) / 3);
  aspect-ratio:4/5;
  padding:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:#18171b;
  border:1px solid var(--line);
  text-align:left;
  cursor:zoom-in;
}

/* Framing comes from the admin: --x/--y focus point and --zoom. */
.cover {
  height:100%;
  object-fit:cover;
  object-position:var(--x,50%) var(--y,50%);
  transform:scale(var(--zoom,1));
  transform-origin:var(--x,50%) var(--y,50%);
  transition:transform .9s var(--ease);
}

.work-card:hover .cover,.product-image:hover .cover {
  transform:scale(calc(var(--zoom,1) * 1.05));
}

.work-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,#0c0b0f 2%,#0c0b0fb3 22%,transparent 50%);
  pointer-events:none;
}

.work-tag,.product-label {
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  font-size:12px;
  letter-spacing:.06em;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  background:#0c0b0fa6;
  border:1px solid #ffffff1f;
  backdrop-filter:blur(8px);
}

.work-caption {
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:2;
}

.work-caption strong {
  display:block;
  font-size:24px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
}

.photo-count {
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  font-size:12px;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  background:#0c0b0fa6;
  border:1px solid #ffffff1f;
  backdrop-filter:blur(8px);
}

.empty-note {
  grid-column:1/-1;
  padding:48px 24px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  color:var(--muted);
  text-align:center;
}

.work-caption small {
  display:block;
  margin-top:6px;
  font-size:14px;
  color:#cfc8d8;
}

/* Catalog */

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.product-card {
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease);
}

.product-card:hover {
  border-color:var(--line-strong);
}

.product-image {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/4.4;
  padding:0;
  overflow:hidden;
  background:#18171b;
  cursor:zoom-in;
}


.product-label {
  color:var(--accent);
}

.product-info {
  display:flex;
  flex-direction:column;
  flex:1;
  padding:22px 24px 24px;
}

.product-info .micro {
  margin-bottom:8px;
}

.product-info h3 {
  font-size:24px;
  letter-spacing:-.02em;
}

.product-info>p:not(.micro) {
  margin:6px 0 20px;
  font-size:14px;
  color:var(--muted);
}

/* Short description on catalog cards: brighter than secondary text, at most two lines. */
.product-info>p.product-summary {
  font-size:15px;
  line-height:1.5;
  color:#d6cfdf;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

.product-info>p.title-en {
  margin:2px 0 0;
  font-size:15px;
  color:var(--muted);
}

.product-info>p.title-en+p {
  margin-top:10px;
}

.product-bottom {
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.product-bottom>span {
  font-size:14px;
  color:#ddd6e6;
}

.small-button {
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:10px 18px;
  font-size:14px;
  white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}

.small-button:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1024;
}

.custom-tile {
  width:100%;
  margin-top:20px;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:transparent;
  padding:28px 32px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px 32px;
  text-align:left;
  transition:border-color .3s,background-color .3s;
}

.custom-tile:hover {
  border-color:var(--accent);
  background-color:#c9a6ff0a;
}

.custom-title {
  font-size:24px;
  letter-spacing:-.02em;
}

.custom-text {
  font-size:15px;
  color:var(--muted);
}

.custom-tile .card-link {
  margin:0;
  padding:0;
  border:0;
  width:auto;
  gap:14px;
}


/* Studio */

.studio-section {
  padding-block:130px;
}

.studio-content {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  margin-top:30px;
  align-items:start;
}

.studio-content h2 {
  font-size:clamp(40px,5vw,72px);
}

.studio-text p {
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}

.studio-text p+p {
  margin-top:16px;
}

.studio-points {
  list-style:none;
  margin:32px 0 0;
  padding:0;
}

.studio-points li {
  display:flex;
  gap:14px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:15px;
}

.studio-points b {
  color:var(--warm);
  font-weight:400;
}

/* Contact */

.contact-section {
  padding-bottom:40px;
}

.contact-card {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm);
  padding:72px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  background:linear-gradient(135deg,#1f1a28,#15131a);
  border:1px solid var(--line-strong);
}


.contact-copy {
  position:relative;
}

.contact-copy .eyebrow {
  color:#e2d4f7;
}

.contact-copy h2 {
  font-size:clamp(44px,5.6vw,84px);
  margin:24px 0;
}

.contact-copy h2 em {
  color:var(--text);
}

.contact-copy>p:last-child {
  font-size:16px;
  color:#cbc1d8;
}

.contact-button {
  position:relative;
  flex-shrink:0;
}

.social-links {
  padding-block:34px 10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 20px;
}

.social-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 26px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  font-size:20px;
  cursor:pointer;
  transition:border-color .25s,background .25s;
}

.social-link:hover {
  border-color:var(--accent);
  background:var(--surface-2);
}

.social-links>p {
  grid-column:1/-1;
  color:var(--muted);
  font-size:12px;
  min-height:20px;
}

/* Footer */

.footer {
  padding-block:36px;
  display:flex;
  align-items:center;
  gap:38px;
  flex-wrap:wrap;
}

.footer .brand {
  font-size:27px;
}

.footer p,.footer>a:not(.brand),.copyright {
  font-size:13px;
  color:var(--muted);
}

.footer>a:not(.brand):hover {
  color:var(--accent);
}

.footer p {
  margin-right:auto;
}

.copyright {
  width:100%;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* Dialogs */

dialog {
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:0;
  background:var(--surface);
  max-width:calc(100% - 32px);
  max-height:calc(100dvh - 40px);
  width:900px;
  box-shadow:0 40px 120px #000a,0 0 0 1px #c9a6ff14;
}

dialog[open] {
  animation:dialog-in .35s var(--ease);
}

@keyframes dialog-in {
  from { opacity:0; transform:translateY(16px) scale(.98); }
}

dialog::backdrop {
  background:#07060acc;
  backdrop-filter:blur(8px);
}

.dialog-close {
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:#0c0b0fcc;
  border:1px solid #ffffff2b;
  font-size:26px;
  line-height:1;
  transition:background .2s,transform .3s var(--ease);
}

.dialog-close:hover {
  background:var(--accent);
  color:#1a1024;
  transform:rotate(90deg);
}




.gallery-nav {
  position:absolute;
  top:50%;
  width:44px;
  height:44px;
  margin-top:-22px;
  border-radius:var(--radius-sm);
  background:#0c0b0fcc;
  border:1px solid #ffffff2b;
  font-size:26px;
  line-height:1;
}

.gallery-nav:hover {
  background:var(--accent);
  color:#1a1024;
}

.gallery-prev {
  left:14px;
}

.gallery-next {
  right:14px;
}













.order-content {
  padding:52px;
}

.order-content h2 {
  font-size:40px;
  margin:18px 0 12px;
}

.order-intro {
  font-size:15px;
  color:var(--muted);
  margin-bottom:24px;
}

#order-dialog {
  width:620px;
}

label {
  display:block;
  font-size:14px;
  margin:20px 0 8px;
  color:#ddd6e6;
}

input,textarea {
  display:block;
  width:100%;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:14px 16px;
  font-size:16px;
  transition:border-color .2s,box-shadow .2s;
}

input:focus,textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 4px #c9a6ff22;
}

input:focus-visible,textarea:focus-visible {
  outline:none;
}

textarea {
  resize:vertical;
  min-height:120px;
}

input::placeholder,textarea::placeholder {
  color:#7f798a;
}


.form-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:24px;
  flex-wrap:wrap;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px;
}

.consent {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:18px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
}

.consent input {
  width:18px;
  height:18px;
  flex-shrink:0;
  margin:2px 0 0;
  accent-color:var(--accent);
}

.form-status.is-error {
  color:#ff9a9a;
}

.form-status {
  font-size:14px;
  color:var(--accent);
  margin-top:15px;
  min-height:24px;
}

/* Scroll reveal — only when JS is available. */

.js .reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--delay,0s);
}

.js .reveal.is-visible {
  opacity:1;
  transform:none;
}

.no-reveal .reveal {
  opacity:1;
  transform:none;
}

/* Responsive */

@media(max-width:1180px) {
  .header nav a {
    padding:8px 10px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .header-cta {
    display:none;
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:0;
  }
  .hero-art {
    height:600px;
  }
  .services-grid {
    gap:14px;
  }
  .service-card {
    padding:26px;
  }
  .process-grid {
    grid-template-columns:1fr 1fr;
    row-gap:48px;
  }
  .process-grid:before {
    display:none;
  }
  .work-card {
    flex-basis:calc((100% - 20px) / 2);
  }
  .catalog-grid {
    grid-template-columns:1fr 1fr;
  }
  .custom-tile {
    grid-template-columns:1fr;
  }
  .contact-card {
    padding:52px;
  }
}

@media(max-width:860px) {
  .header nav {
    display:none;
  }
  /* Same size as the social icons next to it; three bars turn into a cross when open. */
  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:4px;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    background:none;
    border:1px solid var(--line-strong);
    border-radius:50%;
    transition:border-color .2s;
  }
  .menu-toggle:hover,.menu-toggle[aria-expanded=true] {
    border-color:var(--accent);
  }
  .menu-toggle span {
    height:1.5px;
    width:16px;
    border-radius:1px;
    background:var(--text);
    transition:transform .25s var(--ease),opacity .2s;
  }
  .menu-toggle[aria-expanded=true] span:nth-child(1) {
    transform:translateY(5.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0;
  }
  .menu-toggle[aria-expanded=true] span:nth-child(3) {
    transform:translateY(-5.5px) rotate(-45deg);
  }
  /* Open menu covers everything below the header and blurs the page behind it.
     The header drops its own blur meanwhile: a blurred parent would trap the fixed panel inside itself. */
  .header.menu-open {
    backdrop-filter:none;
    background:var(--bg);
    border-bottom-color:var(--line);
  }
  .header nav.is-open {
    display:flex;
    flex-direction:column;
    gap:0;
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;
    bottom:0;
    padding:16px 16px 32px;
    border:0;
    border-radius:0;
    background:#0c0b0fb8;
    backdrop-filter:blur(20px) saturate(1.2);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
    overflow-y:auto;
    animation:menu-in .25s var(--ease);
  }
  .header nav a {
    padding:18px 4px;
    font-size:24px;
    letter-spacing:-.02em;
    color:var(--text);
    border-bottom:1px solid var(--line);
    border-radius:0;
  }
  .header nav a:hover,.header nav a[aria-current] {
    background:none;
    color:var(--accent);
  }
  body.menu-open {
    overflow:hidden;
  }
  .header nav.is-open .nav-cta {
    display:flex;
    width:100%;
    margin-top:auto;
    flex-shrink:0;
  }
  /* Phones and tablets: the figure becomes a dimmed backdrop behind the text. */
  .hero {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:0;
    min-height:calc(100svh - 70px);
    overflow:hidden;
  }
  .hero-copy {
    padding:40px 0 56px;
  }
  .hero-art {
    position:absolute;
    top:0;
    right:-16px;
    bottom:0;
    width:78%;
    height:auto;
    min-height:0;
    margin:0;
    z-index:0;
    opacity:.42;
    pointer-events:none;
  }
  .hero-figure {
    top:2%;
    left:auto;
    right:-12%;
    height:100%;
    transform:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 92%),linear-gradient(to right,transparent 0%,#000 45%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,#000 40%,transparent 92%),linear-gradient(to right,transparent 0%,#000 45%);
    mask-composite:intersect;
  }
  .hero-watermark {
    display:none;
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  .section-description {
    text-align:left;
  }
  .services-grid {
    grid-template-columns:1fr;
  }
  .transform-inner {
    grid-template-columns:1fr;
    gap:40px;
  }

  .studio-content {
    grid-template-columns:1fr;
    gap:32px;
  }
  .contact-card {
    flex-direction:column;
    align-items:flex-start;
  }
  .contact-button {
    align-self:stretch;
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:76px;
  }
  .container {
    width:calc(100% - 32px);
  }
  :root {
    --header-h:70px;
  }
  .brand {
    font-size:27px;
  }
  .brand .brand-mark {
    width:40px;
    height:42px;
  }
  .hero .eyebrow {
    font-size:11px;
    letter-spacing:.1em;
  }
  h1 {
    font-size:clamp(44px,13vw,60px);
    margin:24px 0 20px;
  }
  .hero-description {
    font-size:16px;
  }
  .hero-actions {
    flex-direction:column;
    align-items:stretch;
  }
  .section {
    padding-block:76px;
  }
  .section-heading {
    margin-bottom:34px;
  }
  .service-card h3 {
    font-size:24px;
  }
  .process-grid {
    grid-template-columns:1fr;
    row-gap:0;
  }
  .step {
    display:grid;
    grid-template-columns:56px 1fr;
    column-gap:18px;
    padding-bottom:30px;
  }
  .step:not(:last-child):before {
    content:"";
    position:absolute;
    left:28px;
    top:56px;
    bottom:0;
    width:1px;
    background:var(--line-strong);
  }
  .step-num {
    grid-row:span 2;
    margin:0;
  }
  .step h3 {
    margin:14px 0 8px;
  }
  .catalog-grid {
    grid-template-columns:1fr;
    gap:14px;
  }
  .works-grid {
    gap:14px;
  }
  .work-card {
    flex-basis:100%;
  }
  .form-row {
    grid-template-columns:1fr;
  }
  .custom-tile {
    padding:24px;
  }
  .studio-section {
    padding-block:80px;
  }
  .contact-card {
    padding:36px 24px;
    border-radius:var(--radius-sm);
  }
  .contact-copy h2 {
    font-size:44px;
  }
  .social-links {
    grid-template-columns:1fr;
    gap:10px;
  }
  .social-link {
    font-size:18px;
    padding:18px 20px;
  }
  .footer {
    gap:20px;
  }
  .footer p {
    order:3;
    width:100%;
  }
  .footer>a:not(.brand) {
    margin-left:auto;
  }
  .copyright {
    order:4;
    padding-top:20px;
  }
  .order-content {
    padding:48px 22px 24px;
  }
  .order-content h2 {
    font-size:30px;
  }
  .dialog-close {
    position:sticky;
    float:right;
    margin:10px 10px -54px;
    top:10px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
  .js .reveal {
    opacity:1;
    transform:none;
  }
}

.work-card[hidden],.product-card[hidden] {
  display:none;
}

/* Pages with the full list of works or catalog figures */



.page-works {
  padding-top:56px;
}

.page-works h1 {
  font-size:clamp(40px,5vw,72px);
  letter-spacing:-.035em;
  margin:0;
}

.back-link {
  display:inline-block;
  margin-bottom:36px;
  font-size:14px;
  color:var(--muted);
}

.back-link:hover {
  color:var(--accent);
}

.filter-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:-20px 0 32px;
}

.filter-chips button {
  padding:9px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:transparent;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
  transition:color .2s,border-color .2s,background .2s;
}

.filter-chips button:hover {
  color:var(--text);
  border-color:var(--accent);
}

.filter-chips button[aria-pressed=true] {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1024;
}

/* The call to action inside the menu exists only in the mobile full-screen menu. */
.nav-cta {
  display:none;
}

/* Header: social icons next to the call to action */

.header-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.social-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:#cfc9d6;
  transition:color .2s,border-color .2s,background .2s;
}

.social-icon svg,.social-name svg {
  width:18px;
  height:18px;
  fill:currentColor;
}

.social-icon:hover {
  color:var(--text);
  border-color:var(--accent);
  background:#c9a6ff14;
}

.social-name {
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.social-name svg {
  color:var(--accent);
}

.product-info h3 a:hover {
  color:var(--accent);
}

/* Work / catalog item page */

.item-page {
  padding-top:40px;
}

.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:32px;
  font-size:13px;
  color:var(--muted);
}

.breadcrumbs a:hover {
  color:var(--accent);
}

.breadcrumbs [aria-current] {
  color:var(--text);
}

.item-layout {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}

.item-stage {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#18171b;
}

.item-photo {
  width:100%;
  height:min(78svh,760px);
  object-fit:contain;
}

.item-thumbs {
  display:flex;
  gap:8px;
  margin-top:12px;
  overflow-x:auto;
  padding-bottom:4px;
}

.item-thumbs button {
  flex:0 0 72px;
  height:88px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#18171b;
  opacity:.6;
  transition:opacity .2s,border-color .2s;
}

.item-thumbs img {
  height:100%;
  object-fit:cover;
}

.item-thumbs button:hover,.item-thumbs button[aria-current=true] {
  opacity:1;
  border-color:var(--accent);
}

.item-info {
  position:sticky;
  top:110px;
}

.item-info h1 {
  font-size:clamp(36px,4.2vw,60px);
  letter-spacing:-.035em;
  margin:18px 0 16px;
}

.item-title-en {
  margin:-6px 0 16px;
  font-size:20px;
  color:var(--muted);
}

.item-lead {
  font-size:18px;
  color:#ddd6e6;
}

.item-price {
  margin-top:20px;
  font-size:22px;
}

.item-text {
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.item-text p+p {
  margin-top:12px;
}

.item-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.item-note {
  margin-top:16px;
  font-size:13px;
  color:var(--muted);
}

.item-more {
  margin-top:96px;
}

.item-more h2 {
  font-size:clamp(28px,3vw,40px);
  margin-bottom:28px;
}

.not-found {
  min-height:50vh;
}

.not-found h1 {
  font-size:clamp(40px,5vw,72px);
  margin:20px 0 16px;
}

.not-found>p:not(.eyebrow) {
  color:var(--muted);
}

@media(max-width:1100px) {
  .header-actions .social-icon {
    width:36px;
    height:36px;
  }
}

@media(max-width:860px) {
  .header-actions {
    margin-left:auto;
  }
  .menu-toggle {
    order:3;
  }
  .item-layout {
    /* minmax(0, …) stops the long thumbnail strip from widening the page. */
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .item-info {
    position:static;
  }
  .item-photo {
    height:min(70svh,560px);
  }
}

@keyframes menu-in {
  from { opacity:0; transform:translateY(-8px); }
}

/* Large photo on an item page opens the viewer */

.item-zoom {
  display:block;
  width:100%;
  padding:0;
  background:none;
  cursor:zoom-in;
}

dialog.viewer {
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

dialog.viewer[open] {
  display:grid;
  place-items:center;
}

dialog.viewer::backdrop {
  background:#07060af2;
  backdrop-filter:blur(10px);
}

.viewer-photo {
  width:auto;
  height:auto;
  max-width:min(94vw,1400px);
  max-height:88dvh;
  object-fit:contain;
  border-radius:var(--radius);
}

.viewer .dialog-close {
  position:fixed;
  top:16px;
  right:16px;
}

.viewer .gallery-prev {
  left:max(16px,calc(50vw - 720px));
}

.viewer .gallery-next {
  right:max(16px,calc(50vw - 720px));
}

.viewer-count {
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  padding:6px 12px;
  border-radius:99px;
  background:#0c0b0fcc;
  border:1px solid #ffffff1f;
  font-size:13px;
  color:#ddd6e6;
}

/* Order form: item line and direct contacts */

.order-item {
  margin:-4px 0 12px;
  font-size:18px;
  color:var(--accent);
}

.order-direct {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.order-direct p {
  font-size:14px;
  color:var(--muted);
}

.order-direct-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.order-direct-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:99px;
  font-size:14px;
  transition:border-color .2s,background .2s;
}

.order-direct-link svg {
  width:18px;
  height:18px;
  fill:var(--accent);
}

.order-direct-link:hover {
  border-color:var(--accent);
  background:#c9a6ff14;
}

/* What each service includes. */

.service-points {
  list-style:none;
  width:100%;
  margin:0 0 28px;
  padding:0;
}

.service-points li {
  display:flex;
  align-items:center;
  gap:12px;
  padding:7px 0;
  font-size:14px;
  color:#d6cfdf;
}

.service-points li:before {
  content:"";
  width:14px;
  height:1px;
  flex-shrink:0;
  background:var(--glow);
}

/* What each step ends with. */

.step .step-result {
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:#d6cfdf;
}

.step .step-result span {
  margin-right:10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* Call to action under the process steps. */

.process-cta {
  margin-top:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  padding:22px 22px 22px 28px;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:linear-gradient(135deg,#1f1a28,#15131a);
}

.process-cta p {
  font-size:15px;
  color:var(--muted);
}

.process-cta strong {
  color:var(--text);
  font-weight:600;
  margin-right:6px;
}

.process-cta .button {
  flex-shrink:0;
}

/* Studio: photos of real works next to the text. */

.studio-section:has(.studio-photos) {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(40px,5vw,80px);
  align-items:center;
}

.studio-section:has(.studio-photos) .studio-content {
  grid-template-columns:1fr;
  gap:28px;
}

.studio-photos {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
  height:620px;
}

.studio-photo {
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#18171b;
}

.studio-photo:first-child {
  grid-row:span 2;
}

.studio-photo .cover {
  width:100%;
}

@media(max-width:860px) {
  .process-cta {
    flex-direction:column;
    align-items:stretch;
    padding:22px;
  }
  .studio-section:has(.studio-photos) {
    grid-template-columns:1fr;
  }
  .studio-photos {
    order:2;
    height:clamp(200px,32vh,320px);
  }
}

/* Home page as full-screen slides (script.js turns it on with .deck-on).
   Without scripts the page stays a regular long page. */

.deck-on,.deck-on body {
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

.deck-on {
  --footer-h:52px;
}

/* Slides live between the header and the footer bar, both always on screen. */
.deck-on .deck {
  position:fixed;
  inset:var(--header-h) 0 var(--footer-h);
  overflow:clip;
}

/* Slides wait below the screen and leave upwards, so the direction follows the navigation. */
.deck-on .slide {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  opacity:0;
  visibility:hidden;
  transform:translateY(7vh);
  transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s .9s;
}

.deck-on .slide.is-before {
  transform:translateY(-7vh);
}

.deck-on .slide.is-active {
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .7s var(--ease) .15s,transform .9s var(--ease) .1s,visibility 0s;
}

/* Inside slides cards only fade in, without moving: rising from below made a card stick out
   of the slide for a moment, and a zoom visibly pushed the edges of the cards sideways. */
.js.deck-on .slide .reveal {
  transform:none;
}

.js.deck-on .slide .reveal.is-visible {
  transform:none;
}

/* Content sits in the middle of the slide but stays reachable from the top when it is taller. */
.deck-on .slide>:first-child {
  margin-top:auto;
}

.deck-on .slide>:last-child {
  margin-bottom:auto;
}

.deck-on .slide-alt {
  background:var(--bg-2);
}

.deck-on .slide .section {
  padding-block:clamp(24px,5vh,80px);
  background:none;
  border:0;
}

.deck-on .section-heading {
  margin-bottom:clamp(22px,4.5vh,56px);
}

.deck-on .slide h2 {
  font-size:clamp(32px,min(4.2vw,7vh),62px);
}

/* Hero fills its slide; the figure fades out before the bottom edge. */
.deck-on .hero {
  flex:1 0 auto;
  margin:0 auto;
  min-height:0;
  overflow:clip;
}

.deck-on .hero-copy {
  padding-block:clamp(16px,4vh,56px);
}

.deck-on .hero-description {
  font-size:clamp(15px,2.2vh,17px);
}

.deck-on .hero-art {
  align-self:stretch;
  height:auto;
  min-height:0;
  margin:0;
}

/* Larger and shifted towards the text; the fade ends right at the bottom of the slide. */
.deck-on .hero-figure {
  top:1%;
  left:26%;
  height:138%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 72%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 72%);
}

.deck-on .hero-watermark {
  bottom:-3vh;
}

.deck-on h1 {
  font-size:clamp(48px,min(6.2vw,10vh),96px);
  margin:clamp(18px,3.5vh,30px) 0 clamp(16px,3vh,28px);
}

.deck-on .hero-actions {
  margin-top:clamp(22px,4.5vh,38px);
}

/* Content slides fill the screen height: the cards grow instead of empty margins.
   Very tall screens stop growing and centre the content. */

.deck-on .container {
  width:min(1520px,calc(100% - 96px));
}

.deck-on .slide>.section {
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  max-height:1080px;
}

.deck-on .slide .section>.container {
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

/* Services: the top of each card grows, with a large outlined number in it. */

.deck-on .services-grid {
  flex:1 0 auto;
}

.deck-on .service-top {
  flex:1 0 auto;
  min-height:clamp(80px,14vh,220px);
  margin-bottom:clamp(14px,2.5vh,28px);
}

.deck-on .service-num {
  align-self:flex-end;
  font-size:clamp(56px,12vh,150px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--glow) 45%,transparent);
  transition:color .4s,-webkit-text-stroke-color .4s;
}

.deck-on .service-card:hover .service-num {
  color:color-mix(in srgb,var(--glow) 10%,transparent);
  -webkit-text-stroke-color:var(--glow);
}

.deck-on .service-card>p:not(.micro) {
  margin-bottom:clamp(12px,2vh,20px);
}

.deck-on .service-points {
  margin-bottom:clamp(16px,3vh,28px);
}

/* Before / after: the photo takes the full height of the slide. */

/* The container rule above makes containers flex columns; this one stays a grid. */
/* Text starts level with the top of the photo instead of floating in its middle. */
.deck-on .slide .section>.transform-inner {
  display:grid;
  align-items:start;
}

.deck-on .compare {
  height:calc(100dvh - var(--header-h) - var(--footer-h) - 2 * clamp(24px,5vh,80px));
  max-height:900px;
  width:auto;
  max-width:100%;
}

@media(min-width:861px) {
  .deck-on .transform-inner {
    grid-template-columns:minmax(0,1fr) auto;
  }
  .deck-on .compare {
    max-width:min(56vw,720px);
  }
}

.deck-on .layers {
  margin-top:clamp(16px,3.5vh,36px);
}

.deck-on .layers li {
  padding-block:clamp(8px,1.6vh,14px);
}

/* Rails: works, catalog, and on narrow screens services and steps. */

.deck-on .rail {
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:20px;
  overflow:auto hidden;
  /* The row runs to the right edge of the screen, so the cut card hints at more. */
  margin-right:calc((100% - 100vw) / 2);
  padding-right:calc((100vw - 100%) / 2);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}

.deck-on .rail::-webkit-scrollbar {
  display:none;
}

.deck-on .rail>* {
  flex:0 0 auto;
  scroll-snap-align:start;
}

/* With a mouse the rail is dragged freely (see enableDragScroll), snapping would fight the hand. */
@media(pointer:fine) {
  .deck-on .rail {
    scroll-snap-type:none;
  }
}

.deck-on .rail.is-scrollable {
  cursor:grab;
}

.deck-on .rail.is-dragging {
  cursor:grabbing;
  user-select:none;
}

.deck-on .rail.is-dragging * {
  cursor:grabbing;
}

.deck-on .services-grid>.service-card,.deck-on .process-grid>.step {
  flex:1 0 0;
  min-width:min(78vw,300px);
}

/* Works: cards take the height left under the heading. */

.deck-on .works-grid {
  flex:1 1 0;
  min-height:clamp(280px,42vh,420px);
  max-height:680px;
}

.deck-on .work-card {
  flex:1 0 clamp(240px,20vw,380px);
  height:auto;
  aspect-ratio:auto;
}

/* Catalog: the photo grows, the text under it keeps its size. */

.deck-on .catalog-grid {
  flex:1 0 auto;
}

.deck-on .product-card {
  flex:1 0 clamp(250px,22vw,380px);
}

.deck-on .product-info {
  flex:0 0 auto;
}

.deck-on .product-image {
  flex:1 1 0;
  aspect-ratio:auto;
  height:auto;
  min-height:clamp(140px,22vh,260px);
}

.deck-on .rail>.empty-note {
  flex:1;
}

.deck-on .rail>.more-tile {
  flex:0 0 clamp(210px,16vw,260px);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:14px;
  padding:28px;
}

.deck-on .rail>.more-tile .card-link {
  margin-top:10px;
}

.rail-nav {
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.rail-nav[hidden] {
  display:none;
}

.rail-nav button {
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:#ffffff06;
  font-size:22px;
  line-height:1;
  transition:background .2s,border-color .2s,color .2s,opacity .2s;
}

.rail-nav button:hover:not(:disabled) {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1024;
}

.rail-nav button:disabled {
  opacity:.3;
  cursor:default;
}

/* Process: four tall cards with a large outlined number, and a call to action under them. */

.deck-on .process-grid {
  flex:1 0 auto;
}

.deck-on .process-grid:before {
  display:none;
}

.deck-on .step {
  display:flex;
  flex-direction:column;
  padding:clamp(20px,3vh,32px);
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  transition:border-color .3s;
}

.deck-on .step:before {
  display:none;
}

.deck-on .step:hover {
  border-color:var(--line-strong);
}

.deck-on .step-num {
  display:block;
  width:auto;
  height:auto;
  margin:0 0 auto;
  padding-bottom:clamp(20px,4vh,40px);
  background:none;
  border:0;
  border-radius:0;
  font-size:clamp(64px,19vh,220px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px #c9a6ff73;
  transition:color .4s,-webkit-text-stroke-color .4s;
}

.deck-on .step:hover .step-num {
  background:none;
  color:#c9a6ff1a;
  -webkit-text-stroke-color:var(--accent);
}

.deck-on .step h3 {
  margin:0 0 10px;
}

.deck-on .process-cta {
  margin-top:clamp(14px,2.5vh,24px);
}

/* Studio: real work photos on one side, the story on the other. */

@media(min-width:861px) {
  .deck-on .studio-section:has(.studio-photos) {
    display:grid;
    align-items:stretch;
  }
  /* The photos take the height of the slide and never push it: their own size does not count. */
  .deck-on .studio-photos {
    height:auto;
    min-height:clamp(320px,55vh,600px);
    contain:size;
  }
  .deck-on .studio-body {
    align-self:start;
  }
}

.deck-on .studio-content {
  margin-top:clamp(16px,3vh,30px);
}

.deck-on .studio-points {
  margin-top:clamp(18px,3.5vh,32px);
}

/* Contacts and footer share the last slide. */

.deck-on .contact-section {
  padding-top:clamp(20px,4vh,64px);
  padding-bottom:0;
}

.deck-on .contact-card {
  padding:clamp(28px,5vh,72px) clamp(32px,5vw,72px);
}

.deck-on .contact-copy h2 {
  font-size:clamp(40px,min(5.6vw,9vh),84px);
  margin:clamp(14px,3vh,24px) 0;
}

.deck-on .social-links {
  padding-block:clamp(14px,3vh,34px) 0;
}

/* The footer is a slim bar pinned to the bottom of every slide. */
.deck-on .footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:14;
  height:var(--footer-h);
  padding:0;
  gap:28px;
  flex-wrap:nowrap;
}

/* Full-width background behind the centred content. */
.deck-on .footer:before {
  content:"";
  position:absolute;
  inset:0 calc(50% - 50vw);
  z-index:-1;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid var(--line);
}

.deck-on .footer .brand {
  font-size:18px;
  gap:8px;
  letter-spacing:-.8px;
}

.deck-on .footer .brand-mark {
  width:26px;
  height:27px;
}

.deck-on .footer p {
  margin-right:auto;
  color:#cfc8d8;
}

.deck-on .footer .copyright {
  order:2;
  width:auto;
  padding:0;
  border:0;
}

.deck-on .footer>a:not(.brand) {
  order:3;
}

/* Dots on the right: one per slide, the name appears on hover. */

.deck-dots {
  position:fixed;
  right:22px;
  top:calc(50% + (var(--header-h) - var(--footer-h)) / 2);
  transform:translateY(-50%);
  z-index:15;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.deck-dots button {
  position:relative;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  padding:0;
  background:none;
}

.deck-dots button:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:3px;
  background:var(--line-strong);
  transition:height .4s var(--ease),background .3s;
}

.deck-dots button:hover:before {
  background:var(--muted);
}

.deck-dots button[aria-current]:before {
  height:22px;
  background:var(--accent);
}

.deck-dots span {
  position:absolute;
  right:32px;
  top:50%;
  transform:translate(6px,-50%);
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  padding:6px 10px;
  border-radius:var(--radius-sm);
  background:#0c0b0fd9;
  border:1px solid var(--line);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .25s var(--ease);
}

.deck-dots button:hover span,.deck-dots button:focus-visible span {
  opacity:1;
  transform:translate(0,-50%);
}

/* Laptops and other short screens: tighter cards so every slide still fits without scrolling. */
@media(min-width:861px) {
  .deck-on .process-grid>.step {
    min-width:220px;
  }
}

@media(min-width:861px) and (max-height:920px) {
  .deck-on .service-card {
    padding:24px 28px;
  }
  .deck-on .service-top {
    min-height:0;
    margin-bottom:10px;
  }
  .deck-on .service-num {
    font-size:clamp(44px,9vh,80px);
  }
  .deck-on .service-card h3 {
    font-size:22px;
    margin-bottom:10px;
  }
  .deck-on .service-card>p:not(.micro) {
    line-height:1.6;
  }
  .deck-on .service-points li {
    padding-block:3px;
  }
  .deck-on .card-link {
    padding-top:12px;
  }
  .deck-on .step {
    padding:20px 24px;
  }
  .deck-on .step-num {
    font-size:clamp(48px,12vh,110px);
    padding-bottom:16px;
  }
  .deck-on .step .step-result {
    margin-top:12px;
    padding-top:10px;
  }
  .deck-on .process-cta {
    padding:12px 12px 12px 24px;
  }
  .deck-on .process-cta .button {
    min-height:46px;
    padding-block:10px;
  }
  .deck-on .studio-section:has(.studio-photos) .studio-content {
    gap:18px;
  }
  .deck-on .studio-text p {
    line-height:1.65;
  }
  .deck-on .studio-points {
    margin-top:14px;
  }
  .deck-on .studio-points li {
    padding-block:9px;
  }
  .deck-on .studio-photos {
    min-height:0;
  }
}

/* Very short screens (1280×720 and the like). */
@media(min-width:861px) and (max-height:780px) {
  .deck-on .slide .section {
    padding-block:20px;
  }
  .deck-on .section-heading {
    margin-bottom:18px;
  }
  .deck-on .section-heading .eyebrow {
    margin-bottom:12px;
  }
  .deck-on .slide h2 {
    font-size:clamp(30px,6.5vh,48px);
  }
  .deck-on .service-num {
    font-size:clamp(40px,7vh,60px);
  }
  .deck-on .service-card>p:not(.micro) {
    font-size:14px;
    line-height:1.5;
  }
  .deck-on .service-points li {
    padding-block:1px;
  }
  .deck-on .step-num {
    font-size:clamp(44px,9vh,70px);
    padding-bottom:10px;
  }
  .deck-on .product-image {
    min-height:110px;
  }
  .deck-on .product-info {
    padding:16px 20px 18px;
  }
  .deck-on .product-bottom {
    padding-top:12px;
  }
  .deck-on .step {
    padding:16px 20px;
  }
  .deck-on .process-cta {
    margin-top:12px;
  }
  .deck-on .studio-text p {
    font-size:15px;
  }
  .deck-on .studio-points li {
    padding-block:6px;
  }
}

@media(max-width:1100px) {
  .deck-on .container {
    width:calc(100% - 64px);
  }
  .deck-dots {
    right:6px;
  }
}

@media(max-width:860px) {
  .deck-on .hero {
    min-height:100%;
  }
  .deck-on .hero-art {
    height:auto;
  }
  .deck-on .hero-figure {
    height:100%;
  }
  .deck-on .compare {
    height:auto;
    width:min(100%,420px,36vh);
  }
  .deck-on .rail-nav {
    display:none;
  }
  .deck-on .work-card {
    flex:0 0 min(72vw,340px);
  }
  .deck-on .product-card {
    flex:0 0 min(72vw,300px);
  }
  .deck-on .rail>.more-tile {
    flex:0 0 min(60vw,260px);
  }
  .deck-on .services-grid>.service-card,.deck-on .process-grid>.step {
    flex:0 0 min(78vw,300px);
  }
  .deck-on .service-top {
    min-height:0;
  }
  .deck-dots {
    right:2px;
    gap:2px;
  }
  .deck-dots button {
    width:18px;
    height:18px;
  }
  .deck-dots button:before {
    width:4px;
    height:4px;
  }
  .deck-dots button[aria-current]:before {
    height:16px;
  }
  .deck-dots span {
    display:none;
  }
}

@media(max-width:600px) {
  .deck-on .container {
    width:calc(100% - 32px);
  }
  .deck-on .rail {
    gap:12px;
  }
}

/* Phones: the bar keeps the slogan and the copyright only. */
@media(max-width:860px) {
  .deck-on {
    --footer-h:44px;
  }
  .deck-on .footer {
    gap:12px;
  }
  .deck-on .footer .brand,.deck-on .footer>a:not(.brand) {
    display:none;
  }
  .deck-on .footer p {
    order:0;
    width:auto;
    min-width:0;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .deck-on .footer .copyright {
    flex-shrink:0;
    font-size:12px;
  }
}

/* Narrow phones: the slogan alone, so it is not cut. */
@media(max-width:600px) {
  .deck-on .footer .copyright {
    display:none;
  }
  .deck-on .footer p {
    margin:0 auto;
  }
}

/* "Подробнее" button and the panel it opens: phones only (script.js adds them). */

.m-more,.m-sheet {
  display:none;
}

@media(max-width:860px) {
  /* Every slide fits the phone screen: secondary text moves to the panel, the rest gets tighter. */
  .deck-on .m-extra,.deck-on .section-description {
    display:none;
  }
  .deck-on .m-more {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    padding:8px 16px;
    border-radius:99px;
    border:1px solid var(--line-strong);
    background:#ffffff06;
    font-size:13px;
  }
  .deck-on .m-more span {
    color:var(--accent);
  }
  .deck-on .m-sheet.is-open {
    display:block;
    position:absolute;
    inset:0;
    z-index:5;
    padding:18px 16px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--bg-2);
    animation:sheet-in .35s var(--ease);
  }
  .deck-on .m-sheet-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .deck-on .m-sheet-close {
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:none;
    font-size:22px;
    line-height:1;
  }
  .deck-on .m-sheet>p {
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
  }
  .deck-on .m-sheet .layers,.deck-on .m-sheet .studio-points {
    margin-top:18px;
  }
  .deck-on .slide .section {
    padding-block:16px;
  }
  .deck-on .section-heading {
    margin-bottom:14px;
    gap:8px;
  }
  .deck-on .section-heading .eyebrow {
    margin-bottom:10px;
  }
  .deck-on .slide h2 {
    font-size:clamp(28px,8vw,34px);
  }

  /* Services: short cards without the list and the big number area. */
  .deck-on .service-card {
    padding:20px;
  }
  .deck-on .service-top {
    flex:0 0 auto;
    margin-bottom:12px;
  }
  .deck-on .service-num {
    font-size:44px;
  }
  .deck-on .service-points {
    margin-bottom:14px;
  }
  .deck-on .service-card h3 {
    font-size:22px;
    margin-bottom:8px;
  }
  .deck-on .service-card>p:not(.micro) {
    font-size:14px;
    line-height:1.6;
    margin-bottom:14px;
  }
  .deck-on .card-link {
    padding-top:12px;
  }

  /* Before / after: the title, then the photo takes the rest of the height. */
  .deck-on .slide .section>.transform-inner {
    grid-template-rows:auto minmax(0,1fr);
    gap:16px;
    align-items:stretch;
  }
  .deck-on .transform-copy h2 {
    margin:12px 0 0;
  }
  /* Full width, like the title above; the photo is cropped to the height left. */
  /* The photo takes only the height left under the title (cropped, not scaled down):
     without contain its 4:5 shape would make the slide taller than the screen. */
  .deck-on .compare {
    height:100%;
    width:100%;
    min-height:0;
    max-width:none;
    justify-self:stretch;
    aspect-ratio:auto;
    contain:size;
  }
  .deck-on .compare-label {
    top:12px;
    padding:5px 9px;
    font-size:10px;
    letter-spacing:.08em;
  }
  .deck-on .compare-label-before {
    left:12px;
  }
  .deck-on .compare-label-after {
    right:12px;
  }

  /* Steps: smaller numbers, the call to action is just the button. */
  .deck-on .step {
    padding:18px 20px;
  }
  .deck-on .step-num {
    font-size:52px;
    padding-bottom:14px;
  }
  .deck-on .process-cta {
    margin-top:14px;
    padding:0;
    border:0;
    background:none;
  }
  .deck-on .process-cta p {
    display:none;
  }

  /* Studio: text first, the photos share the rest of the height in one row. */
  .deck-on .studio-section:has(.studio-photos) {
    gap:16px;
  }
  .deck-on .studio-section:has(.studio-photos) .studio-content {
    gap:10px;
    margin-top:12px;
  }
  .deck-on .studio-content h2 {
    font-size:clamp(28px,8vw,34px);
  }
  .deck-on .studio-text p {
    font-size:15px;
    line-height:1.6;
  }
  .deck-on .studio-photos {
    order:2;
    align-self:stretch;
    flex:1 1 0;
    height:auto;
    min-height:120px;
    contain:size;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:1fr;
    gap:8px;
  }
  .deck-on .studio-photo:first-child {
    grid-row:auto;
  }

  /* Contacts: a compact card and the two links side by side. */
  .deck-on .contact-section {
    padding-top:16px;
  }
  .deck-on .contact-card {
    padding:24px 20px;
    gap:20px;
  }
  .deck-on .contact-copy h2 {
    font-size:clamp(32px,9vw,40px);
    margin:12px 0;
  }
  .deck-on .social-links {
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding-top:12px;
  }
  .deck-on .social-link {
    padding:14px 16px;
    font-size:16px;
  }
}

@keyframes sheet-in {
  from {
    opacity:0;
    transform:translateY(24px);
  }
}

/* Short phones: the service list goes, so the card still fits. */
@media(max-width:860px) and (max-height:740px) {
  .deck-on .service-points {
    display:none;
  }
  .deck-on h1 {
    font-size:40px;
    margin:16px 0 14px;
  }
  .deck-on .hero-actions {
    margin-top:18px;
    gap:10px;
  }
}

/* Phones: the contact card fills the last slide. */
@media(max-width:860px) {
  .deck-on .contact-section {
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    padding-bottom:16px;
  }
  .deck-on .contact-card {
    flex:1 0 auto;
    justify-content:space-between;
  }
}

/* "Фильтр" button on the works and catalog pages: phones only, the chips stay in view on wide screens. */

.filter-toggle {
  display:none;
}

@media(max-width:860px) {
  /* A compact top: back link, title and the filter button; the eyebrow and description go. */
  .page-works {
    padding-top:20px;
  }
  .page-works .back-link {
    margin-bottom:12px;
  }
  .page-works .section-heading {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
  }
  .page-works .section-heading .eyebrow,.page-works .section-description {
    display:none;
  }
  .page-works h1 {
    font-size:34px;
  }
  .filter-toggle {
    display:inline-flex;
    align-items:center;
    flex-shrink:1;
    min-width:0;
    max-width:55%;
    padding:9px 16px;
    border-radius:99px;
    border:1px solid var(--line-strong);
    background:#ffffff06;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .filter-toggle[aria-expanded=true],.filter-toggle.is-active {
    border-color:var(--accent);
    color:var(--accent);
  }
  .filter-chips {
    display:none;
    margin:0 0 20px;
  }
  .filter-chips.is-open {
    display:flex;
    animation:menu-in .25s var(--ease);
  }
}