:root {
  color-scheme: dark;
  font-family: var(--font-body);
  background: var(--page-surface);
  color: var(--page-text);
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  --hero-height: var(--hero-min-desktop);
  min-height: var(--hero-height);
}

.scene {
  position: absolute;
  z-index: var(--layer-scene);
  top: var(--center);
  left: var(--center);
  width: max(100vw, var(--hero-height) * var(--scene-ratio));
  aspect-ratio: var(--scene-ratio);
  transform: translate(var(--center-offset), var(--center-offset));
  background: var(--color-scene) var(--scene-image) center / cover no-repeat;
  container-type: inline-size;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--layer-scrim);
  background:
    var(--hero-bottom-fade) bottom / 100% var(--section-join-depth) no-repeat,
    var(--hero-scrim, var(--hero-scrim-desktop));
  pointer-events: none;
}

.lamp, .beam, .reflection {
  position: absolute;
  pointer-events: none;
}

.lamp, .beam {
  top: 0;
  transform-origin: var(--center) 0;
  animation: swing var(--lamp-duration) var(--lamp-easing) infinite alternate;
}

.lamp {
  left: var(--lamp-offset);
  width: var(--lamp-width);
  padding-top: var(--cord-drop);
}

button.lamp:not([hidden]) {
  display: block;
  padding-inline: 0;
  padding-bottom: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.lamp::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--center);
  width: var(--cord-width);
  height: var(--cord-drop);
  transform: translateX(var(--center-offset));
  background: var(--cord-surface);
}

.lamp img {
  display: block;
  width: 100%;
}

.beam {
  left: var(--beam-offset);
  width: var(--beam-width);
  height: var(--beam-height);
  background: var(--lamp-beam);
  mask-image: var(--lamp-beam-mask);
  mix-blend-mode: screen;
}

.reflection {
  left: var(--reflection-offset);
  top: var(--reflection-top);
  width: var(--reflection-width);
  height: var(--reflection-height);
  background: var(--lamp-reflection);
  mix-blend-mode: screen;
  animation: sweep var(--lamp-duration) var(--lamp-easing) infinite alternate;
}

@keyframes swing {
  from { transform: rotate(var(--lamp-angle-start)); }
  to { transform: rotate(var(--lamp-angle-end)); }
}

@keyframes sweep {
  from { transform: translateX(var(--reflection-travel-start)); }
  to { transform: translateX(var(--reflection-travel-end)); }
}

.hero-content {
  pointer-events: none;
  container-type: inline-size;
  width: var(--hero-content-desktop);
  margin-left: var(--hero-content-offset);
  padding: var(--hero-padding-desktop);
}

@media (min-width: 1440px) and (orientation: landscape) {
  .hero-content {
    margin-left: var(--hero-content-wide-offset);
    width: min(var(--hero-content-desktop), calc(100% - var(--hero-content-wide-offset)));
    padding-block-start: var(--hero-padding-wide-top);
  }
}

h1, h2, p { margin: 0; }
h1 {
  font-family: var(--font-display);
  font-size: var(--type-hero-desktop);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}

#hero-title { font-size: min(var(--type-hero-desktop), var(--type-hero-width-limit)); }
.hero-content .actions > * { pointer-events: auto; }

#hero-title span { display: block; white-space: nowrap; }

.hero-content p {
  max-width: var(--measure-copy);
  margin-top: var(--space-30);
  color: var(--color-hero-copy);
  font-size: var(--type-hero-copy);
  line-height: var(--leading-copy);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-14);
  min-height: var(--button-height);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--size-14);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.icon {
  width: var(--size-icon);
  height: var(--size-icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary { background: var(--action-fill); color: var(--action-ink); }
.button-primary:hover { background: var(--action-hover); }
.button-secondary { background: var(--color-secondary-surface); border-color: var(--color-secondary-edge); }
.button-secondary:hover { background: var(--color-secondary-hover); }

dialog h2 { margin-bottom: var(--space-12); }
dialog p { color: var(--color-muted); line-height: var(--leading-body); }

dialog {
  width: min(var(--dialog-width), calc(100% - var(--space-32)));
  padding: var(--space-36);
  border: var(--border-width) solid var(--color-dialog-edge);
  border-radius: var(--space-8);
  color: inherit;
  background: var(--color-dialog-surface);
}
dialog::backdrop { background: var(--color-overlay); }
.close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-10);
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  background: transparent;
  border: 0;
  color: inherit;
}

@media (max-width: 1100px) {
  .hero-content {
    width: var(--center);
    margin-left: var(--center);
    padding-right: clamp(var(--space-24), var(--section-gap-fluid), var(--space-48));
  }

  #hero-title { font-size: min(var(--type-hero-tablet), var(--type-hero-width-limit)); }
}

@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero {
    --hero-height: var(--hero-min-portrait);
    align-items: end;
  }

  .scene { transform: translate(var(--scene-offset-portrait), var(--center-offset)); }

  .hero::after {
    --hero-scrim: var(--hero-scrim-mobile);
  }

  .hero-content {
    width: var(--hero-content-portrait);
    margin: 0 auto;
    padding: var(--hero-padding-portrait);
  }

  #hero-title { font-size: min(var(--type-hero-portrait), var(--type-hero-width-limit)); }
  .hero-content p { margin-top: var(--size-icon); }
  .actions { margin-top: var(--space-24); }
}

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .hero-content {
    padding-top: var(--hero-tablet-inset);
    --hero-content-bottom: max(calc(var(--story-overlap) + var(--hero-tablet-story-gap)), env(safe-area-inset-bottom));
  }

  .hero::after {
    --hero-scrim: var(--hero-scrim-tablet);
  }
}

@media (max-width: 480px) {
  .actions { display: grid; gap: var(--space-10); }
  .button { padding-inline: var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  .lamp, .beam, .reflection { animation: none; }
}

.site-header {
  position: fixed;
  z-index: var(--layer-header);
  top: max(var(--space-18), env(safe-area-inset-top));
  left: var(--center);
  transform: translateX(var(--center-offset));
  width: calc(100% - var(--space-48));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-6) var(--space-10) var(--space-6) var(--space-24);
  border: var(--border-width) solid var(--card-edge);
  border-radius: var(--space-18);
  background: var(--header-surface);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-shadow);
}

.brand {
  text-decoration: none;
  font-size: var(--space-18);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-brand);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav a, .materials-menu summary, .nav-order, .menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--touch-target);
  padding: var(--space-9) var(--size-14);
  border: var(--border-width) solid transparent;
  border-radius: var(--space-10);
  text-decoration: none;
  font-size: var(--size-14);
  font-weight: var(--weight-semibold);
  color: var(--color-nav-text);
  background: transparent;
}

.menu-toggle:hover { background: var(--glass-hover); }

.site-nav a, .materials-menu summary { font-weight: var(--weight-nav); }

.site-nav a:is(:hover, :focus-visible, [aria-current]) {
  color: var(--action-fill);
}

.site-nav a:focus-visible { outline-color: var(--action-fill); }

.materials-menu { position: relative; }

.materials-menu summary {
  cursor: pointer;
  list-style: none;
}

.materials-menu summary::-webkit-details-marker { display: none; }
.materials-menu summary:is(:hover, :focus-visible),
.materials-menu[open] summary { color: var(--action-fill); }
.materials-menu[open] summary .icon { rotate: 180deg; }

.materials-menu-links {
  position: absolute;
  inset: calc(100% + var(--space-8)) auto auto 0;
  min-inline-size: 100%;
  padding: var(--space-6);
  border: var(--border-width) solid var(--card-edge);
  border-radius: var(--radius-button);
  background: var(--mobile-header-surface);
  box-shadow: var(--menu-shadow);
}

.materials-menu-links a { display: flex; }
.materials-menu-links a:is(:hover, :focus-visible, [aria-current]) { background: var(--action-glass); }

.nav-order {
  inline-size: var(--touch-target);
  justify-content: center;
  padding: 0;
  border-color: var(--action-edge);
  background: var(--action-glass);
  color: var(--action-text);
}

.nav-order:hover { background: var(--action-glass-hover); }
.menu-toggle { display: none; }

.directions {
  padding: clamp(var(--space-48), var(--section-padding-fluid), var(--section-padding-max)) max(clamp(var(--space-24), var(--section-gutter-fluid), var(--section-gutter-max)), calc((100% - var(--container-width)) / 2));
  background: var(--directions-surface);
}

.directions h2 {
  font-size: var(--type-section-title);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
}

.direction-grid {
  display: grid;
  grid-template-columns: repeat(var(--card-columns), minmax(0, 1fr));
  gap: var(--size-14);
  margin-top: clamp(var(--space-24), var(--section-gap-fluid), var(--touch-target));
}

.direction-card {
  padding: clamp(var(--size-icon), var(--card-padding-fluid), var(--card-padding-max));
  border: var(--border-width) solid var(--card-edge);
  border-radius: var(--space-16);
  background: var(--card-surface);
  box-shadow: var(--card-highlight);
}

.direction-card .icon { width: var(--space-32); height: var(--space-32); color: var(--accent); }
.direction-card h3 { margin: var(--space-22) 0 var(--space-8); font-size: var(--type-card-title); }
.direction-card p { color: var(--color-muted); line-height: var(--leading-copy); }

@media (max-width: 640px) {
  .direction-grid { grid-template-columns: var(--card-column-mobile); }
  .direction-card h3 { margin-top: var(--size-14); }
}

#process { padding-block: var(--process-padding); }
#process-title { font-size: var(--process-title-size); }

.process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--card-columns), minmax(0, 1fr));
  gap: var(--space-16);
  padding: 0;
  margin: var(--space-24) 0 0;
  list-style: none;
}

.process-list::before,
.process-list::after {
  content: "";
  position: absolute;
  inset: calc(var(--process-number-size) / 2) 0 auto;
  height: var(--border-width);
  background: var(--process-line);
  pointer-events: none;
}

.process-list::after {
  background: var(--process-number-ink);
  transform-origin: left;
}

.process-step {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.process-number {
  display: table;
  padding-inline-end: var(--space-12);
  background: var(--directions-surface);
  color: var(--process-number-ink);
  font-size: var(--process-number-size);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.process-photo {
  width: var(--process-photo-width);
  margin-block: var(--space-12);
  aspect-ratio: var(--process-photo-ratio);
  border-radius: var(--radius-button);
  overflow: clip;
}

.process-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.process-photo img { object-fit: cover; }
.process-step h3 { margin: 0; font-size: var(--process-step-size); }
.process-step p {
  margin-top: var(--space-8);
  color: var(--color-muted);
  font-size: var(--size-14);
  line-height: var(--leading-copy);
}

@media (min-width: 641px) {
  .process-list { row-gap: 0; }

  .process-step {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }

  .process-number { justify-self: start; }
  .process-copy { display: contents; }
}

@media (prefers-reduced-motion: no-preference) {
  .process-list.is-revealed::after {
    animation: process-line-draw var(--process-line-duration) ease-out both;
  }

  @keyframes process-line-draw { from { scale: 0 1; } }
}

@media (max-width: 640px) {
  .process-list {
    grid-template-columns: var(--card-column-mobile);
    padding-inline-start: var(--space-16);
  }

  .process-list::before,
  .process-list::after {
    inset: 0 auto 0 0;
    width: var(--border-width);
    height: auto;
  }

  .process-list::after { transform-origin: top; }

  .process-step {
    display: grid;
    grid-template-columns: var(--process-photo-mobile-width) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8) var(--space-12);
  }

  .process-number { grid-column: 1 / -1; }
  .process-photo { margin: 0; }

  @media (prefers-reduced-motion: no-preference) {
    .process-list.is-revealed::after { animation-name: process-line-draw-vertical; }
    @keyframes process-line-draw-vertical { from { scale: 1 0; } }
  }
}

.order-form {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.order-form label { display: grid; gap: var(--space-6); }

.order-form :is(input, textarea) {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-10);
  border: var(--border-width) solid var(--color-dialog-edge);
  border-radius: var(--radius-button);
  background: var(--page-surface);
  color: inherit;
  font: inherit;
}

.order-form textarea { resize: vertical; }
.order-form button:disabled { cursor: default; background: var(--card-surface); color: var(--color-muted); }

@media (max-width: 900px) {
  .site-header { width: calc(100% - var(--space-32)); padding: var(--space-6) var(--space-8) var(--space-6) var(--space-15); }
  .menu-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    inset: calc(100% + var(--space-8)) 0 auto;
    flex-direction: column;
    align-items: stretch;
    max-block-size: calc(100dvh - var(--header-anchor-offset));
    overflow-y: auto;
    padding: var(--space-8);
    border: var(--border-width) solid var(--glass-edge);
    border-radius: var(--size-14);
    background: var(--glass-mobile-surface);
    box-shadow: var(--menu-shadow);
  }
  .menu-toggle[aria-expanded="true"] + .site-nav { display: flex; }
  .materials-menu summary { display: flex; justify-content: space-between; }
  .materials-menu-links {
    position: static;
    margin-inline: var(--size-14);
    border: 0;
    border-inline-start: var(--border-width) solid var(--card-edge);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav-order { align-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header, [data-intro] > *, .is-revealed, dialog[open],
  .menu-toggle[aria-expanded="true"] + .site-nav {
    animation: reveal var(--reveal-duration) var(--reveal-easing) both;
  }

  [data-intro] > :nth-child(2), .direction-grid > :nth-child(2).is-revealed {
    animation-delay: var(--reveal-step);
  }

  [data-intro] > :nth-child(n + 3), .direction-grid > :nth-child(3).is-revealed {
    animation-delay: calc(var(--reveal-step) + var(--reveal-step));
  }

  @keyframes reveal {
    from { opacity: 0; translate: 0 var(--reveal-shift); }
    to { opacity: 1; translate: none; }
  }
}

.materials-intro { text-align: center; }

.materials-intro p {
  max-width: var(--materials-intro-width);
  margin: var(--space-16) auto 0;
  color: var(--color-muted);
  line-height: var(--leading-copy);
}


.material-photo {
  aspect-ratio: var(--material-photo-ratio);
  background: var(--materials-image) left center / var(--materials-image-size) no-repeat;
}

.material-photo-glass { background-position: center; }
.material-photo-metal { background: var(--materials-metal-photo) center / cover no-repeat; }
.material-photo-wood { background: var(--materials-wood-photo) center / cover no-repeat; }

.material-copy { padding: clamp(var(--space-16), var(--card-padding-fluid), var(--card-padding-max)); }
.material-copy h3 { margin: 0; }

.material-benefits {
  display: grid;
  grid-template-columns: repeat(var(--material-benefit-columns), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: var(--space-32) 0 0;
  padding: 0;
  position: relative;
  isolation: isolate;
  color: var(--color-muted);
  text-align: center;
  list-style: none;
}

@media (max-width: 640px) {
  .material-benefits {
    grid-template-columns: repeat(var(--material-benefit-columns-compact), minmax(0, 1fr));
  }
}

.materials {
  padding-inline: 0;
  background:
    var(--materials-top-fade) top / 100% var(--section-join-depth) no-repeat,
    var(--materials-fade) bottom / 100% var(--materials-fade-depth) no-repeat,
    var(--materials-backdrop) center / cover no-repeat var(--directions-surface);
}

.materials-intro h2 span { color: var(--action-fill); }

.materials-intro, .materials-grid {
  width: min(var(--container-width), calc(100% - var(--materials-gutters)));
  margin-inline: auto;
}

.materials-grid { gap: var(--materials-grid-gap); }

.material-card {
  display: grid;
  grid-template-rows: var(--materials-photo-rows);
  border-color: var(--materials-frame);
  border-top-color: var(--materials-frame-highlight);
  overflow: hidden;
  padding: 0;
  border-radius: var(--materials-radius);
}

.material-photo {
  grid-area: 1 / 1;
  min-width: 0;
  mask-image: var(--materials-photo-fade);
}

.material-copy {
  grid-area: 2 / 1 / 3;
  margin-top: var(--materials-copy-overlap);
  z-index: 1;
  display: grid;
  align-content: start;
  gap: var(--space-8);
}

.material-heading {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.material-heading .icon {
  width: var(--type-card-title);
  height: var(--type-card-title);
  color: var(--action-fill);
}

.material-benefits .icon {
  width: var(--materials-icon-size);
  height: var(--materials-icon-size);
  color: var(--action-fill);
}

.material-benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--layer-scrim);
  pointer-events: none;
  border-block: var(--border-width) solid var(--card-edge);
  background: var(--materials-strip-surface);
  mask-image: var(--materials-strip-fade);
}

.material-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-24) var(--space-12);
  text-align: start;
  overflow-wrap: anywhere;
}

.material-benefits li + li { border-inline-start: var(--border-width) solid var(--card-edge); }

@media (max-width: 640px) {
  .material-benefits::before { mask-image: var(--materials-strip-fade-compact); }
  .material-benefits li { justify-content: start; }
  .material-benefits li:nth-child(n + 3) { border-block-start: var(--border-width) solid var(--card-edge); }
  .material-benefits li:nth-child(odd) { border-inline-start: 0; }
}

html { scrollbar-gutter: stable; scroll-padding-top: var(--header-anchor-offset); }

.commission, .site-footer {
  color: var(--editorial-ink);
  background: var(--editorial-surface);
}

.editorial-heading {
  display: grid;
  grid-template-columns: var(--editorial-columns);
  gap: var(--editorial-gap);
  align-items: start;
}

.editorial-heading p {
  max-width: var(--editorial-measure);
  font-size: var(--type-editorial-copy);
  line-height: var(--leading-copy);
}

.capabilities { padding-block-start: var(--capabilities-top-padding); }

.capabilities h2 { font-size: var(--capabilities-title-size); }

.capabilities-note {
  margin: var(--space-32) 0 0;
  font-size: var(--type-card-title);
  color: var(--color-muted);
  line-height: var(--leading-copy);
}

.faq-more {
  display: inline-block;
  margin-top: var(--space-24);
  color: var(--action-fill);
}

.capability a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.capabilities-picker {
  display: grid;
  grid-template-columns: var(--capabilities-picker-columns);
  align-items: start;
  gap: var(--works-column-gap);
  margin-top: var(--space-24);
}

.capabilities-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.capabilities-options label {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--capabilities-option-height);
  font-size: var(--capabilities-option-size);
  line-height: var(--leading-copy);
  font-weight: var(--weight-semibold);
  padding: var(--space-8) var(--space-12);
  border-bottom: var(--border-width) solid var(--card-edge);
  cursor: pointer;
}

.capabilities-options input { accent-color: var(--action-fill); }
.capabilities-options label:has(:checked) {
  background: var(--card-surface);
  color: var(--action-fill);
}

.capabilities-results,
.capability { display: grid; gap: var(--space-12); }
.capability[hidden] { display: none; }

.capability-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.capability-photos button {
  overflow: hidden;
  border-radius: var(--works-photo-radius);
}

.capability-photos img { display: block; width: 100%; height: auto; }
.capability a { justify-self: start; }
.capability p { color: var(--color-muted); line-height: var(--leading-copy); }
.capability a { color: var(--action-fill); text-underline-offset: var(--focus-offset); }

@media (prefers-reduced-motion: no-preference) {
  .capability:not([hidden]) { animation: back-top-appear var(--interactive-duration) ease-out; }
  .capability-photos img { transition: scale var(--reveal-duration) ease-out; }
  .capability-photos button:is(:hover, :focus-visible) img { scale: var(--capability-image-scale); }
}

@media (max-width: 640px) {
  .capabilities-picker, .capability-photos { grid-template-columns: var(--card-column-mobile); }
}

.commission-list { margin-top: var(--space-24); }

.commission-list details {
  border-top: var(--border-width) solid var(--editorial-rule);
}

.commission-list summary {
  padding-block: var(--space-12);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.commission-list details p {
  margin-bottom: var(--space-12);
  font-size: var(--size-14);
}

.faq .commission-list { margin-top: 0; }
.faq-list details { border-color: var(--card-edge); }
.faq-list details p { color: var(--color-muted); }

.commission-layout { row-gap: var(--space-24); }
.commission-layout h2 { grid-column: 1 / -1; }
.commission-example { margin: var(--space-24) 0 0; min-width: 0; }
.commission-copy { min-width: 0; }
.commission-copy > p { max-width: none; }

.commission-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.commission-visuals > * {
  overflow: hidden;
  border: var(--border-width) solid var(--editorial-rule);
  border-radius: var(--radius-button);
}

.commission-drawing {
  display: grid;
  place-items: center;
  background: var(--editorial-surface);
}

.commission-drawing svg {
  display: block;
  width: 100%;
  padding: var(--space-8);
  stroke: currentColor;
  stroke-width: var(--process-drawing-stroke);
  fill: none;
}

.commission-frame { stroke-width: var(--process-drawing-stroke); }
.commission-dimensions {
  stroke: var(--editorial-ink);
  stroke-width: var(--border-width);
  opacity: var(--commission-dimension-opacity);
}

.commission-visuals img { display: block; width: 100%; height: 100%; aspect-ratio: var(--work-cover-ratio); object-fit: cover; }
.commission-example figcaption { margin-block-start: var(--space-8); font-size: var(--size-14); }

.commission-list summary::marker { content: ""; }
.commission-list summary::-webkit-details-marker { display: none; }
.commission-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
}

.commission-list summary::after {
  content: "+";
  font-size: var(--type-card-title);
  line-height: 1;
}

.commission-list details[open] summary::after { content: "−"; }

.commission-order {
  min-height: var(--space-48);
  padding-inline: var(--space-24);
  font-size: var(--space-16);
  margin-top: var(--space-24);
  background: var(--editorial-ink);
  color: var(--editorial-surface);
}

.commission-order:hover {
  border-color: var(--editorial-rule);
  color: var(--editorial-ink);
}

.site-footer :focus-visible, .commission :focus-visible { outline-color: var(--editorial-ink); }


@media (max-width: 760px) {
  .editorial-heading { grid-template-columns: var(--card-column-mobile); }
}



.weld { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :is(.button, .nav-order, .menu-toggle):not(:disabled) {
    position: relative;
    overflow: hidden;
  }

  :is(.button, .nav-order, .menu-toggle):not(:disabled)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--button-sheen);
    translate: var(--button-sheen-start);
  }

  :is(.button, .nav-order, .menu-toggle):not(:disabled):is(:hover, :focus-visible)::after {
    animation: button-sheen var(--button-sheen-duration) var(--reveal-easing);
  }

  @keyframes button-sheen {
    to { translate: var(--button-sheen-end); }
  }

  .weld {
    display: block;
    position: absolute;
    left: var(--weld-position-x);
    top: var(--weld-position-y);
    pointer-events: none;
  }

  .weld::before {
    content: "";
    position: absolute;
    width: var(--weld-glow-size);
    aspect-ratio: 1;
    translate: var(--center-offset) var(--center-offset);
    background: var(--weld-glow);
    animation: weld-glow var(--weld-cycle) linear infinite;
  }

  .weld i {
    position: absolute;
    width: var(--spark-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--spark-color);
    box-shadow: var(--spark-shadow);
    animation: weld-spark var(--weld-cycle) ease-out infinite;
  }

  .weld i:nth-child(1) { --spark-path: var(--spark-path-one); }
  .weld i:nth-child(2) { --spark-path: var(--spark-path-two); }
  .weld i:nth-child(3) { --spark-path: var(--spark-path-three); }
  .weld i:nth-child(4) { --spark-path: var(--spark-path-four); }

  @keyframes weld-glow {
    0%, 45%, 51%, 100% { opacity: 0; }
    46% { opacity: var(--weld-flash-opacity); }
  }

  @keyframes weld-spark {
    0%, 45% { opacity: 0; translate: none; }
    46% { opacity: 1; translate: none; }
    52%, 100% { opacity: 0; translate: var(--spark-path); }
  }
}

.site-footer {
  position: relative;
  isolation: isolate;
  border-start-start-radius: var(--materials-radius);
  border-start-end-radius: var(--materials-radius);
  overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
  .hero:not(.effects-active) :is(.lamp, .beam, .reflection, .weld i),
  .hero:not(.effects-active) .weld::before {
    animation-play-state: paused;
  }
}

@media (max-width: 900px) {
  .site-header {
    backdrop-filter: none;
    background: var(--mobile-header-surface);
  }

}

@media (max-width: 640px) {
  .hero { --hero-height: var(--mobile-hero-min); }
  .hero-content { padding: var(--mobile-hero-padding); }

}

.not-found-header, .not-found {
  width: min(var(--not-found-width), 100% - var(--not-found-gutter) * 2);
  margin-inline: auto;
}

.not-found-header {
  padding-block: var(--space-24);
  border-bottom: var(--not-found-rule);
}

.not-found {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--editorial-gap);
  padding-block: var(--not-found-padding);
}

.not-found-copy, .not-found-actions { display: flex; gap: var(--space-16); }
.not-found-copy { flex-direction: column; align-items: flex-start; }
.not-found-copy :is(h1, p) { margin: 0; }
.not-found-copy p {
  max-width: var(--editorial-measure);
  color: var(--color-muted);
  font-size: var(--type-editorial-copy);
}
.not-found-actions { flex-wrap: wrap; margin-top: var(--space-8); }
.not-found-art { color: var(--action-fill); }
.not-found-art svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--not-found-stroke);
}
.not-found-guides {
  opacity: var(--not-found-guide-opacity);
  stroke-dasharray: var(--cta-blueprint-dash);
}

@media (max-width: 760px) {
  .not-found { grid-template-columns: minmax(0, 1fr); }
  .not-found-art { grid-row: 1; width: min(100%, var(--not-found-art-compact)); }
}

@media (max-width: 400px) {
  .not-found-actions { width: 100%; }
  .not-found-actions .button { flex: 1 0 100%; justify-content: center; }
}

.menu-toggle {
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

.footer-channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-messenger span { display: flex; }


.legal-page { max-width: var(--container-width); margin-inline: auto; }
.legal-page h1, .not-found h1 { font-size: var(--type-section-title); }
.legal-page p { margin-block: var(--space-16); line-height: var(--leading-copy); }

@media (min-width: 641px) and (max-width: 900px) {
  .material-benefits {
    grid-template-columns: repeat(var(--material-benefit-columns-compact), minmax(0, 1fr));
  }
  .material-benefits li:nth-child(odd) { border-inline-start: 0; }
  .material-benefits li:nth-child(n + 3) { border-block-start: var(--border-width) solid var(--card-edge); }
}

@media (max-width: 640px) {
  .materials-grid {
    grid-template-columns: repeat(var(--card-columns), var(--carousel-card-width)) var(--carousel-end-padding);
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }

  .materials-grid::after { content: ""; }
  .materials-grid > article { scroll-snap-align: start; }
  .materials-grid:focus-visible { outline-color: var(--action-fill); }
  .materials-grid > .is-revealed { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .footer-top a, .site-nav a, .button, .nav-order, .menu-toggle {
    transition: background-color var(--interactive-duration), color var(--interactive-duration), border-color var(--interactive-duration);
  }
}

.messenger-logo {
  width: var(--messenger-logo-size);
  height: var(--messenger-logo-size);
  fill: currentColor;
}

.works {
  padding: clamp(var(--space-48), var(--works-padding-fluid), var(--works-padding-max)) var(--works-gutter);
  background: var(--editorial-surface);
  color: var(--editorial-ink);
}

.works-inner {
  max-width: var(--container-width);
  margin-inline: auto;
}

.works-heading h2 {
  font-size: var(--type-section-title);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
}

.works-heading p {
  margin: var(--space-12) 0 var(--space-24);
  line-height: var(--leading-copy);
}

.works-category {
  margin-top: var(--works-row-gap);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--editorial-rule);
}

.works-group {
  margin: 0 0 var(--space-24);
  font-size: var(--type-card-title);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(var(--works-columns), minmax(0, 1fr));
  align-items: start;
  gap: var(--works-row-gap) var(--works-column-gap);
}

.work-card { margin: 0; min-width: 0; }

@media (max-width: 640px) {
  .works-grid { grid-template-columns: var(--card-column-mobile); }

  .works-grid-paginated:not(:has(.work-card:not([hidden]) ~ .work-card:not([hidden])))::after {
    content: "";
    aspect-ratio: var(--work-cover-ratio);
    margin-block-end: var(--works-caption-min);
  }
}

.works-pages:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.works-grid figcaption { min-block-size: var(--works-caption-min); }

.works-pages .button {
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  min-height: 0;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border-color: var(--editorial-rule);
  color: var(--editorial-ink);
}

.works-pages .button:not(:disabled):is(:hover, :focus-visible) {
  background: var(--editorial-ink);
  color: var(--editorial-surface);
}

.works-pages .button:disabled {
  cursor: default;
  color: var(--editorial-ink);
  opacity: var(--works-disabled-opacity);
}

.works-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--works-row-gap);
  padding-top: var(--space-24);
}

.works-invite p { font-size: var(--type-card-title); }

[data-photo-src] {
  appearance: none;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.work-card > button {
  position: relative;
  width: 100%;
  display: block;
  border-radius: var(--works-photo-radius);
  overflow: hidden;
  background: var(--card-surface);
}
.work-card .work-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--work-cover-ratio);
  object-fit: cover;
}
.work-photo-count {
  position: absolute;
  inset-inline-start: var(--space-12);
  inset-block-end: var(--space-12);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-button);
  background: var(--works-arrow-surface);
  color: var(--page-text);
  font-size: var(--size-14);
}
.work-card figcaption {
  padding-block: var(--space-12);
}

.work-title { font-weight: var(--weight-semibold); }

.work-open {
  position: absolute;
  inset-block-start: var(--space-12);
  inset-inline-end: var(--space-12);
  display: grid;
  place-items: center;
  width: var(--touch-target);
  aspect-ratio: 1;
  border-radius: var(--radius-button);
  background: var(--works-arrow-surface);
  color: var(--action-fill);
}

.work-card > button:is(:hover, :focus-visible) .work-open {
  background: var(--action-fill);
  color: var(--action-ink);
}

html:has(.photo-viewer[open]) { overflow: hidden; }

.photo-viewer {
  width: min(var(--photo-viewer-width), calc(100% - var(--space-24)), calc(var(--photo-viewer-image-height) * var(--photo-viewer-ratio-width)));
  max-height: var(--photo-viewer-image-height);
  padding: 0;
  border: 0;
  border-radius: var(--works-photo-radius);
  background: transparent;
  overflow: hidden;
}

.photo-viewer::backdrop { background: var(--photo-viewer-backdrop); }
.photo-viewer figure { position: relative; margin: 0; }

.photo-viewer img {
  display: block;
  width: 100%;
  aspect-ratio: var(--work-cover-ratio);
  object-fit: contain;
  background: var(--page-surface);
}

.photo-viewer .close {
  z-index: 1;
  inset: var(--space-12) var(--space-12) auto auto;
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: 50%;
  background: var(--photo-viewer-control);
  color: var(--action-fill);
}

.photo-viewer .close:is(:hover, :focus-visible, :active) {
  background: var(--action-fill);
  color: var(--action-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .photo-viewer .close .icon { transition: rotate var(--interactive-duration) ease-out; }
  .photo-viewer .close:is(:hover, :focus-visible, :active) .icon { rotate: var(--photo-viewer-close-turn); }
}

.photo-navigation:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-inline-start: auto;
}

.photo-toolbar {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-6) var(--space-12);
  padding: var(--space-32) var(--space-12) var(--space-12);
  background: var(--photo-viewer-scrim);
  font-size: var(--size-14);
  overflow-wrap: anywhere;
  pointer-events: none;
}

.photo-navigation .button {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  justify-content: center;
  padding: var(--space-6);
  background: var(--photo-viewer-control);
  pointer-events: auto;
}

.photo-navigation .button:is(:hover, :focus-visible) {
  background: var(--action-fill);
  color: var(--action-ink);
}

.hero-content .hero-kicker {
  margin: 0 0 var(--space-16);
  color: var(--action-fill);
  font-size: var(--size-14);
  letter-spacing: var(--materials-kicker-tracking);
  text-transform: uppercase;
}


@media (max-width: 1100px) {
  #top { --story-overlap: var(--story-overlap-tablet); }
}

@media (max-width: 640px) {
  #top { --story-overlap: var(--story-overlap-mobile); }
}

.workshop-story {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(var(--story-width), calc(100% - var(--space-48)));
  margin: calc(-1 * var(--story-overlap)) auto 0;
  overflow: hidden;
  border-radius: var(--works-photo-radius);
  background: var(--editorial-surface);
  color: var(--editorial-ink);
}

.hero-content { padding-bottom: var(--hero-content-bottom, max(calc(var(--story-overlap) + var(--space-12)), var(--space-32))); }

.workshop-story-copy {
  align-self: center;
  padding: var(--story-padding-block) var(--story-padding);
}

.workshop-story h2 { font-size: var(--type-section-title); line-height: var(--leading-section); }
@media (min-width: 761px) and (max-width: 1100px) {
  .workshop-story h2 { font-size: var(--story-tablet-title); }
}
.workshop-story p { margin: var(--space-16) 0 0; line-height: var(--leading-copy); }
.workshop-story img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: var(--story-photo-ratio);
}

@media (min-width: 641px) {
  .workshop-story img {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--story-photo-share);
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (max-width: 640px) {
  .workshop-story { grid-template-columns: minmax(0, 1fr); }
}

.works-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.works-index a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--editorial-rule);
  border-radius: var(--radius-button);
  text-decoration: none;
}

.works-index a:is(:hover, :focus-visible, [aria-current="true"]) {
  background: var(--editorial-ink);
  color: var(--editorial-surface);
}


#order-dialog {
  max-height: calc(100dvh - var(--space-32));
  overflow-y: auto;
}

.order-form input[type="file"] { min-width: 0; }
.order-status:empty { display: none; }
.button.contact-launcher {
  position: fixed;
  inset-inline-end: max(var(--space-16), env(safe-area-inset-right));
  inset-block-end: max(var(--space-16), env(safe-area-inset-bottom));
  z-index: var(--layer-header);
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  min-block-size: var(--touch-target);
  justify-content: center;
  padding: 0;
}

body:has(.back-top:not([hidden])) .button.contact-launcher {
  inset-block-end: calc(max(var(--space-16), env(safe-area-inset-bottom)) + var(--touch-target) + var(--space-8));
}

.contact-dialog {
  max-block-size: calc(100dvh - var(--space-32));
  overflow-y: auto;
}

.contact-dialog h2 { padding-inline-end: var(--space-32); }

.contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-block: var(--space-24);
  padding: 0;
  list-style: none;
}

.contact-options li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--size-14);
  color: var(--action-fill);
}

.contact-dialog > .button { margin-block-start: var(--space-16); }

.back-top:not([hidden]) {
  position: fixed;
  inset-inline-end: max(var(--space-16), env(safe-area-inset-right));
  inset-block-end: max(var(--space-16), env(safe-area-inset-bottom));
  z-index: var(--layer-header);
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: var(--border-width) solid var(--card-edge);
  border-radius: var(--radius-button);
  background: var(--page-surface);
  color: var(--action-fill);
  box-shadow: var(--menu-shadow);
}

.back-top:is(:hover, :focus-visible) {
  background: var(--action-fill);
  color: var(--action-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .back-top:not([hidden]) { animation: back-top-appear var(--interactive-duration) ease-out; }
}

@keyframes back-top-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.featured-work {
  border-block-start: var(--border-width) solid var(--card-edge);
}

.featured-work .editorial-heading { align-items: center; }

.featured-work-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--works-photo-radius);
}

.workshop-section-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-16);
}

.workshop-section-copy .button { margin-block-start: var(--space-8); }

.commission-estimate {
  padding: clamp(var(--space-16), 3vw, var(--space-36));
  border: var(--border-width) solid var(--editorial-rule);
  border-radius: var(--works-photo-radius);
}

.commission-estimate h3 {
  margin: 0 0 var(--space-16);
  font-size: var(--type-card-title);
}

.estimate-factors { margin: 0; }

.estimate-factors > div {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-12);
  border-block-start: var(--border-width) solid var(--editorial-rule);
}

.estimate-factors dt { font-weight: var(--weight-semibold); }

.estimate-factors dd {
  margin: 0;
  font-size: var(--size-14);
  line-height: var(--leading-copy);
}

.faq-contact p { margin-top: var(--space-16); }

.faq-actions { margin-top: var(--space-24); }

.production-head { align-items: center; }

.production-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block-start: var(--border-width) solid var(--card-edge);
  border-inline-start: var(--border-width) solid var(--card-edge);
}

.production-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-8);
  padding: var(--production-stat-padding);
  border-inline-end: var(--border-width) solid var(--card-edge);
  border-block-end: var(--border-width) solid var(--card-edge);
}

.production-stats dt {
  color: var(--color-muted);
  font-size: var(--size-14);
  line-height: var(--leading-copy);
}

.production-stats dd {
  margin: 0;
  color: var(--action-fill);
  font-size: var(--production-stat-size);
  line-height: var(--leading-section);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.production-photo { margin: var(--space-36) 0 0; }

.production-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.final-cta {
  width: min(var(--story-width), calc(100% - var(--space-48)));
  margin: 0 auto var(--cta-footer-gap);
  padding: var(--cta-padding) var(--cta-gutter);
  border: var(--border-width) solid var(--card-edge);
  border-radius: var(--materials-radius);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--card-surface);
}

.cta-blueprint {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--cta-blueprint-ink);
  stroke-width: var(--cta-blueprint-stroke);
  opacity: var(--cta-blueprint-opacity);
  pointer-events: none;
}

.cta-blueprint-guides { stroke-dasharray: var(--cta-blueprint-dash); }

.final-cta .editorial-heading {
  align-items: center;
  grid-template-columns: var(--cta-columns);
  gap: var(--space-24);
}

.final-cta h2 { font-size: var(--cta-title-size); }
.final-cta .button { justify-self: end; }

@media (max-width: 640px) {
  .final-cta .button { justify-self: start; }
  .final-cta .editorial-heading { grid-template-columns: var(--card-column-mobile); }
}

.site-footer { padding-block: var(--footer-padding); }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: var(--space-32);
  padding-block-end: var(--space-36);
  border-block-end: var(--border-width) solid var(--editorial-rule);
}

.footer-top nav,
.footer-brand,
.footer-contacts {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-12);
  min-width: 0;
}

.footer-brand .brand { font-size: var(--type-card-title); }
.footer-brand p { line-height: var(--leading-copy); }

.site-footer h2 {
  font-size: var(--size-14);
  font-weight: var(--weight-bold);
  letter-spacing: normal;
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-blueprint {
  display: block;
  width: 100%;
  fill: none;
  stroke: var(--editorial-ink);
  stroke-width: var(--cta-blueprint-stroke);
  opacity: var(--footer-blueprint-opacity);
  pointer-events: none;
}

.footer-blueprint-guides { stroke-dasharray: var(--cta-blueprint-dash); }

.footer-contacts address,
.footer-contacts dl {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  font-style: normal;
}

.footer-contacts dt { font-size: var(--size-14); }
.footer-contacts dd { margin: 0; overflow-wrap: anywhere; }
.footer-contacts dd span { font-size: var(--size-14); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  padding-block-start: var(--space-16);
  font-size: var(--size-14);
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(var(--works-columns), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .footer-brand, .footer-contacts { grid-column: 1 / -1; }
  .footer-blueprint { max-width: var(--footer-blueprint-mobile-width); }
  .site-footer { padding-block-end: calc(var(--footer-padding) + var(--touch-target)); }
}

.faq-page {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-block-start: var(--faq-top-inset);
}

.faq-page h1 { font-size: var(--type-section-title); }
.faq-intro {
  margin-block: var(--space-12) var(--space-32);
  color: var(--color-muted);
  line-height: var(--leading-copy);
}

.faq-layout {
  display: grid;
  grid-template-columns: var(--capabilities-columns);
  gap: var(--works-column-gap);
  align-items: start;
}

.faq-topics { display: grid; }
.faq-topic + .faq-topic:not([hidden]) { margin-block-start: var(--space-24); }
.faq-topic h2 { margin-block-end: var(--space-16); font-size: var(--type-card-title); }
.faq-page .button-primary { color: var(--action-ink); }

@media (max-width: 640px) {
  .faq-layout { grid-template-columns: var(--card-column-mobile); }
  .faq-topics { display: flex; }
}

.material-service-link {
  display: grid;
  place-items: center;
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  margin-inline-start: auto;
  border: var(--border-width) solid var(--materials-frame-highlight);
  border-radius: 50%;
}

.material-service-link:is(:hover, :focus-visible) { background: var(--action-fill); }
.material-service-link:is(:hover, :focus-visible) .icon { color: var(--action-ink); }

.service-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-block-size: var(--service-hero-height);
  padding-block: var(--faq-top-inset) var(--service-hero-bottom);
  overflow: clip;
}

.service-hero::before,
.service-hero-image {
  position: absolute;
  inset: 0;
  z-index: var(--layer-scene);
  width: 100%;
  height: 100%;
}

.service-hero-image {
  display: block;
  object-fit: cover;
  object-position: var(--service-hero-photo-position);
}

.service-hero::before {
  content: "";
  z-index: var(--layer-scrim);
  background:
    var(--service-hero-join) bottom / 100% var(--service-hero-join-depth) no-repeat,
    var(--service-hero-scrim);
}

.service-switcher { margin: 0 0 var(--space-24); }

.service-switcher a {
  border-color: var(--color-secondary-edge);
  background: var(--color-secondary-surface);
}

.service-switcher a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: var(--action-fill);
  border-color: var(--action-fill);
  color: var(--action-ink);
}

.service-hero-copy {
  width: min(100%, var(--service-hero-copy-width));
  margin-block: auto;
}

.service-hero h1 {
  font-size: var(--service-hero-title-size);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  overflow-wrap: anywhere;
}

.service-hero h1 span { display: block; color: var(--action-fill); }
.service-hero-copy p { max-width: var(--editorial-measure); color: var(--color-hero-copy); }

@media (max-width: 760px) {
  .service-hero {
    --service-hero-photo-position: var(--service-hero-photo-position-mobile);
    --service-hero-scrim: var(--service-hero-scrim-mobile);
  }

  .service-hero-copy { margin-block: auto 0; }
}

.service-operations { background: var(--card-surface); }
.service-operations > p { margin-block-start: var(--space-12); color: var(--color-muted); }

.service-list {
  display: grid;
  grid-template-columns: repeat(var(--card-columns), minmax(0, 1fr));
  margin: var(--space-24) 0 0;
  gap: var(--space-24);
}

.service-list > div { padding-block-start: var(--space-16); border-block-start: var(--border-width) solid var(--card-edge); }
.service-list dt {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-block-size: var(--service-operation-icon-size);
  font-size: var(--type-card-title);
  font-weight: var(--weight-semibold);
}

.service-operation-icon {
  width: var(--service-operation-icon-size);
  height: var(--service-operation-icon-size);
  color: var(--action-fill);
  stroke-width: var(--process-drawing-stroke);
}

@media (prefers-reduced-motion: no-preference) {
  .service-list .is-revealed .service-operation-icon path {
    animation: service-icon-draw var(--service-icon-duration) var(--reveal-easing) both;
  }

  @keyframes service-icon-draw {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    to { stroke-dasharray: 1; stroke-dashoffset: 0; }
  }
}
.service-list dd { margin: var(--space-8) 0 0; color: var(--color-muted); line-height: var(--leading-copy); }

.service-gallery {
  display: grid;
  grid-template-columns: repeat(var(--works-columns), minmax(0, 1fr));
  gap: var(--space-24);
  margin-block: var(--space-24);
}

.service-gallery figure { margin: 0; }

.service-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--work-cover-ratio);
  object-fit: cover;
  border-radius: var(--works-photo-radius);
}

.service-gallery figcaption { margin-block-start: var(--space-8); }
.service-brief {
  width: min(var(--story-width), calc(100% - var(--space-48)));
  margin: 0 auto var(--cta-footer-gap);
  padding: var(--cta-padding) var(--cta-gutter);
  border-radius: var(--materials-radius);
}

.service-brief h2 { font-size: var(--cta-title-size); }

.service-brief .commission-order { margin-block-start: 0; }

@media (max-width: 900px) {
  .service-list { grid-template-columns: repeat(var(--works-columns), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .service-list, .service-gallery { grid-template-columns: var(--card-column-mobile); }
}

.contact-options a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.order-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  font-size: var(--size-14);
}

.order-form .order-consent input {
  width: var(--space-16);
  height: var(--space-16);
  margin: var(--space-6) 0 0;
  accent-color: var(--action-fill);
}

.order-consent a { display: inline-block; margin-inline-end: var(--space-8); }
.legal-page section { margin-block-start: var(--space-32); }
.legal-page section p, .legal-page section ul { margin-block-start: var(--space-12); }

.footer-credit {
  margin-inline-start: auto;
}

.cookie-notice {
  position: fixed;
  z-index: var(--layer-header);
  inset-inline-start: max(var(--space-16), env(safe-area-inset-left));
  inset-block-end: max(var(--space-16), env(safe-area-inset-bottom));
  width: min(var(--cookie-notice-width), calc(100% - var(--touch-target) - 3 * var(--space-16) - env(safe-area-inset-left) - env(safe-area-inset-right)));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: var(--space-12);
  border: var(--border-width) solid var(--card-edge);
  border-radius: var(--radius-button);
  background: var(--page-surface);
  box-shadow: var(--menu-shadow);
  color: var(--page-text);
  font-size: var(--size-14);
}

.cookie-notice p { flex: 1 1 var(--space-48); line-height: var(--leading-copy); }
.cookie-notice p a { color: var(--action-fill); }
.cookie-notice .button { min-height: var(--touch-target); justify-content: center; }
.legal-page [data-cookie-reset] { margin-block-start: var(--space-16); }

@media (max-width: 640px) {
  .footer-credit { flex-basis: 100%; }
}

.legal-document {
  max-inline-size: var(--container-width);
  line-height: var(--leading-copy);
}

.legal-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-block-end: var(--space-24);
}

.legal-document h1 { overflow-wrap: anywhere; }
.legal-edition { margin-block-start: var(--space-12); color: var(--color-muted); }
.legal-document section { max-inline-size: var(--legal-copy-width); }
.legal-document section h2 { font-size: var(--type-card-title); }

.legal-index {
  display: grid;
  gap: var(--space-12);
  margin-block-start: var(--space-32);
  justify-items: start;
}