:root {
  --paper: #f4f4f4;
  --stone: #e5e5e5;
  --charcoal: #292929;
  --white: #ffffff;
  --ink: #292929;
  --muted: #696969;
  --line: #d7d7d7;
  --red: #5b5b5b;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: clamp(24px, 5vw, 88px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
    Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button {
  border: 0;
  background: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 6px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 1px solid var(--red);
  outline-offset: 3px;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 300;
}
p {
  line-height: 1.8;
}
::selection {
  background: #62626230;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  background: white;
  color: var(--ink);
  padding: 12px;
  z-index: 100;
}
.skip:focus {
  top: 12px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
}
.quiet {
  color: var(--muted);
}
.page {
  animation: appear 0.55s var(--ease);
}
.page[hidden] {
  display: none !important;
}
.cc-added-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 32px);
  max-width: 1400px;
  margin: clamp(42px, 7vw, 112px) auto 0;
  padding: 0 var(--gutter);
}
.cc-added-image {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--stone);
}
.cc-added-image img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 160px;
  object-fit: contain;
}
@keyframes appear {
  from {
    opacity: 0.25;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 99px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 36px;
  z-index: 30;
  color: white;
  transition:
    background 0.3s,
    height 0.3s,
    color 0.3s;
  border-bottom: 1px solid #ffffff26;
}
.header.solid {
  background: rgba(245, 244, 242, 0.97);
  color: var(--ink);
  height: 82px;
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
}
.logo {
  width: 150px;
  flex-shrink: 0;
  display: block;
}
.logo img {
  height: auto;
  object-fit: contain;
}
.header.solid .logo img {
  filter: none;
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 25px;
}
.nav a {
  position: relative;
  font-size: 12px;
  white-space: nowrap;
  padding: 15px 0;
}
.nav a:after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.nav a:hover:after,
.nav a.active:after {
  transform: scaleX(1);
}
.tools {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
}
.tools .icon-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 8px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 44px;
  padding: 8px;
  position: relative;
}
.icon-btn:hover {
  color: var(--red);
}
.count-dot {
  position: absolute;
  right: 2px;
  top: 5px;
  background: var(--red);
  color: white;
  font-size: 9px;
  border-radius: 12px;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}
.count-dot:empty {
  display: none;
}
.hero {
  height: calc(100svh - 88px);
  min-height: min(560px, calc(100svh - 88px));
  max-height: 1150px;
  position: relative;
  background: #4f4f4f;
  color: white;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  object-position: 50% 60%;
  transition: opacity 0.35s;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #16161670 0%,
    #1616160d 30%,
    #16161620 54%,
    #16161670 100%
  );
  pointer-events: none;
}
.hero-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 110px 24px 150px;
}
.hero-center .eyebrow {
  margin-bottom: 30px;
  font-size: 10px;
  text-shadow: 0 1px 8px #00000066;
}
.hero h1 {
  font-size: clamp(58px, 7.4vw, 118px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px #00000022;
  font-weight: 300;
}
.hero-link {
  margin-top: 36px;
  font-size: 12px;
  display: flex;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid #ffffff75;
  padding: 12px 0;
}
.hero-link svg {
  width: 18px;
}
.hero-bottom {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  bottom: 36px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
}
.hero-caption {
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.8;
}
.hero-caption span {
  display: block;
  opacity: 0.65;
  font-size: 10px;
}
.scroll-link {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 20px;
}
.scroll-link svg {
  transform: rotate(90deg);
  width: 18px;
}
.intro {
  padding: 106px var(--gutter) 110px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.intro .eyebrow {
  padding-top: 10px;
}
.intro h2 {
  font-size: clamp(35px, 4vw, 62px);
  line-height: 1.17;
  letter-spacing: -0.015em;
  max-width: 860px;
}
.intro p {
  max-width: 590px;
  font-size: 14px;
  margin-top: 28px;
  color: var(--muted);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  font-size: 12px;
  border-bottom: 1px solid currentColor;
  padding: 13px 0;
  margin-top: 26px;
}
.text-link svg {
  width: 18px;
  transition: transform 0.3s;
}
.text-link:hover svg {
  transform: translateX(5px);
}
.text-link:hover {
  color: var(--red);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 35px;
}
.section-head h2 {
  font-size: clamp(32px, 3.5vw, 50px);
  letter-spacing: -0.015em;
}
.section-head .text-link {
  margin: 0;
}
.gallery-section {
  padding: 0 var(--gutter) 110px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
.card-image {
  flex-shrink: 0;
  display: block;
  width: 100%;
  height: clamp(310px, 37vw, 570px);
  padding: 0;
  overflow: hidden;
  background: #dcdcdc;
  position: relative;
  text-align: left;
}
.card-image img {
  transition: transform 0.9s var(--ease);
  object-position: center 55%;
}
.card-image:hover img {
  transform: scale(1.04);
}
.card-image:after {
  content: "";
  position: absolute;
  inset: 65% 0 0;
  background: linear-gradient(transparent, #1616165c);
  pointer-events: none;
}
.card-save {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f6f6f6e8;
  width: 38px;
  height: 38px;
  min-height: 38px;
  z-index: 1;
}
.card-save[aria-pressed="true"] {
  color: var(--red);
}
.card-save[aria-pressed="true"] svg {
  fill: #62626222;
}
.card-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.card-info h3 {
  font-size: 23px;
  letter-spacing: -0.015em;
}
.card-info p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.card-info svg {
  width: 19px;
}
.card-info a {
  flex: 1;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
}
.split-photo {
  min-height: 600px;
  position: relative;
  overflow: hidden;
  background: #b3b3b3;
}
.split-photo img {
  position: absolute;
  inset: 0;
  object-position: 50% 55%;
}
.split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 85px clamp(32px, 7vw, 120px);
}
.split-copy h2 {
  font-size: clamp(40px, 4.2vw, 68px);
  letter-spacing: -0.015em;
  line-height: 1.19;
  margin: 28px 0;
}
.split-copy p {
  font-size: 14px;
  color: var(--muted);
  max-width: 460px;
}
.dark {
  background: var(--ink);
  color: var(--paper);
}
.dark p.quiet,
.dark .split-copy p {
  color: #b8b8b8;
}
.dark .text-link {
  border-color: #8a8a8a;
}
.image-note {
  position: absolute;
  bottom: 18px;
  left: 24px;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0.1em;
  z-index: 2;
  background: #25252594;
  padding: 8px 12px;
}
.wide-story {
  height: 630px;
  position: relative;
  color: white;
}
.wide-story:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #18181863;
}
.wide-story img {
  position: absolute;
  inset: 0;
}
.wide-story .content {
  position: relative;
  z-index: 1;
  padding: 80px var(--gutter);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wide-story h2 {
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 820px;
  margin: 25px 0;
}
.wide-story p {
  font-size: 13px;
  max-width: 440px;
}
.journal {
  padding: 100px var(--gutter);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.journal-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.journal-card img {
  flex-shrink: 0;
  height: 260px;
  transition: filter 0.25s;
}
.journal-card:hover img {
  filter: brightness(0.9);
}
.journal-card .eyebrow {
  font-size: 9px;
  color: var(--muted);
  margin: 22px 0 12px;
}
.journal-card h3 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.journal-card h3 {
  margin-bottom: 20px;
}
.journal-card .text-link {
  margin-top: auto;
  align-self: flex-start;
}
.callout {
  padding: 70px var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.callout h2 {
  font-size: clamp(30px, 3.5vw, 50px);
  letter-spacing: -0.015em;
}
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 38px;
  padding: 18px 24px;
  border: 1px solid var(--ink);
  font-size: 12px;
  background: var(--ink);
  color: var(--paper);
  transition: background 0.2s;
  min-height: 52px;
}
.button:hover {
  background: #404040;
}
.button.secondary {
  background: transparent;
  color: inherit;
}
.button.secondary:hover {
  background: #88888811;
}
.button svg {
  width: 19px;
}
.footer {
  padding: 65px var(--gutter) 26px;
  background: #1c1c1c;
  color: #e1e1e1;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 0.7fr 0.7fr;
  gap: 80px;
  padding-bottom: 50px;
}
.footer-logo {
  width: 166px;
  height: auto;
  margin-bottom: 28px;
}
.footer-description {
  font-size: 12px;
  line-height: 1.9;
  color: #b6b6b6;
  max-width: 600px;
}
.footer h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  margin-bottom: 24px;
  color: #8d8d8d;
  font-weight: 500;
}
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-size: 12px;
}
.footer-links a:hover {
  color: white;
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid #535353;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 25px;
  font-size: 10px;
  color: #a4a4a4;
}
.footer-bottom button {
  padding: 0;
  color: inherit;
  font-size: 10px;
}
.footer-bottom > div {
  display: flex;
  gap: 25px;
}
.footer .instagram {
  display: inline-flex;
  gap: 20px;
  align-items: center;
}
.footer .instagram svg {
  width: 15px;
}
.inner-head {
  padding: 155px var(--gutter) 66px;
}
.inner-head .eyebrow {
  color: var(--muted);
  margin-bottom: 26px;
}
.inner-head h1 {
  font-size: clamp(50px, 6vw, 88px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.inner-head p {
  font-size: 14px;
  color: var(--muted);
  max-width: 540px;
  margin-top: 25px;
}
.inner-head.row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
.inner-head.row p {
  max-width: 380px;
}
.filters {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  margin: 0 var(--gutter) 40px;
  overflow: auto;
}
.filter {
  padding: 15px 0;
  font-size: 12px;
  white-space: nowrap;
  position: relative;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.filter.active {
  color: var(--ink);
  border-bottom-color: var(--red);
}
.products-grid {
  padding: 0 var(--gutter) 100px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 45px 24px;
}
.empty {
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px;
  grid-column: 1/-1;
}
.method {
  padding: 85px var(--gutter);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 50px;
}
.step {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.step > span {
  font-size: 11px;
  color: var(--red);
}
.step h3 {
  font-size: 25px;
  margin: 25px 0 14px;
}
.step p {
  font-size: 13px;
  color: var(--muted);
}
.form-section {
  padding: 85px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 100px;
  background: #ededed;
}
.form-section h2 {
  font-size: 42px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 25px 0;
}
.form-section p {
  font-size: 13px;
  color: var(--muted);
  max-width: 330px;
}
.project-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
}
.field.wide,
.form-note,
.project-form .button {
  grid-column: 1/-1;
}
.field label {
  color: #535353;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #b3b3b3;
  background: transparent;
  padding: 12px 0;
  border-radius: 0;
  color: var(--ink);
  font-size: 14px;
  min-height: 44px;
}
.field textarea {
  resize: vertical;
  min-height: 100px;
}
.form-note {
  font-size: 11px !important;
  max-width: none !important;
  line-height: 1.6 !important;
}
.project-form .button {
  justify-self: start;
}
.form-success {
  color: #555555;
  grid-column: 1/-1;
  font-size: 13px;
  line-height: 1.7;
}
.faq-section {
  padding: 65px var(--gutter) 100px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 100px;
}
.faq-section h2 {
  font-size: 40px;
  letter-spacing: -0.015em;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 23px 0;
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:after {
  content: "+";
  font-size: 23px;
  font-weight: 300;
}
.faq-list details[open] summary:after {
  content: "−";
}
.faq-list p {
  font-size: 13px;
  color: var(--muted);
  padding: 18px 35px 0 0;
}
.material-controls {
  margin: 25px 0;
  display: flex;
  gap: 15px;
}
.material-chip {
  border: 1px solid #b1b1b1;
  padding: 5px;
  width: 52px;
  height: 52px;
}
.material-chip span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--swatch);
}
.material-chip.active {
  outline: 1px solid var(--red);
  outline-offset: 4px;
}
.material-detail {
  min-height: 120px;
}
.material-detail h3 {
  font-size: 23px;
  margin-bottom: 10px;
}
.material-detail p {
  font-size: 13px;
}
.lighting {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #292929;
  color: #f1f1f1;
}
.light-stage {
  height: 690px;
  position: relative;
  overflow: hidden;
  --light-color: 255, 65, 65;
  --brightness: 0.3;
}
.light-stage img {
  object-position: 50% 40%;
  filter: brightness(0.72);
}
.light-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    90deg,
    rgba(var(--light-color), var(--brightness)),
    transparent 35%,
    transparent 67%,
    rgba(var(--light-color), var(--brightness))
  );
  transition: background 0.5s;
}
.light-overlay.cycle {
  animation: rgbCycle 12s linear infinite;
}
@keyframes rgbCycle {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  33% {
    filter: hue-rotate(120deg);
  }
  66% {
    filter: hue-rotate(240deg);
  }
}
.light-panel {
  padding: 80px clamp(30px, 6vw, 95px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.light-panel h2 {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 25px 0;
}
.light-panel p {
  font-size: 13px;
  color: #bbbbbb;
}
.light-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 30px 0;
}
.light-option {
  border: 1px solid #616161;
  padding: 17px 4px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.light-option span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
}
.light-option.active {
  border-color: #f6f6f6;
  background: #ffffff08;
}
.light-range {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  margin: 10px 0 22px;
}
.light-range input {
  width: 100%;
  accent-color: #bfbfbf;
}
.light-power {
  display: flex;
  gap: 10px;
  align-items: center;
  align-self: flex-start;
  font-size: 12px;
  border-bottom: 1px solid #747474;
  padding: 10px 0;
}
.light-power svg {
  width: 17px;
}
.small-note {
  font-size: 10px !important;
  color: #909090 !important;
  margin-top: 25px;
  line-height: 1.6;
}
.article-body {
  max-width: 760px;
  margin: auto;
  padding: 65px 30px 90px;
}
.article-body p {
  margin: 20px 0;
  color: var(--muted);
  font-size: 15px;
}
.article-body h2 {
  font-size: 33px;
  letter-spacing: -0.015em;
  margin-top: 42px;
}
.article-cover {
  height: 530px;
  margin: 0 var(--gutter);
}
/* Lucide icon paths, ISC license. Copyright Lucide Contributors. */
dialog {
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  max-width: none;
  max-height: 90svh;
  box-shadow: 0 20px 80px #00000033;
}
dialog::backdrop {
  background: #1717179e;
  backdrop-filter: blur(5px);
}
.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
}
.dialog-top .eyebrow {
  color: var(--muted);
}
.dialog-body {
  padding: 32px;
}
.search-dialog {
  width: min(760px, calc(100% - 32px));
}
.search-input {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 15px;
}
.search-input input {
  width: 100%;
  font-size: 28px;
  font-weight: 300;
  background: transparent;
  border: 0;
  outline: none;
}
.search-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 18px 0;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
}
.search-result img {
  width: 65px;
  height: 70px;
  object-position: center;
}
.search-result div {
  flex: 1;
}
.search-result h3 {
  font-size: 20px;
}
.search-result p {
  font-size: 11px;
  color: var(--muted);
}
.search-result:hover h3 {
  color: var(--red);
}
.side-dialog {
  margin: 0 0 0 auto;
  height: 100svh;
  max-height: 100svh;
  width: min(490px, 100%);
}
.side-dialog .dialog-body {
  padding: 32px 40px;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 10px 0 40px;
}
.menu-links a {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.015em;
  display: flex;
  justify-content: space-between;
}
.menu-links a:hover {
  color: var(--red);
}
.side-title {
  font-size: 35px;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.side-intro {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}
.saved-item {
  display: grid;
  grid-template-columns: 74px 1fr 32px;
  gap: 17px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.saved-item img {
  height: 90px;
}
.saved-item h3 {
  font-size: 20px;
}
.saved-item p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 7px;
}
.detail-dialog {
  width: min(1030px, calc(100% - 32px));
}
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.detail-layout > img {
  height: 600px;
}
.detail-copy {
  padding: 65px 45px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.detail-copy h2 {
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 20px 0;
}
.detail-copy p {
  font-size: 14px;
  color: var(--muted);
}
.detail-copy ul {
  list-style: none;
  padding: 20px 0;
  margin: 0;
  width: 100%;
}
.detail-copy li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.detail-copy .button {
  margin-top: 15px;
}
.detail-dialog > .icon-btn {
  position: absolute;
  right: 14px;
  top: 14px;
  background: var(--paper);
  z-index: 2;
}
.legal-dialog {
  width: min(700px, calc(100% - 32px));
}
.legal-dialog h2 {
  font-size: 32px;
  margin-bottom: 25px;
}
.legal-dialog p {
  font-size: 13px;
  margin-top: 15px;
  color: var(--muted);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 90;
  background: var(--ink);
  color: white;
  padding: 16px 25px;
  font-size: 12px;
  box-shadow: 0 4px 20px #00000022;
  opacity: 0;
  transition: all 0.25s;
  pointer-events: none;
  max-width: calc(100% - 40px);
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1600px) {
  .nav {
    gap: 30px;
  }
  .nav a {
    font-size: 13px;
  }
  .hero-photo {
    object-position: 50% 60%;
  }
}
@media (max-width: 1150px) {
  .header {
    gap: 20px;
    padding: 0 32px;
  }
  .nav {
    gap: 17px;
  }
  .nav a {
    font-size: 11px;
  }
  .logo {
    width: 125px;
  }
  .icon-btn {
    min-width: 35px;
  }
  .split-copy {
    padding: 65px 45px;
  }
  .form-section,
  .faq-section {
    gap: 50px;
  }
  .footer-top {
    gap: 40px;
  }
}
@media (max-width: 950px) {
  .nav {
    display: none;
  }
  .tools {
    margin-left: auto;
  }
  .header {
    height: 84px;
  }
  .intro {
    grid-template-columns: 1fr;
    gap: 25px;
    padding-top: 75px;
    padding-bottom: 75px;
  }
  .gallery-section {
    padding-bottom: 75px;
  }
  .gallery {
    gap: 16px;
  }
  .card-image {
    height: 380px;
  }
  .split {
    min-height: 520px;
  }
  .split-photo {
    min-height: 520px;
  }
  .split-copy {
    padding: 50px 32px;
  }
  .split-copy h2 {
    font-size: 43px;
  }
  .footer-top {
    grid-template-columns: 1.6fr 1fr;
    gap: 45px;
  }
  .footer-top > div:last-child {
    grid-column: 2;
  }
  .footer-top > div:first-child {
    grid-row: span 2;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .form-section,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .form-section p {
    max-width: 540px;
  }
  .lighting {
    grid-template-columns: 1fr 1fr;
  }
  .light-panel {
    padding: 50px 30px;
  }
  .light-panel h2 {
    font-size: 40px;
  }
  .light-stage {
    height: 650px;
  }
  .inner-head.row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }
  .journal-card img {
    height: 220px;
  }
  .journal-card h3 {
    font-size: 21px;
  }
  .products-grid {
    grid-template-columns: 1fr 1fr;
  }
  .detail-copy {
    padding: 55px 28px 30px;
  }
}
@media (max-width: 620px) {
  :root {
    --gutter: 24px;
  }
  .header {
    padding: 0 20px;
    height: 76px;
  }
  .header.solid {
    height: 70px;
  }
  .logo {
    width: 120px;
  }
  .hero {
    min-height: min(480px, calc(100svh - 64px));
    max-height: 1000px;
    height: calc(100svh - 64px);
  }
  .hero-photo {
    object-position: 54% 55%;
  }
  .hero-center {
    padding-bottom: 145px;
  }
  .hero-bottom .hero-caption { display: none; }
  .hero-contacts { align-items: flex-start; }
  .hero-center .eyebrow {
    font-size: 8px;
    letter-spacing: 0.16em;
    margin-bottom: 23px;
  }
  .hero h1 {
    font-size: 61px;
    letter-spacing: -0.015em;
  }
  .hero-link {
    font-size: 11px;
    margin-top: 25px;
  }
  .hero-bottom {
    bottom: 28px;
    align-items: flex-end;
  }
  .hero-caption {
    font-size: 10px;
    max-width: 165px;
  }
  .scroll-link {
    display: none;
  }
  .intro {
    padding: 65px 24px;
  }
  .intro h2 {
    font-size: 36px;
  }
  .intro p {
    font-size: 13px;
    margin-top: 22px;
  }
  .section-head {
    align-items: flex-start;
    gap: 12px;
  }
  .section-head h2 {
    font-size: 31px;
  }
  .section-head .text-link {
    font-size: 10px;
    gap: 10px;
    white-space: nowrap;
    padding-top: 12px;
  }
  .section-head .text-link svg {
    width: 15px;
  }
  .gallery {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .gallery .card-image {
    height: 470px;
  }
  .card-info {
    padding: 17px 0;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split-photo {
    min-height: 490px;
  }
  .split-copy {
    padding: 55px 28px 60px;
    min-height: 430px;
  }
  .split-copy h2 {
    font-size: 43px;
    margin: 23px 0;
  }
  .split-copy p {
    font-size: 13px;
  }
  .dark.reverse-mobile .split-photo {
    order: 0;
  }
  .dark.reverse-mobile .split-copy {
    order: 1;
  }
  .wide-story {
    height: 540px;
  }
  .wide-story .content {
    padding: 60px 25px;
  }
  .wide-story h2 {
    font-size: 45px;
  }
  .journal {
    padding: 65px 24px;
  }
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .journal-card img {
    height: 280px;
  }
  .journal-card h3 {
    font-size: 25px;
  }
  .callout {
    padding: 45px 24px;
    align-items: flex-start;
    flex-direction: column;
  }
  .callout h2 {
    font-size: 36px;
  }
  .footer {
    padding: 50px 24px 24px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
  }
  .footer-top > div:first-child {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .footer-top > div:last-child {
    grid-column: auto;
  }
  .footer-description {
    font-size: 11px;
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    font-size: 9px;
    gap: 18px;
  }
  .inner-head {
    padding: 122px 24px 45px;
  }
  .inner-head h1 {
    font-size: 53px;
  }
  .inner-head p {
    font-size: 13px;
  }
  .filters {
    gap: 22px;
    margin-bottom: 28px;
  }
  .products-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 65px;
  }
  .products-grid .card-image {
    height: 480px;
  }
  .steps {
    gap: 28px;
  }
  .step h3 {
    font-size: 23px;
  }
  .step p {
    font-size: 12px;
  }
  .method {
    padding: 60px 24px;
  }
  .form-section {
    padding: 60px 24px;
  }
  .form-section h2 {
    font-size: 36px;
  }
  .project-form {
    grid-template-columns: 1fr;
  }
  .field {
    grid-column: 1/-1;
  }
  .faq-section {
    padding: 55px 24px 65px;
  }
  .faq-section h2 {
    font-size: 36px;
  }
  .lighting {
    grid-template-columns: 1fr;
  }
  .light-stage {
    height: 470px;
  }
  .light-panel {
    padding: 55px 28px;
  }
  .light-panel h2 {
    font-size: 43px;
  }
  .light-options {
    gap: 12px;
  }
  .article-cover {
    height: 380px;
  }
  .article-body {
    padding: 35px 24px 65px;
  }
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-layout > img {
    height: 300px;
  }
  .detail-copy {
    padding: 30px 26px;
  }
  .detail-copy h2 {
    font-size: 36px;
  }
  .detail-copy p {
    font-size: 13px;
  }
  .dialog-top {
    padding: 15px 22px;
  }
  .dialog-body {
    padding: 25px;
  }
  .search-input input {
    font-size: 22px;
  }
  .side-dialog .dialog-body {
    padding: 28px;
  }
  .menu-links a {
    font-size: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.contact-email {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.footer-top > div,
.split-copy {
  min-width: 0;
}

/* Lingue e richieste: controlli compatti coerenti con il sito. */
.language-trigger {
  font-size: 10px;
  white-space: nowrap;
}
.language-trigger svg {
  transform: translateY(-4px);
}
#language-code {
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 9px;
  line-height: 12px;
}
.language-dialog {
  width: min(420px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}
.language-options {
  padding: 10px 26px 26px;
}
.language-options button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 78px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 12px 4px;
  font-size: 18px;
}
.language-options small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.language-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font-size: 13px;
}
.language-check {
  margin-left: auto;
  color: var(--red);
  visibility: hidden;
}
.language-options [aria-pressed="true"] .language-check {
  visibility: visible;
}
.language-options [aria-pressed="true"] .language-mark {
  border-color: var(--red);
}
.contact-dialog {
  width: min(700px, calc(100vw - 28px));
  max-height: 90svh;
  overflow: auto;
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}
.contact-dialog h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.015em;
}
.contact-lead {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 30px;
}
.contact-honey {
  display: none;
}
.contact-intro p {
  margin-bottom: 24px;
}
.contact-dialog .form-note {
  color: var(--muted);
}
.form-success.is-error {
  color: #565656;
}
.footer-links button {
  text-align: left;
  padding: 0;
  font-size: inherit;
}
.contact-email {
  text-align: left;
}
html:lang(zh) body {
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC",
    "Microsoft YaHei", sans-serif;
}
html:lang(zh) .eyebrow {
  letter-spacing: 0.08em;
}
html:lang(zh) h1,
html:lang(zh) h2 {
  line-height: 1.3;
}
@media (min-width: 951px) and (max-width: 1280px) {
  .nav {
    gap: 14px;
  }
  .header {
    gap: 18px;
  }
  .logo {
    width: 125px;
  }
}
@media (max-width: 620px) {
  .header {
    gap: 8px;
    padding-inline: 16px;
  }
  .logo {
    width: clamp(88px, 28vw, 110px);
  }
  .tools {
    gap: 4px;
  }
  .contact-dialog .project-form {
    grid-template-columns: 1fr;
  }
  .contact-dialog .dialog-body {
    padding: 22px;
  }
  .contact-dialog .button {
    width: 100%;
    gap: 12px;
  }
}

/* Area Clienti: riuso dei campi e dei pulsanti del sito. */
.client-panel {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 32px 100px;
}
.client-panel [hidden] {
  display: none !important;
}
.client-panel h2 {
  font-size: 32px;
  margin-bottom: 18px;
}
.client-tabs {
  display: flex;
  gap: 28px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--line);
}
.client-tabs [aria-current="page"] {
  border-bottom-color: var(--red);
}
.client-panel .project-form {
  margin: 24px 0;
}
.client-panel p {
  font-size: 14px;
  line-height: 1.7;
  margin: 20px 0;
}
.client-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  grid-column: 1/-1;
  font-size: 13px;
  line-height: 1.6;
}
.client-consent input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--red);
}
.client-consent a,
.legal-copy a,
.client-help a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#client-status {
  padding: 16px;
  background: #ececec;
  border-left: 2px solid #555555;
  overflow-wrap: anywhere;
}
#client-status.is-error {
  border-color: var(--red);
  color: #4e4e4e;
}
.legal-copy {
  padding-top: 0;
  overflow-wrap: anywhere;
}
.legal-pending {
  padding: 16px;
  border: 1px solid var(--line);
}
@media (max-width: 620px) {
  .client-panel {
    padding-inline: 24px;
  }
  .client-panel .project-form {
    grid-template-columns: 1fr;
  }
  .client-panel .button {
    width: 100%;
  }
}

/* Le informative aggiunte vanno a capo sui display piccoli. */
.footer-bottom > div {
  flex-wrap: wrap;
  row-gap: 14px;
}

/* Contatti della copertina e mappa attivata solo su richiesta. */
.hero-contacts { display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.hero-contacts button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; text-align: left; font-size: 12px; line-height: 1.5; text-shadow: 0 1px 8px #000000; }
.hero-contacts button:hover span { text-decoration: underline; text-underline-offset: 4px; }
.hero-contacts svg { width: 18px; height: 18px; flex-shrink: 0; }
.map-dialog { width: min(900px, calc(100% - 32px)); }
.map-dialog h2 { font-size: 24px; }
.map-address { margin-bottom: 24px; line-height: 1.6; }
.map-consent p, .map-note { color: var(--muted); font-size: 14px; line-height: 1.7; }
.map-consent .button { margin: 20px 8px 0 0; }
#map-container iframe { display: block; width: 100%; height: min(480px, 52svh); border: 0; }
.map-note { margin-top: 16px; }
@media (max-width: 620px) {
  .map-dialog .dialog-body { padding: 20px; }
  .hero-contacts button { font-size: 11px; }
}

/* Toni neutri: bianco caldo, pietra e antracite. */
#page-home .intro { background: var(--stone); }
#page-home .gallery-section { padding-top: 72px; }
.dark { background: var(--charcoal); }
.dark p.quiet, .dark .split-copy p { color: #c4c4c4; }
#page-home .split:not(.dark) .split-copy { background: #ebebeb; }
#page-home .journal { background: var(--charcoal); color: var(--paper); }
#page-home .journal .eyebrow { color: #c4c4c4; }
#page-home .journal .text-link { border-bottom-color: #909090; }
.callout { background: var(--stone); }
.footer-description { color: #c2c2c2; }
.footer h3 { color: #afafaf; }
.footer-bottom { border-top-color: #535353; }
@media (max-width: 620px) {
  #page-home .gallery-section { padding-top: 48px; }
}

/* Cataloghi: copertine e consultazione pubblica, gestione riservata. */
.catalog-section {padding:0 var(--gutter) 90px}
.catalog-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.catalog-card {min-width:0}
.catalog-cover {display:flex;align-items:center;justify-content:center;background:var(--stone);padding:30px;aspect-ratio:4/5;overflow:hidden}
.catalog-cover img {width:100%;height:100%;object-fit:contain;transition:transform .35s}
.catalog-cover:hover img {transform:scale(1.025)}
.catalog-copy {padding:24px 0 0}
.catalog-copy h2 {font-size:clamp(22px,2.1vw,30px);margin:10px 0 12px;overflow-wrap:anywhere}
.catalog-copy .eyebrow {font-size:10px}
.catalog-actions {display:flex;gap:20px;flex-wrap:wrap;margin-top:22px}
.catalog-actions .text-link {font-size:12px;gap:14px}
.catalog-owner {border-top:1px solid var(--line);margin-top:65px;padding-top:25px}
.catalog-document {align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;width:100%;background:var(--charcoal);color:var(--paper);padding:28px}
.catalog-document-title {font-size:clamp(22px,2.5vw,36px);line-height:1.25;overflow-wrap:anywhere}
.catalog-admin {border-top:1px solid var(--line);margin-top:48px;padding-top:36px}
.catalog-admin h2 {font-size:30px;margin-bottom:18px}
.catalog-admin .project-form {margin-top:25px}
.catalog-admin input[type=file] {padding:16px 0;max-width:100%;white-space:normal}
#catalog-status,#catalog-admin-status {padding:18px 0;line-height:1.6}
.is-error {color:#515151}
@media(max-width:1100px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.catalog-grid{grid-template-columns:1fr;gap:44px}.catalog-cover{padding:22px}.catalog-section{padding-bottom:55px}}

.catalog-section [hidden] {display:none !important}

#catalog-cover-preview {width:160px;height:220px;object-fit:contain;background:var(--stone);margin-top:16px}


/* Proposta visiva locale: materiali caldi, gerarchie chiare e ombre leggere. */
.header.solid {background:rgba(250,250,248,.97);border-bottom-color:#dddddd}
.footer {background:#252525;color:#eeeeee}
.footer-description {color:#bcbcbc}
.footer h3 {color:#acacac}
.footer-bottom {border-top-color:#494949}
.button {background:#343434;border-color:#343434;transition:background .2s,box-shadow .2s}
.button:hover {background:#4d4d4d;box-shadow:0 6px 16px #27272718}
.button.secondary {background:transparent}
#page-home .intro {background:#e9e9e9}
#page-home .journal,.dark {background:linear-gradient(130deg,#373737,#262626)}
.callout {background:#e7e7e7}
.card-image {background:#e5e5e5;box-shadow:0 9px 25px #2929290b}
.split-photo {background:#d8d8d8}

/* Accesso: fotografia e modulo appartengono allo stesso spazio. */
[data-page="area-clienti"] {padding:132px var(--gutter) 76px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;gap:0;background:linear-gradient(135deg,#e3e3e3 0%,#f4f4f4 65%)}
.client-visual {position:relative;min-height:670px;overflow:hidden;background:#313131}
.client-visual>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% center}
.client-visual::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1a1a1a00 30%,#1a1a1ac9 100%)}
.client-visual-copy {position:absolute;z-index:1;bottom:54px;left:48px;right:40px;color:#f4f4f4}
.client-visual-copy .eyebrow {font-size:10px;letter-spacing:.19em;color:#d2d2d2;margin-bottom:26px}
.client-visual-copy h2 {font-weight:300;font-size:clamp(42px,4.5vw,66px);line-height:1.06;letter-spacing:-0.015em;margin:0 0 24px}
.client-visual-copy>p:last-child {font-size:14px;line-height:1.7;color:#d3d3d3;max-width:300px}
.client-shell {background:#fbfbfb;padding:58px clamp(28px,4.4vw,68px) 40px;min-width:0;box-shadow:16px 18px 48px #3535350d}
.client-shell .inner-head {padding:0;margin-bottom:38px}
.client-shell .inner-head .eyebrow {font-size:10px;color:#767676;letter-spacing:.15em;margin-bottom:24px}
.client-shell .inner-head h1 {font-size:clamp(35px,3.5vw,52px);line-height:1.1;letter-spacing:-0.015em;margin:0 0 20px}
.client-shell .inner-head>p:last-child {font-size:14px;line-height:1.7;max-width:340px;margin:0;color:#6d6d6d}
.client-shell .client-panel {padding:0;max-width:none;margin:0}
.client-shell .client-tabs {gap:30px;margin-bottom:30px;border-bottom:1px solid #d8d8d8}
.client-shell .client-tabs .text-link {padding:0 0 13px;border-bottom:2px solid transparent;font-size:13px;color:#7b7b7b}
.client-shell .client-tabs [aria-current="page"] {color:#343434;border-bottom-color:#6c6c6c}
.client-shell .project-form {gap:22px 18px;margin:0 0 24px}
.client-shell .field {font-size:12px;gap:9px}
.client-shell .field label {color:#575757}
.client-shell .field input,.client-shell .field select {padding:14px 15px;background:#ffffff;border:1px solid #d4d4d4;min-height:51px;transition:border-color .2s,box-shadow .2s}
.client-shell .field input:focus,.client-shell .field select:focus {outline:none;border-color:#6e6e6e;box-shadow:0 0 0 3px #6e6e6e15}
.client-shell .button {width:100%;justify-content:center;min-height:52px;font-size:13px;letter-spacing:.02em}
#client-login>[data-auth-view="recover"] {grid-column:1/-1;justify-self:end;border:0;padding:0;font-size:12px;text-decoration:underline;text-underline-offset:5px;color:#6c6c6c}
.client-shell .client-help {border-top:1px solid #dcdcdc;padding-top:24px;margin-top:30px;font-size:12px;color:#787878}
.client-shell #client-status {margin-top:0;background:#e6e6e6;border-color:#666666}
.client-shell #client-status.is-error {background:#e8e8e8;border-color:#5b5b5b}
.client-shell .catalog-admin {margin-top:36px}
.client-shell .catalog-admin h2 {font-size:28px}
[data-page="area-clienti"]:has(#client-account:not([hidden])) {grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);align-items:start}
[data-page="area-clienti"]:has(#client-account:not([hidden])) .client-visual {height:670px;position:sticky;top:110px}

/* Cataloghi: copertine reali, spazio editoriale e profondità discreta. */
.catalog-intro {position:relative;isolation:isolate;overflow:hidden;background:#2e2e2e;color:#f4f4f4;padding:155px var(--gutter) 65px;min-height:390px}
.catalog-intro-photo {position:absolute;inset:0 0 0 auto;width:54%;height:100%;object-fit:cover;object-position:center;z-index:-2;opacity:.64}
.catalog-intro::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#2e2e2e 40%,#2e2e2ede 54%,#2e2e2e10 100%)}
.catalog-intro .eyebrow {color:#bcbcbc;letter-spacing:.2em;font-size:10px}
.catalog-intro h1 {font-size:clamp(42px,5.5vw,78px);letter-spacing:-0.015em;margin:25px 0}
.catalog-intro>p:last-child {max-width:510px;line-height:1.8;color:#d7d7d7;font-size:14px}
.catalog-section {padding-top:64px;padding-bottom:65px;background:#f4f4f4}
.catalog-cover {background:radial-gradient(ellipse at 45% 35%,#f0f0f0 0%,#d9d9d9 100%);padding:38px}
.catalog-cover img {filter:drop-shadow(12px 20px 14px #28282830);transition:transform .4s,filter .4s}
.catalog-cover:hover img {transform:translateY(-5px);filter:drop-shadow(14px 27px 17px #28282838)}
.catalog-copy .eyebrow {color:#737373;letter-spacing:.17em}
.catalog-copy .quiet {color:#7a7a7a;font-size:13px}
.catalog-actions {gap:20px 28px}
.catalog-actions .text-link {border-bottom-color:#a8a8a8;font-size:12px}
.catalog-grid>.catalog-card:only-child {grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;background:#fbfbfb;box-shadow:0 18px 45px #33333309}
.catalog-grid>.catalog-card:only-child .catalog-cover {aspect-ratio:auto;min-height:460px;padding:42px;height:480px}
.catalog-grid>.catalog-card:only-child .catalog-cover img {max-width:300px;max-height:390px}
.catalog-grid>.catalog-card:only-child .catalog-copy {align-self:center;padding:42px clamp(28px,5vw,76px)}
.catalog-grid>.catalog-card:only-child h2 {font-size:clamp(28px,3.5vw,48px);line-height:1.15;letter-spacing:-0.015em;margin:23px 0}
.catalog-grid>.catalog-card:only-child .catalog-actions {display:flex;flex-direction:column;align-items:flex-start;margin-top:32px;gap:24px}
.catalog-grid>.catalog-card:only-child .catalog-actions .text-link:first-child {background:#343434;color:#f4f4f4;border:1px solid #343434;padding:17px 26px;min-width:220px;justify-content:center}
.catalog-grid>.catalog-card:only-child .catalog-actions .text-link:first-child:hover {background:#4d4d4d}
.catalog-owner {margin-top:38px;padding-top:22px;display:flex;justify-content:flex-end}
.catalog-owner .text-link {color:#777777;font-size:11px}
@media(max-width:1000px){
 [data-page="area-clienti"] {padding-inline:24px;grid-template-columns:.85fr 1fr}
 .client-visual-copy {left:30px;right:25px;bottom:40px}
 .client-shell {padding:40px 28px 28px}
 .client-visual {min-height:620px}
}
@media(max-width:700px){
 [data-page="area-clienti"],[data-page="area-clienti"]:has(#client-account:not([hidden])) {display:flex;flex-direction:column;padding:100px 20px 45px}
 .client-visual,[data-page="area-clienti"]:has(#client-account:not([hidden])) .client-visual {height:245px;min-height:245px;position:relative;top:auto}
 .client-visual>img {object-position:center 45%}
 .client-visual-copy {bottom:25px;left:26px}
 .client-visual-copy .eyebrow {margin-bottom:15px;font-size:9px}
 .client-visual-copy h2 {font-size:38px;margin-bottom:0}
 .client-visual-copy>p:last-child {display:none}
 .client-shell {padding:32px 25px 25px}
 .client-shell .inner-head {margin-bottom:30px}
 .client-shell .inner-head h1 {font-size:37px}
 .client-shell .inner-head .eyebrow {display:none}
 .client-shell .project-form {grid-template-columns:1fr}
 .catalog-intro {padding-top:140px;padding-bottom:42px;min-height:340px}
 .catalog-intro-photo {width:100%;opacity:.32}
 .catalog-intro::after {background:linear-gradient(90deg,#2e2e2eed,#2e2e2e60)}
 .catalog-intro>p:last-child {max-width:90%}
 .catalog-section {padding-top:30px}
 .catalog-grid>.catalog-card:only-child {grid-template-columns:1fr}
 .catalog-grid>.catalog-card:only-child .catalog-cover {height:390px;min-height:0;padding:30px}
 .catalog-grid>.catalog-card:only-child .catalog-cover img {max-height:330px}
 .catalog-grid>.catalog-card:only-child .catalog-copy {padding:30px}
 .catalog-grid>.catalog-card:only-child h2 {font-size:32px}
 .catalog-owner {justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.catalog-cover img{transition:none}.catalog-cover:hover img{transform:none}}

/* Bianco e grafite: superfici satinate, con fallback opaco. */
:root{--paper:#f6f6f5;--stone:#e6e6e5;--charcoal:#363738;--ink:#303132;--muted:#6b6d6f;--line:#d8d9da;--red:#55585a}
.header{background:rgba(48,50,52,.32);border-bottom:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(22px) saturate(110%);backdrop-filter:blur(22px) saturate(110%);box-shadow:0 4px 24px rgba(0,0,0,.04)}
.header.solid{background:rgba(250,250,250,.82);border-bottom-color:rgba(255,255,255,.68);box-shadow:0 8px 30px rgba(40,42,44,.06)}
.footer{background:#363738;color:#f5f5f5}.footer-description{color:#c5c7c8}.footer h3{color:#afb2b4}
.button{background:#414345;border-color:#414345;color:#fff}.button:hover{background:#56595c}.button.secondary{background:transparent;color:inherit}
.client-shell{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 56px rgba(42,44,46,.08),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.catalog-intro{background:#3b3d3f}.catalog-intro::after{background:linear-gradient(90deg,#3b3d3f 40%,#3b3d3fde 54%,#3b3d3f10 100%)}
.catalog-grid>.catalog-card:only-child{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 48px rgba(40,42,44,.06)}
.catalog-cover{background:radial-gradient(ellipse at 45% 35%,#f5f5f5,#dddddd)}
.catalog-grid>.catalog-card:only-child .catalog-actions .text-link:first-child{background:#414345;border-color:#414345}.catalog-grid>.catalog-card:only-child .catalog-actions .text-link:first-child:hover{background:#56595c}
dialog{background:rgba(250,250,250,.9);border:1px solid rgba(255,255,255,.86);box-shadow:0 24px 80px rgba(32,34,36,.2),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
dialog::backdrop{background:rgba(42,44,46,.28);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.card-save{background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(40,42,44,.08)}
.is-error{color:#9b302c}.client-shell #client-status.is-error{background:#f6e9e8;border-color:#9b302c}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header{background:rgba(48,50,52,.9)}.header.solid,.client-shell,dialog{background:#fafafa}.card-save{background:#f5f5f5}}
@media(prefers-reduced-transparency:reduce){.header{background:#363738}.header.solid,.client-shell,dialog,.card-save{background:#fafafa;-webkit-backdrop-filter:none;backdrop-filter:none}dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(max-width:700px){.catalog-intro::after{background:linear-gradient(90deg,#3b3d3fed,#3b3d3f60)}.header,.client-shell{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}

/* Home a tutta altezza: vetro soltanto dopo lo scroll, invito sovrapposto alla foto. */
.header:not(.solid){background:transparent;border-bottom-color:rgba(255,255,255,.2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#page-home .hero{height:100svh;min-height:100svh;max-height:none}
.hero-bottom{bottom:96px}.hero-caption .hero-caption-line{font-size:11px;opacity:1}
.hero-scroll-band{position:absolute;isolation:isolate;z-index:3;bottom:0;left:0;width:100%;min-height:64px;padding:20px 24px;display:flex;align-items:center;justify-content:center;gap:20px;color:#fff;background:transparent;border:0;box-shadow:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px #20222488}
.hero-scroll-band::before{content:"";position:absolute;z-index:-1;inset:-32px 0 0;pointer-events:none;background:linear-gradient(to bottom,rgba(42,44,46,.08),rgba(42,44,46,.48) 46%,rgba(42,44,46,.72));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 48%);mask-image:linear-gradient(to bottom,transparent,#000 48%);transition:opacity .2s}
.hero-scroll-band svg{width:18px;height:18px;transition:transform .2s}.hero-scroll-band:hover svg{transform:translateY(3px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-scroll-band::before{background:linear-gradient(transparent,rgba(45,47,49,.9))}}
@media(prefers-reduced-transparency:reduce){.hero-scroll-band::before{background:#393b3d;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.hero-scroll-band svg{transition:none}}
.map-help{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:18px}.map-help p{width:100%;margin:0}.map-help .text-link{font-size:13px}
@media(max-width:700px){.hero-center{padding-bottom:215px}.hero-bottom{bottom:84px}.hero-scroll-band{min-height:58px;padding:18px 20px;font-size:9px}}
@media(max-height:620px){.hero-center{padding-top:85px;padding-bottom:165px}.hero h1{font-size:clamp(38px,6vw,62px)}.hero-center .eyebrow{margin-bottom:14px}.hero-link{margin-top:16px}.hero-bottom{bottom:72px}.hero-contacts button{font-size:10px;min-height:32px}}

/* Isolated furniture studies: the original room photographs remain in details. */
.products-render-note{margin:0 var(--gutter) 26px;font-size:12px;line-height:1.7;color:var(--muted);max-width:720px}
.product-card-media{position:relative}
.product-isolated .card-image{height:clamp(290px,31vw,460px);padding:24px 30px 40px;background:#fff;box-shadow:none}
.product-isolated .card-image::after{display:none}
.product-isolated .card-image img{width:100%;height:100%;padding:0;object-fit:contain;object-position:center}
.product-isolated .card-image:hover img{transform:scale(1.025)}
.product-isolated .card-info{border:0;text-align:center;justify-content:center;padding:22px 10px 30px}
.product-isolated .card-info h3{font-size:17px;letter-spacing:.055em;text-transform:uppercase;line-height:1.45;font-weight:400}
.product-isolated .card-info p{font-size:11px;line-height:1.6}
.product-isolated .card-info>svg{display:none}
.product-model-button{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:6px;padding:8px 11px;min-height:36px;border:1px solid #dedede;border-radius:22px;background:#fffffff2;color:#424547;font-size:11px;letter-spacing:.025em}
.product-model-button svg{width:16px;height:16px}.product-model-button:hover{border-color:#777;background:#f1f1f1}
.product-detail-media{min-width:0;background:#fff;padding:30px 24px}
.product-render-stage{height:480px;display:flex;align-items:center;justify-content:center}
.product-render-stage img{height:100%;width:100%;object-fit:contain}
.product-render-caption{text-align:center;color:var(--muted);font-size:10px;letter-spacing:.1em;margin:14px 0 20px}
.product-original-photo{border-top:1px solid var(--line);font-size:12px;color:#4e5153}
.product-original-photo summary{padding:16px 0;cursor:pointer}.product-original-photo img{width:100%;height:auto;max-height:650px;object-fit:contain}
.product-detail-model{gap:10px;margin:0 0 22px;padding-bottom:10px;align-self:flex-start;min-width:0;font-size:12px}
.product-detail-model>svg{width:18px;height:18px;flex:none}
.product-model-dialog{width:min(1080px,calc(100% - 24px));padding:0;max-height:calc(100svh - 24px);overflow:auto;background:#f9f9f8}
.product-model-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:28px 32px 16px}
.product-model-heading h2{font-size:clamp(24px,3vw,38px);line-height:1.2;margin:10px 0 0;font-weight:400;letter-spacing:-0.015em}
.product-model-heading .icon-btn{position:static;flex:none}
.product-model-stage{position:relative;background:linear-gradient(#fafafa,#eeefec)}
#product-model-canvas{display:block;width:100%;height:clamp(280px,55vh,570px);touch-action:none;cursor:grab}
#product-model-canvas:active{cursor:grabbing}
#product-model-canvas:focus-visible{outline:2px solid #717775;outline-offset:-4px}
#product-model-status{position:absolute;left:20px;right:20px;bottom:12px;text-align:center;font-size:11px;pointer-events:none}
.product-model-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;padding:16px 18px 10px}
.product-model-controls button{min-width:44px;min-height:44px;padding:10px 14px;border:1px solid #d4d7d4;background:#fff;border-radius:6px;color:#414744;font-size:15px}
.product-model-controls button:hover{background:#e8ebe8}.product-model-controls span{width:14px}
.product-model-controls button:last-child{font-size:12px}
.product-model-hint,.product-model-disclaimer{text-align:center;font-size:12px;line-height:1.65;margin:0 24px 8px;color:#505753}
.product-model-disclaimer{font-size:10px;color:var(--muted);margin-bottom:22px}
@media(max-width:620px){.product-isolated .card-image{height:370px}.product-detail-media{padding:24px 18px}.product-render-stage{height:340px}.product-model-heading{padding:24px 20px 15px}.product-model-controls{gap:4px}.product-model-controls span{display:none}.products-render-note{font-size:11px}}

/* Navigazione essenziale e pannello perla, dal riferimento approvato. */
.header > .logo {
  width: 150px;
}
.nav {
  flex: 1;
  min-width: 0;
  margin-left: 0;
  justify-content: center;
  gap: clamp(14px, 1.35vw, 24px);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  font-size: 12px;
  line-height: 1.4;
}
.nav a.nav-home {
  display: none;
}
.nav a::after {
  bottom: 2px;
  height: 1px;
  background: currentColor;
}
.header a:focus-visible,
.header button:focus-visible {
  outline-color: currentColor;
}
.header .icon-btn:hover {
  color: inherit;
  background: rgba(255, 255, 255, .12);
}
.header.solid .icon-btn:hover {
  background: rgba(48, 49, 50, .06);
}
#language-code {
  font-size: 12px;
}
#menu-dialog {
  width: clamp(490px, 40vw, 560px);
  max-width: 100%;
  background: rgba(248, 248, 246, .91);
  color: var(--ink);
  border-width: 0 0 0 1px;
  border-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(30px) saturate(80%);
  backdrop-filter: blur(30px) saturate(80%);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#menu-dialog::backdrop {
  background: rgba(32, 34, 36, .22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#menu-dialog .dialog-top {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 92px;
  padding: 24px 44px;
  border-bottom: 0;
  background: rgba(248, 248, 246, .93);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
#menu-dialog .dialog-top .eyebrow {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .18em;
}
#menu-dialog .dialog-body {
  padding: 4px 44px 36px;
}
#menu-dialog .menu-links {
  gap: 0;
  padding: 0 0 20px;
}
#menu-dialog .menu-links a {
  position: relative;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 9px 0 9px 22px;
  font-size: clamp(28px, 2.35vw, 34px);
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.015em;
}
#menu-dialog .menu-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 1.05em;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0;
}
#menu-dialog .menu-links a[aria-current="page"]::before {
  opacity: 1;
}
#menu-dialog .menu-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
#menu-dialog .menu-links svg,
#menu-dialog .menu-project-caption svg {
  width: 20px;
  height: 20px;
}
#menu-dialog .menu-links .menu-home {
  margin-bottom: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
#menu-dialog .menu-links .menu-secondary {
  min-height: 44px;
  padding-block: 10px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
#menu-dialog .menu-links .menu-secondary-start {
  margin-top: 18px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}
.menu-project {
  display: block;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.menu-project > img {
  width: 100%;
  height: clamp(140px, 18svh, 180px);
  object-fit: cover;
  object-position: center;
}
.menu-project-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}
.menu-project:hover .menu-project-caption > span {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.menu-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 300;
  letter-spacing: -0.015em;
}
.menu-contact > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.menu-contact > svg:first-child {
  width: 28px;
  height: 28px;
}
.menu-contact > svg:last-child {
  width: 20px;
  height: 20px;
}
.menu-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.menu-tools .text-link {
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding-block: 9px;
  font-size: 14px;
}

/* Testi di servizio leggibili, senza cambiare l'impaginazione delle pagine. */
.eyebrow,
.journal-card .eyebrow,
.catalog-intro .eyebrow,
.catalog-copy .eyebrow,
.footer h3,
.image-note,
.product-render-caption,
.product-model-disclaimer,
.language-options small {
  font-size: 12px;
}
.card-info p,
.product-isolated .card-info p,
.saved-item p,
.search-hint,
.search-result p,
.detail-copy li,
.light-option,
.light-range,
.field,
.footer-bottom,
.footer-bottom button,
.product-model-button,
#product-model-status,
.products-render-note {
  font-size: 13px;
}
.text-link,
.section-head .text-link,
.catalog-actions .text-link,
.catalog-owner .text-link,
.product-detail-model,
.filter,
.button,
.footer-description,
.footer-links {
  font-size: 14px;
}
.form-note,
.small-note {
  font-size: 12px !important;
}
.footer-bottom,
.footer-bottom > div {
  flex-wrap: wrap;
}
.hero-center .eyebrow {
  font-size: 12px;
}
.hero-link {
  min-height: 44px;
  font-size: 15px;
}
.hero-caption span,
.hero-caption .hero-caption-line {
  font-size: 13px;
}
.hero-contacts button {
  min-height: 44px;
  font-size: 13px;
}
.hero-scroll-band {
  font-size: 12px;
}
@media (min-width: 951px) and (max-width: 1359px) {
  .nav a.nav-extra { display: none; }
}
@media (max-width: 950px) {
  .header > .logo { width: 150px; }
}
@media (max-width: 700px) {
  #menu-dialog { width: 100%; border: 0; }
  #menu-dialog .dialog-top { min-height: 82px; padding: 18px 28px; }
  #menu-dialog .dialog-body { padding: 4px 28px 32px; }
  #menu-dialog .menu-links a { font-size: 29px; }
  #menu-dialog .menu-links .menu-secondary { font-size: 20px; }
  .section-head { flex-wrap: wrap; }
  .section-head .text-link { white-space: normal; }
  .hero-link { font-size: 14px; }
  .hero-contacts button { font-size: 12px; }
}
@media (max-width: 620px) {
  .header > .logo { width: clamp(88px, 28vw, 110px); }
  .hero-center .eyebrow { max-width: 100%; letter-spacing: .12em; }
  .hero-contacts { max-width: 100%; }
  .hero-contacts button { max-width: 100%; }
  .hero-contacts span { overflow-wrap: anywhere; }
  .footer-description { font-size: 14px; }
}
@media (max-width: 380px) {
  #menu-dialog .dialog-top { padding-inline: 22px; }
  #menu-dialog .dialog-body { padding-inline: 22px; }
  #menu-dialog .menu-links a { font-size: 26px; gap: 12px; }
  #menu-dialog .menu-links .menu-secondary { font-size: 19px; }
  .menu-contact { gap: 12px; font-size: 18px; }
}
@media (max-width: 540px) {
  .hero-scroll-band { padding-inline: 20px 78px; gap: 12px; font-size: 11px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #menu-dialog,
  #menu-dialog .dialog-top { background: #f6f6f4; }
}
/* Ultimo nella cascata: la preferenza opaca vale anche sulla Home. */
@media (prefers-reduced-transparency: reduce) {
  .header:not(.solid) { background: #363738; }
  .header.solid,
  #menu-dialog,
  #menu-dialog .dialog-top { background: #f6f6f4; }
  .header,
  .header.solid,
  #menu-dialog,
  #menu-dialog .dialog-top,
  #menu-dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Match the published desktop menu placement before remote content loads.
   Editor inline placement remains free to override this initial position. */
@media (min-width: 701px) {
  .header > .nav { translate: 10px 0; }
}

/* Interactive light study: an initially white room, illuminated only on request. */
.led-demo {
  --led-rgb: 255, 210, 158;
  --led-core: #fff2dc;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: #383838;
  padding: 44px 6vw 30px;
  transition: background-color .8s ease, color .8s ease;
  scroll-margin-top: 82px;
}
.led-demo[data-temperature="4000"] { --led-rgb: 236, 237, 229; --led-core: #fffff6; }
.led-demo.is-on { background: #191a1b; color: #f5f3ee; }
.led-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 2; }
.led-toolbar .eyebrow { margin: 0; font-size: 10px; letter-spacing: .2em; }
.led-controls { display: flex; align-items: center; gap: 26px; }
.led-power { display: inline-flex; align-items: center; gap: 10px; min-width: 100px; min-height: 48px; font-size: 13px; }
.led-power svg { width: 19px; height: 19px; }
.led-power[aria-pressed="true"] svg { color: var(--led-core); filter: drop-shadow(0 0 5px rgba(var(--led-rgb), .6)); }
.led-temperatures { display: flex; border-left: 1px solid #8885; padding-left: 20px; gap: 6px; }
.led-temperatures button { display: flex; flex-direction: column; gap: 5px; align-items: center; min-width: 86px; min-height: 55px; padding: 8px 12px; border-bottom: 1px solid transparent; font-size: 12px; }
.led-temperatures button span:last-child { font-size: 10px; opacity: .7; }
.led-temperatures button[aria-pressed="true"] { border-bottom-color: currentColor; }
.led-demo button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.led-scene { position: relative; min-height: 510px; display: grid; place-items: center; padding: 155px 20px 70px; }
.led-fixtures { position: absolute; top: 65px; left: 4%; right: 4%; display: grid; grid-template-columns: 1fr 1fr; gap: 7%; pointer-events: none; }
.led-fixture { position: relative; height: 4px; border-radius: 2px; background: #d5d5d3; transition: background .6s, box-shadow .8s; }
.led-fixture::after { content: ""; position: absolute; top: 4px; left: -18%; width: 136%; height: 430px; opacity: 0; transform: scaleY(0); transform-origin: top; background: radial-gradient(ellipse at 50% 0%, rgba(var(--led-rgb),.26) 0%, rgba(var(--led-rgb),.12) 30%, rgba(var(--led-rgb),.035) 58%, transparent 76%); filter: blur(12px); transition: transform 1.8s cubic-bezier(.2,.65,.25,1), opacity .65s, background .8s; }
.led-demo.is-on .led-fixture { background: var(--led-core); box-shadow: 0 0 4px 1px rgba(var(--led-rgb),.9), 0 7px 18px 4px rgba(var(--led-rgb),.4); }
.led-demo.is-on .led-fixture::after { opacity: 1; transform: scaleY(1); }
.led-invitation { position: absolute; inset: 120px 0 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity .25s, visibility .25s; }
.led-invitation p { margin: 0; font-size: clamp(24px,3vw,40px); font-weight: 300; letter-spacing: -0.015em; text-align: center; }
.led-start { display: inline-flex; align-items: center; gap: 24px; border-bottom: 1px solid #aaa; padding: 12px 0; font-size: 13px; }
.led-start svg { width: 16px; height: 16px; }
.led-demo.is-on .led-invitation { opacity: 0; visibility: hidden; pointer-events: none; }
.led-copy { position: relative; z-index: 1; max-width: 640px; text-align: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s, transform .35s, visibility .35s; }
.led-demo.is-on .led-copy { opacity: 1; visibility: visible; transform: none; transition: opacity 1.2s .45s, transform 1.2s .45s, visibility 0s; }
.led-copy .eyebrow { font-size: 10px; letter-spacing: .2em; color: var(--led-core); }
.led-copy h2 { font-size: clamp(36px,4.5vw,64px); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; margin: 24px 0; color: var(--led-core); transition: color .8s, text-shadow .8s; text-shadow: 0 0 32px rgba(var(--led-rgb),.16); }
.led-copy > p:last-child { max-width: 440px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: #d1cfca; }
.led-note { position: relative; margin: 0 auto; text-align: center; font-size: 11px; line-height: 1.7; max-width: 600px; color: #737373; }
.led-demo.is-on .led-note { color: #a6a6a6; }
@media (max-width: 700px) {
  .led-demo { padding: 32px 24px 25px; }
  .led-toolbar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .led-controls { width: 100%; justify-content: space-between; gap: 12px; }
  .led-temperatures { padding-left: 12px; gap: 0; }
  .led-temperatures button { min-width: 70px; padding: 8px; }
  .led-power { min-width: 85px; }
  .led-scene { min-height: 470px; padding: 125px 0 60px; }
  .led-fixtures { top: 48px; left: 0; right: 0; gap: 10%; }
  .led-fixture::after { height: 390px; }
  .led-copy h2 { font-size: clamp(32px,8vw,42px); }
  .led-copy > p:last-child { font-size: 13px; }
  .led-note { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .led-demo, .led-demo *, .led-demo *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* A dedicated viewport and a short, freely scrollable pause for the light study. */
.led-experience { --led-header: 82px; position: relative; background: #fff; transition: background-color .8s; }
.led-experience::after { content: ""; display: block; height: 45svh; }
.led-experience.is-on { background: #191a1b; }
.led-experience .led-demo { position: sticky; top: var(--led-header); min-height: calc(100svh - var(--led-header)); display: flex; flex-direction: column; padding-top: clamp(28px,5svh,56px); padding-bottom: 28px; }
.led-experience .led-scene { flex: 1; min-height: 420px; }
.led-experience .led-fixture::after { height: max(430px,55svh); }
.led-experience .led-invitation { gap: 30px; }
.led-experience .led-start { min-width: 220px; min-height: 60px; padding: 16px 25px; justify-content: space-between; background: #303234; color: #fff; border: 1px solid #303234; font-size: 16px; transition: background .2s, box-shadow .2s; }
.led-experience .led-start:hover { background: #46484a; box-shadow: 0 8px 28px #00000014; }
.led-experience .led-start svg { width: 20px; height: 20px; }
.led-experience .led-power { justify-content: center; padding: 12px 16px; min-width: 120px; border: 1px solid #96969670; font-size: 14px; }
.led-experience .led-power[aria-pressed="true"] { border-color: #dddddd60; background: #ffffff08; }
.led-experience .led-temperatures button { font-size: 14px; min-width: 90px; }
.led-experience .led-temperatures button span:last-child { font-size: 12px; }

/* Quiet, readable search and request dialogs; shared form behaviour is unchanged. */
#search-dialog, #contact-dialog { border: 1px solid #ffffffc9; border-radius: 4px; background: rgba(248,249,248,.97); box-shadow: 0 24px 90px #14161730; max-height: calc(100svh - 48px); overflow: hidden; }
#search-dialog[open], #contact-dialog[open] { display: flex; flex-direction: column; }
#search-dialog::backdrop, #contact-dialog::backdrop { background: #20222452; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#search-dialog { width: min(880px,calc(100vw - 48px)); }
#contact-dialog { width: min(1080px,calc(100vw - 64px)); background: #fafaf8; border-radius: 2px; }
#search-dialog .dialog-top, #contact-dialog .dialog-top { padding: 18px 30px; flex-shrink: 0; border-bottom: 1px solid #dcdedc; }
#search-dialog .dialog-top .eyebrow, #contact-dialog .dialog-top .eyebrow { font-size: 11px; color: #565a5b; letter-spacing: .16em; }
#search-dialog .dialog-body, #contact-dialog .dialog-body { padding: 28px 30px 30px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#search-dialog .search-input { gap: 14px; padding: 16px 18px; border: 1px solid #c6c9c7; border-radius: 2px; background: #fff; transition: border-color .2s, box-shadow .2s; }
#search-dialog .search-input:focus-within { border-color: #424648; box-shadow: 0 0 0 2px #42464812; }
#search-dialog .search-input > svg { width: 21px; height: 21px; flex-shrink: 0; color: #555b5d; }
#search-dialog .search-input input { font-size: 20px; font-weight: 400; min-width: 0; color: #292d2f; }
#search-dialog .search-input input::placeholder { color: #727778; opacity: 1; }
#search-dialog .search-hint { font-size: 13px; margin: 20px 0 16px; line-height: 1.6; color: #656a6b; }
#search-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#search-dialog .search-result { display: grid; grid-template-columns: 64px minmax(0,1fr) 18px; gap: 14px; padding: 12px; border: 1px solid #dcdedc; border-radius: 2px; background: #ffffff6b; transition: background .2s,border-color .2s; }
#search-dialog .search-result:hover, #search-dialog .search-result:focus-visible { background: #fff; border-color: #969c9d; outline-offset: 2px; }
#search-dialog .search-result img { width: 64px; height: 78px; object-fit: cover; }
#search-dialog .search-result h3 { font-size: 17px; font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 6px; }
#search-dialog .search-result p { font-size: 12px; line-height: 1.5; color: #666c6e; margin: 0; }
#search-dialog .search-result > svg { width: 18px; height: 18px; }
#search-dialog .empty { grid-column: 1/-1; padding: 28px 0; font-size: 15px; line-height: 1.6; }
#contact-dialog .dialog-top { padding: 16px 32px; background: transparent; border-bottom-color: #e4e5e1; }
#contact-dialog .dialog-body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.6fr); align-items: start; gap: 48px; padding: 40px 40px 36px; }
#contact-dialog .contact-heading { padding-top: 3px; }
#contact-dialog h2 { font-size: clamp(28px,2.8vw,36px); line-height: 1.2; font-weight: 300; letter-spacing: -0.015em; margin: 0; max-width: 270px; }
#contact-dialog .contact-lead { font-size: 14px; line-height: 1.7; color: #666b6b; margin: 20px 0 0; max-width: 240px; }
#contact-dialog .project-form { gap: 22px 24px; min-width: 0; }
#contact-dialog .field { gap: 4px; min-width: 0; }
#contact-dialog .field label { font-size: 12px; font-weight: 500; line-height: 1.5; color: #565c5d; }
#contact-dialog .field input, #contact-dialog .field select, #contact-dialog .field textarea { padding: 11px 0; min-height: 46px; border: 0; border-bottom: 1px solid #b9bfbd; border-radius: 0; background: transparent; color: #292f30; font-size: 15px; line-height: 1.5; transition: border-color .2s,background .2s; }
#contact-dialog .field :is(input,select,textarea):focus { border-bottom-color: #292f30; outline: none; background-color: transparent; box-shadow: none; }
#contact-dialog .field select { appearance:none; -webkit-appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23565c5d' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; background-size:16px; }
#contact-dialog .field :is(input,textarea)::placeholder { color: #767c7d; opacity: 1; }
#contact-dialog .field textarea { min-height: 96px; resize: vertical; }
#contact-dialog .form-note { font-size: 11px !important; line-height: 1.65; color: #707676; margin: 0; }
#contact-dialog .contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; grid-column: 1/-1; padding-top: 2px; }
#contact-dialog .contact-actions .button { margin: 0; justify-content: space-between; gap: 24px; min-height: 50px; padding: 14px 20px; font-size: 14px; border-radius: 0; }
#contact-dialog .contact-actions .secondary { padding: 10px 0; min-height: 44px; border: 0; border-bottom: 1px solid #b9bfbd; background: transparent; color: #505757; gap: 12px; font-size: 12px; }
#contact-dialog .contact-actions .secondary:hover { color: #202526; border-color: #202526; }
#contact-dialog .contact-actions svg { width: 18px; height: 18px; }
#contact-dialog .form-success { grid-column: 1/-1; font-size: 14px; line-height: 1.6; }
html:lang(zh) #contact-dialog h2 { font-size: 30px; line-height: 1.5; letter-spacing: .015em; font-weight: 400; }
html:lang(zh) #contact-dialog .dialog-top .eyebrow { letter-spacing: .12em; }
html:lang(zh) #contact-dialog .field label { font-size: 13px; font-weight: 400; }
@media (max-width:900px) {
 #contact-dialog .dialog-body { grid-template-columns: 1fr; gap: 26px; padding: 28px 32px; }
 #contact-dialog h2, #contact-dialog .contact-lead { max-width: none; }
 #contact-dialog .contact-lead { margin-top: 10px; }
}
@media (max-width:700px) {
 .led-experience { --led-header: 70px; }
 .led-experience::after { height: 25svh; }
 .led-experience .led-demo { padding: 28px 24px 24px; }
 .led-experience .led-scene { min-height: 420px; }
 .led-experience .led-power { min-width: 110px; padding: 12px; }
 .led-experience .led-temperatures button { min-width: 72px; }
 .led-experience .led-start { min-width: 230px; }
 #search-dialog, #contact-dialog { width: calc(100vw - 24px); max-height: calc(100svh - 24px); }
 #search-dialog .dialog-top, #contact-dialog .dialog-top { padding: 12px 20px; }
 #search-dialog .dialog-body, #contact-dialog .dialog-body { padding: 22px 20px; }
 #search-dialog .dialog-top .eyebrow { font-size: 10px; letter-spacing: .1em; }
 #search-dialog .search-input { padding: 14px 12px; gap: 10px; }
 #search-dialog .search-input input { font-size: 16px; }
 #search-results { grid-template-columns: 1fr; }
 #search-dialog .search-result { grid-template-columns: 54px minmax(0,1fr) 16px; padding: 10px; }
 #search-dialog .search-result img { width: 54px; height: 62px; }
 #contact-dialog .project-form { grid-template-columns: 1fr; gap: 18px; }
 #contact-dialog .contact-actions { align-items: stretch; flex-direction: column; gap: 12px; }
 #contact-dialog .contact-actions .button { width: 100%; }
 #contact-dialog .contact-actions .secondary { align-self: center; width: auto; }
 #contact-dialog .field input, #contact-dialog .field select, #contact-dialog .field textarea { font-size: 16px; }
 html:lang(zh) #contact-dialog h2 { font-size: 26px; }
}
@media (prefers-reduced-motion:reduce) {
 .led-experience::after { height: 0; }
 .led-experience .led-demo { position: relative; top: auto; }
}

/* Focus and frosted surfaces: quiet light follows the content hierarchy. */
.callout {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(54px,6vw,86px); color: #fafafa; border-top: 1px solid #ffffff30;
  background: radial-gradient(ellipse at 12% 0%,rgba(220,211,192,.2),transparent 65%),linear-gradient(115deg,#3d4041,#242729);
}
.callout h2 { max-width: 760px; color: #f6f5f2; text-wrap: balance; }
.callout > .button {
  flex-shrink: 0; min-height: 56px; color: #252a2c; background: linear-gradient(135deg,#ffffffef,#eceeead9);
  border: 1px solid #ffffffb8; border-radius: 4px; box-shadow: 0 10px 32px #00000018,inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); transition:background .2s,box-shadow .2s;
}
.callout > .button:hover { background: #fff; box-shadow: 0 12px 36px #00000024,inset 0 1px 0 #fff; }
.callout > .button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
#contact-dialog {
  background: rgba(247,248,246,.94); border: 0; border-radius: 8px;
  box-shadow: 0 26px 90px #15191b40;
  -webkit-backdrop-filter: blur(28px) saturate(85%); backdrop-filter: blur(28px) saturate(85%);
}
#contact-dialog::backdrop { background: rgba(22,26,28,.54); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
#contact-dialog .dialog-top { background: linear-gradient(110deg,#fffffff2,#f5f7f3c4); }
#contact-dialog .dialog-body { gap: 0; padding: 0; align-items: stretch; }
#contact-dialog .contact-heading {
  padding: 40px 32px; border: 0;
  background: radial-gradient(ellipse at 10% 0%,rgba(224,212,186,.3),transparent 72%),linear-gradient(155deg,#454847,#292d2f);
  box-shadow: none;
}
#contact-dialog .contact-heading h2 { color: #fcfaf5; }
#contact-dialog .contact-lead { color: #d4d7d4; }
#contact-dialog .project-form { padding: 34px 36px; background: linear-gradient(135deg,#fffffff2,#f3f5f1eb); }
#contact-dialog .field { padding: 4px 8px; margin: -4px -8px; }
#contact-dialog .field :is(input,select,textarea):focus-visible { outline: 1px solid #657273; outline-offset: 3px; }
#contact-dialog .contact-actions > .button:not(.secondary) {
  background: linear-gradient(145deg,#505859,#303638); border-color:#353e40; border-radius:3px;
  box-shadow: 0 7px 20px #27303226,inset 0 1px 0 #ffffff2b;
}
#contact-dialog .contact-actions > .button:not(.secondary):hover { background:#414b4d; }
#search-dialog { background:linear-gradient(130deg,#fffffff2,#edf0ecf2); border-radius:8px; }
#search-dialog .search-input { box-shadow:0 6px 24px #242a2c08,inset 0 1px 0 #fff; }
#search-dialog .search-result { background:#ffffff70; border-color:#daddd7; }
#search-dialog .search-result:hover, #search-dialog .search-result:focus-visible { background:#fff; box-shadow:0 5px 18px #252b2d0c; }
#menu-dialog { background:linear-gradient(130deg,#ffffffe8,#e8ece6eb); box-shadow:-18px 0 60px #1920231c,inset 1px 0 0 #ffffffdb; }
#menu-dialog .menu-links a:hover, #menu-dialog .menu-links a:focus-visible { background:#ffffffad; }
#menu-dialog button.menu-project { width:100%; text-align:left; color:inherit; background:transparent; border:0; border-top:1px solid var(--line); padding:20px 0 0; }
.split.dark .split-copy { background:radial-gradient(ellipse at 12% 0%,#cac6b217,transparent 70%),linear-gradient(135deg,#363b3b,#262a2c); }
.split.dark .split-copy h2 { color:#fafaf8; }
.split.dark .split-copy > p { color:#d5d9d6; }
.client-shell:focus-within { box-shadow:0 18px 56px #2a2c2e12,inset 0 1px 0 #fff; border-color:#fff; }
@media(max-width:900px) {
 #contact-dialog .contact-heading { padding:26px 32px; border-right:0; }
 #contact-dialog .project-form { padding:28px 32px; }
}
@media(max-width:700px) {
 .callout { align-items:flex-start; }
 .callout > .button { align-self:flex-start; }
 #contact-dialog .contact-heading { padding:24px 22px; }
 #contact-dialog .project-form { padding:26px 22px; }
 #contact-dialog .dialog-body { padding:0; gap:0; }
}
@media(prefers-reduced-motion:reduce) {
 #contact-dialog .field,.callout>.button { transition:none; }
}
@media(prefers-reduced-transparency:reduce) {
 #contact-dialog,#search-dialog,#menu-dialog { background:#f8f9f7; -webkit-backdrop-filter:none; backdrop-filter:none; }
 #contact-dialog .project-form { background:#f8f9f7; }
 .callout>.button { background:#f7f8f6; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Linear, neutral surfaces: restrained light, square architectural edges. */
:root { --action-light: linear-gradient(155deg,#47494a 0%,#343637 70%,#303233 100%); }
.button:not(.secondary), .callout > .button, .led-experience .led-start,
#contact-dialog .contact-actions > .button:not(.secondary) {
  border-radius:0; border:1px solid #414344; color:#fff;
  background:var(--action-light); box-shadow:inset 0 1px 0 #ffffff14;
}
.button:not(.secondary):hover, .callout > .button:hover, .led-experience .led-start:hover,
#contact-dialog .contact-actions > .button:not(.secondary):hover {
  background:linear-gradient(155deg,#525455,#393b3c); box-shadow:inset 0 1px 0 #ffffff20;
}
.button.secondary, #contact-dialog, #search-dialog,
#search-dialog .search-input, #search-dialog .search-result,
.product-model-controls button { border-radius:0; }
.callout {
  color:#303233; border-top:1px solid #d8d9d9; border-bottom:1px solid #d8d9d9;
  background:linear-gradient(110deg,#f5f5f4,#ededed);
}
.callout h2 { color:#303233; }
.callout > .button { -webkit-backdrop-filter:none; backdrop-filter:none; }
.callout > .button:focus-visible { outline-color:#424647; }
#contact-dialog .contact-heading {
  background:radial-gradient(ellipse at 0% 0%,#ffffff12,transparent 75%),linear-gradient(155deg,#3d3f40,#292b2c);
}
#contact-dialog .dialog-top, #contact-dialog .project-form,
#search-dialog { background:linear-gradient(135deg,#fafafa,#f3f3f3); }
#menu-dialog { background:linear-gradient(130deg,#fffffff0,#edededf0); }
.split.dark .split-copy { background:linear-gradient(135deg,#383a3b,#2c2e2f); }
.inner-head { background:linear-gradient(135deg,#fafafa 30%,#f3f3f3); }
.inner-head .section-action { margin-top:26px; min-height:54px; }
@media (max-width:700px) {
 .inner-head .section-action { max-width:100%; font-size:13px; gap:24px; }
}