/* ================================
   Steel&Spark Studio — Studio Page Sections
   ================================ */

/* Общие отступы и типографика секций для 3-й страницы */

.ss-section {
  padding: 72px 0;
  position: relative;
}

.ss-section-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-color-metal-soft);
}

.ss-section-title {
  margin: 0 0 12px;
  font-family: "SSDisplay", system-ui, sans-serif;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.25;
  color: var(--ss-color-metal);
}

.ss-section-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ss-color-ink-soft);
}

.ss-section-text--compact {
  max-width: 520px;
}

/* ================================
   Section 1 — Studio hero
   ================================ */

.st-hero {
  background: radial-gradient(circle at 0 0, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-bottom: 1px solid var(--ss-color-line);
}

.st-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.st-hero-title {
  font-size: clamp(24px, 3vw, 32px);
}

.st-hero-lead {
  max-width: 620px;
}

.st-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}

.st-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.96);
  border: 1px solid rgba(194, 106, 58, 0.4);
  font-size: 11px;
  color: var(--ss-color-metal-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-hero-note {
  font-size: 13px;
  max-width: 520px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.98);
  border: 1px dashed rgba(62, 67, 76, 0.22);
}

/* hero gallery */

.st-hero-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.st-hero-card {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}

.st-hero-card img {
  width: 100%;
  max-width: 340px; /* <= 350px */
  border-radius: 20px;
  display: block;
}

.st-hero-card--wide {
  align-self: center;
}

.st-hero-column {
  display: grid;
  gap: 8px;
}

.st-hero-card--toolwall {
  transform: translateX(6px) translateY(-2px);
}

.st-hero-card--sparks {
  transform: translateX(-4px) translateY(4px);
}

.st-hero-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 48px rgba(10, 12, 20, 0.3);
}

.st-hero-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(21, 22, 30, 0.86);
  color: #fff7ed;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================================
   Section 2 — Studio philosophy & zones
   ================================ */

.st-philosophy {
  background: linear-gradient(180deg, #f4f2ee 0, #f1eee9 50%, #f4f2ee 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-ph-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-ph-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-ph-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.st-ph-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-ph-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.st-ph-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-ph-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-ph-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-ph-photo--zones {
  z-index: 2;
}

.st-ph-photo--bench {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 3 — Order process intro
   ================================ */

.st-process {
  background: radial-gradient(circle at 100% 0, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-process-head {
  max-width: 640px;
  margin-bottom: 18px;
}

.st-process-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}

.st-process-steps {
  position: relative;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.st-process-steps::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(62, 67, 76, 0.12), rgba(194, 106, 58, 0.6));
}

.st-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.st-step-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.96);
  border: 1px solid rgba(194, 106, 58, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-step-title {
  margin: 0;
  font-size: 14px;
  color: var(--ss-color-metal);
}

.st-step-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* process gallery */

.st-process-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-process-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-process-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-process-photo--desk {
  z-index: 2;
}

.st-process-photo--sketch {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 1–3
   ================================ */

@media (max-width: 1024px) {
  .st-hero-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 28px;
  }

  .st-ph-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .st-ph-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-process-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 880px) {
  .st-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-hero-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-hero-card img {
    max-width: 320px;
  }

  .st-hero-card--toolwall,
  .st-hero-card--sparks {
    transform: translateX(0) translateY(0);
  }

  .st-ph-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-ph-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-ph-photo {
    width: min(100%, 300px);
  }

  .st-ph-photo img {
    max-width: 300px;
  }

  .st-ph-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-process-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-process-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-process-photo {
    width: min(100%, 300px);
  }

  .st-process-photo img {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  .ss-section {
    padding: 56px 0;
  }

  .st-ph-item {
    padding: 8px;
  }

  .st-step-text {
    font-size: 12px;
  }
}
/* ================================
   Section 4 — Tools & safety
   ================================ */

.st-tools {
  background: #f4f2ee;
  border-top: 1px solid var(--ss-color-line);
}

.st-tools-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-tools-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.st-tools-gallery {
  display: grid;
  gap: 10px;
}

.st-tools-photo {
  position: relative;
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-tools-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
  display: block;
}

.st-tools-photo--cut {
  transform: translateX(4px);
}

.st-tools-photo--weld {
  transform: translateX(-6px);
}

.st-tools-photo--measure {
  transform: translateX(2px);
  opacity: 0.96;
}

/* ================================
   Section 5 — Finishing & surface work
   ================================ */

.st-finishing {
  background: radial-gradient(circle at 100% 0, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-fin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: center;
}

.st-fin-gallery {
  display: grid;
  gap: 10px;
  justify-items: flex-start;
}

.st-fin-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-fin-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-fin-photo--wood {
  z-index: 2;
}

.st-fin-photo--metal {
  transform: translateX(10px) translateY(-4px);
  opacity: 0.94;
}

.st-fin-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-fin-item {
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px dashed rgba(62, 67, 76, 0.3);
}

.st-fin-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-fin-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 6 — Team & day rhythm
   ================================ */

.st-team {
  background: linear-gradient(180deg, #f4f2ee 0, #f1eee9 50%, #f4f2ee 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-team-lines {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.st-team-line {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.st-team-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ss-color-metal-soft);
}

.st-team-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.st-team-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-team-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-team-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-team-photo--group {
  z-index: 2;
}

.st-team-photo--hands {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 4–6
   ================================ */

@media (max-width: 1024px) {
  .st-tools-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .st-fin-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  }

  .st-fin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-team-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .st-tools-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-tools-gallery {
    justify-items: center;
  }

  .st-fin-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-fin-gallery {
    justify-items: center;
    margin-bottom: 10px;
  }

  .st-fin-photo {
    width: min(100%, 300px);
  }

  .st-fin-photo img {
    max-width: 300px;
  }

  .st-fin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-team-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-team-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-team-photo {
    width: min(100%, 300px);
  }

  .st-team-photo img {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  .st-tools-list {
    font-size: 12px;
  }

  .st-fin-item {
    padding: 8px;
  }

  .st-team-line {
    padding: 8px 9px;
  }

  .st-team-text {
    font-size: 12px;
  }
}
/* ================================
   Section 7 — Inspiration wall & sketches
   ================================ */

.st-inspiration {
  background: radial-gradient(circle at 0 100%, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-insp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-insp-notes {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-insp-note {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px dashed rgba(62, 67, 76, 0.3);
}

.st-insp-note-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-insp-note-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.st-insp-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-insp-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-insp-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-insp-photo--wall {
  z-index: 2;
}

.st-insp-photo--mix {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 8 — Prototype & testing zone
   ================================ */

.st-prototype {
  background: #f4f2ee;
  border-top: 1px solid var(--ss-color-line);
}

.st-proto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 32px;
  align-items: center;
}

.st-proto-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-start;
}

.st-proto-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-proto-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-proto-photo--models {
  z-index: 2;
}

.st-proto-photo--weight {
  transform: translateX(10px) translateY(-4px);
  opacity: 0.94;
}

.st-proto-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-proto-item {
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.st-proto-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-proto-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 9 — Packing & delivery rhythm
   ================================ */

.st-logistics {
  background: linear-gradient(180deg, #f4f2ee 0, #f1eee9 50%, #f4f2ee 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-log-badges {
  margin: 10px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.st-log-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.96);
  border: 1px solid rgba(194, 106, 58, 0.4);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ss-color-metal-soft);
}

.st-log-lines {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.st-log-line {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.st-log-step {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.96);
  border: 1px solid rgba(194, 106, 58, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-log-text {
  margin: 0;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.st-log-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-log-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-log-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-log-photo--packing {
  z-index: 2;
}

.st-log-photo--van {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 7–9
   ================================ */

@media (max-width: 1024px) {
  .st-insp-layout,
  .st-log-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .st-proto-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 24px;
  }

  .st-insp-notes,
  .st-proto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .st-insp-layout,
  .st-proto-layout,
  .st-log-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-insp-gallery,
  .st-proto-gallery,
  .st-log-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-insp-photo,
  .st-proto-photo,
  .st-log-photo {
    width: min(100%, 300px);
  }

  .st-insp-photo img,
  .st-proto-photo img,
  .st-log-photo img {
    max-width: 300px;
  }

  .st-insp-notes,
  .st-proto-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .st-insp-note,
  .st-proto-item,
  .st-log-line {
    padding: 8px;
  }

  .st-log-text {
    font-size: 12px;
  }
}
/* ================================
   Section 10 — Real project snapshots
   ================================ */

.st-cases {
  background: #f4f2ee;
  border-top: 1px solid var(--ss-color-line);
}

.st-cases-head {
  max-width: 640px;
  margin-bottom: 18px;
}

.st-cases-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}

.st-cases-list {
  display: grid;
  gap: 10px;
}

.st-case {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.st-case-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}

.st-case-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ss-color-metal-soft);
}

.st-case-size {
  font-size: 12px;
  color: var(--ss-color-ink-soft);
}

.st-case-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.st-cases-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-cases-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-cases-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-cases-photo--living {
  z-index: 2;
}

.st-cases-photo--cafe {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 11 — Consultation & planning
   ================================ */

.st-consult {
  background: radial-gradient(circle at 100% 0, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-consult-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 32px;
  align-items: center;
}

.st-consult-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-start;
}

.st-consult-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-consult-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-consult-photo--desk {
  z-index: 2;
}

.st-consult-photo--call {
  transform: translateX(10px) translateY(-4px);
  opacity: 0.94;
}

.st-consult-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-consult-item {
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.st-consult-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-consult-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 12 — Studio visit & open day
   ================================ */

.st-open {
  background: linear-gradient(180deg, #f4f2ee 0, #f1eee9 50%, #f4f2ee 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-open-head {
  max-width: 640px;
  margin-bottom: 18px;
}

.st-open-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-open-list {
  display: grid;
  gap: 8px;
}

.st-open-line {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.st-open-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ss-color-metal-soft);
}

.st-open-text {
  margin: 0;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.st-open-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-open-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-open-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-open-photo--tour {
  z-index: 2;
}

.st-open-photo--table {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 10–12
   ================================ */

@media (max-width: 1024px) {
  .st-cases-layout,
  .st-open-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .st-consult-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 24px;
  }

  .st-consult-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .st-cases-layout,
  .st-consult-layout,
  .st-open-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-cases-gallery,
  .st-consult-gallery,
  .st-open-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-cases-photo,
  .st-consult-photo,
  .st-open-photo {
    width: min(100%, 300px);
  }

  .st-cases-photo img,
  .st-consult-photo img,
  .st-open-photo img {
    max-width: 300px;
  }

  .st-consult-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .st-case,
  .st-consult-item,
  .st-open-line {
    padding: 8px;
  }

  .st-case-text,
  .st-open-text {
    font-size: 12px;
  }
}
/* ================================
   Section 13 — Care & warranty notes
   ================================ */

.st-care {
  background: radial-gradient(circle at 100% 0, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-care-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-care-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-care-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.st-care-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-care-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.st-care-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-care-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-care-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-care-photo--kit {
  z-index: 2;
}

.st-care-photo--metal {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

.st-care-photo--card {
  transform: translateX(-4px) translateY(2px);
  opacity: 0.96;
}

/* ================================
   Section 14 — Sustainability & offcuts
   ================================ */

.st-sustain {
  background: #f4f2ee;
  border-top: 1px solid var(--ss-color-line);
}

.st-sustain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 32px;
  align-items: center;
}

.st-sustain-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-start;
}

.st-sustain-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-sustain-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-sustain-photo--offcuts {
  z-index: 2;
}

.st-sustain-photo--decor {
  transform: translateX(10px) translateY(-4px);
  opacity: 0.94;
}

.st-sustain-photo--light {
  transform: translateX(4px) translateY(2px);
  opacity: 0.96;
}

.st-sustain-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-sustain-item {
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px dashed rgba(62, 67, 76, 0.3);
}

.st-sustain-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-sustain-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 15 — Collaboration & co-creation
   ================================ */

.st-collab {
  background: linear-gradient(180deg, #f4f2ee 0, #f1eee9 50%, #f4f2ee 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-collab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-collab-lines {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.st-collab-line {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.st-collab-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ss-color-metal-soft);
}

.st-collab-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.st-collab-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-collab-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-collab-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-collab-photo--desk {
  z-index: 2;
}

.st-collab-photo--over {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 13–15
   ================================ */

@media (max-width: 1024px) {
  .st-care-layout,
  .st-collab-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .st-sustain-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 24px;
  }

  .st-care-grid,
  .st-sustain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .st-care-layout,
  .st-sustain-layout,
  .st-collab-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-care-gallery,
  .st-sustain-gallery,
  .st-collab-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-care-photo,
  .st-sustain-photo,
  .st-collab-photo {
    width: min(100%, 300px);
  }

  .st-care-photo img,
  .st-sustain-photo img,
  .st-collab-photo img {
    max-width: 300px;
  }

  .st-care-grid,
  .st-sustain-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .st-care-item,
  .st-sustain-item,
  .st-collab-line {
    padding: 8px;
  }

  .st-care-text,
  .st-sustain-text,
  .st-collab-text {
    font-size: 12px;
  }
}
/* ================================
   Section 16 — Day rhythm & schedule
   ================================ */

.st-day {
  background: #f4f2ee;
  border-top: 1px solid var(--ss-color-line);
}

.st-day-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-day-strip {
  margin: 10px 0 8px;
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(245, 242, 236, 0.96);
  overflow-x: auto;
  scrollbar-width: none;
}

.st-day-strip::-webkit-scrollbar {
  display: none;
}

.st-day-slot {
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.st-day-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-day-text {
  margin: 0;
  font-size: 12px;
  color: var(--ss-color-ink-soft);
}

.st-day-note {
  margin-top: 4px;
  font-size: 13px;
}

.st-day-gallery {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: flex-end;
}

.st-day-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-day-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-day-photo--morning {
  z-index: 2;
}

.st-day-photo--noon {
  transform: translateX(-8px) translateY(-2px);
  opacity: 0.95;
}

.st-day-photo--evening {
  transform: translateX(-4px) translateY(4px);
  opacity: 0.93;
}

/* ================================
   Section 17 — Studio limits & principles
   ================================ */

.st-notes {
  background: radial-gradient(circle at 100% 0, #fff9ef 0, #f4f2ee 45%, #e9e6e0 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 32px;
  align-items: center;
}

.st-notes-gallery {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: flex-start;
}

.st-notes-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-notes-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-notes-photo--nomass {
  z-index: 2;
}

.st-notes-photo--stock {
  transform: translateX(8px) translateY(-4px);
  opacity: 0.94;
}

.st-notes-photo--closing {
  transform: translateX(4px) translateY(2px);
  opacity: 0.96;
}

.st-notes-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.st-notes-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px dashed rgba(62, 67, 76, 0.3);
}

.st-notes-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.st-notes-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 18 — Final studio CTA
   ================================ */

.st-final {
  background: linear-gradient(180deg, #f4f2ee 0, #f1eee9 50%, #f4f2ee 100%);
  border-top: 1px solid var(--ss-color-line);
}

.st-final-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.st-final-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.st-final-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.st-final-note {
  margin-top: 10px;
  font-size: 13px;
  max-width: 520px;
}

.st-final-link {
  color: var(--ss-color-metal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.st-final-link:hover {
  text-decoration-style: dashed;
}

.st-final-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.st-final-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.st-final-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.st-final-photo--map {
  z-index: 2;
}

.st-final-photo--door {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 16–18
   ================================ */

@media (max-width: 1024px) {
  .st-day-layout,
  .st-final-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .st-notes-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 24px;
  }

  .st-notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .st-day-layout,
  .st-notes-layout,
  .st-final-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-day-gallery,
  .st-notes-gallery,
  .st-final-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .st-day-photo,
  .st-notes-photo,
  .st-final-photo {
    width: min(100%, 300px);
  }

  .st-day-photo img,
  .st-notes-photo img,
  .st-final-photo img {
    max-width: 300px;
  }

  .st-notes-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-final-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .st-day-slot {
    min-width: 140px;
  }

  .st-day-text,
  .st-notes-text,
  .st-final-note {
    font-size: 12px;
  }

  .st-notes-item {
    padding: 8px;
  }
}