.studio-story { background: var(--green); color: var(--cream); }
.studio-story__intro { padding-bottom: 45px; }
.studio-story__intro h2 { max-width: 850px; color: var(--cream); }
.studio-story__intro h2 em { color: var(--gold); }
.studio-story__intro > p:last-child { max-width: 520px; color: var(--gold); font-size: 18px; }
.studio-story__layout { padding-top: 0; display: grid; grid-template-columns: 1.25fr .75fr; gap: 8%; align-items: start; }
.studio-table { position: sticky; top: 24px; }
.studio-table__surface { position: relative; height: min(70vh, 670px); overflow: hidden; border: 1px solid var(--green); background: radial-gradient(circle at 50% 43%,var(--green) 0 12%,var(--green) 45%,var(--green) 100%); box-shadow: 0 28px 70px #0005; }
.studio-table__surface::after { content: "HB PHOTOGRAPHY · BERLIN"; position: absolute; left: 28px; bottom: 22px; font-size: 10px; letter-spacing: .18em; color: var(--text); }
.studio-camera { position: absolute; left: 50%; top: 48%; width: 220px; height: 145px; border-radius: 18px; background: var(--green); border: 1px solid var(--green); transform: translate(-50%,-50%) translateY(30px); opacity: 0; transition: .75s ease; box-shadow: 0 24px 45px #0008; }
.studio-camera__top { position: absolute; width: 72px; height: 28px; left: 24px; top: -24px; border-radius: 8px 8px 0 0; background: var(--green); border: 1px solid var(--green); }
.studio-camera__lens { position: absolute; width: 108px; aspect-ratio: 1; left: 56px; top: 18px; border-radius: 50%; border: 13px solid var(--green); background: radial-gradient(circle at 35% 30%,#86a39b88,transparent 22%),radial-gradient(circle,var(--green) 28%,var(--green) 30%,var(--green) 58%,var(--text) 61%,var(--green) 66%); box-shadow: 0 0 0 3px var(--text); }
.studio-light { position: absolute; top: 50px; width: 120px; height: 210px; opacity: 0; transition: .75s ease; }
.studio-light span { display: block; width: 100%; height: 130px; background: linear-gradient(135deg,var(--cream),var(--gold)); clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); box-shadow: 0 0 70px #ffffdf66; }
.studio-light::after { content: ""; position: absolute; left: 50%; top: 125px; width: 2px; height: 120px; background: var(--text); }
.studio-light--left { left: 7%; transform: rotate(14deg) translateX(-30px); }
.studio-light--right { right: 7%; transform: rotate(-14deg) translateX(30px); }
.studio-product { position: absolute; left: 50%; top: 53%; width: min(78%,520px); aspect-ratio: 1.5; transform: translate(-50%,-40%) scale(.72); opacity: 0; transition: .75s ease; overflow: hidden; box-shadow: 0 22px 50px #0008; background: var(--white); }
.studio-product img,.studio-result img { width: 100%; height: 100%; object-fit: contain; }
.studio-focus { position: absolute; inset: 12%; opacity: 0; transform: scale(1.08); transition: .6s ease; }
.studio-focus i { position: absolute; width: 46px; height: 46px; border-color: var(--gold); }
.studio-focus i:nth-child(1) { left: 0; top: 0; border-left: 2px solid; border-top: 2px solid; }
.studio-focus i:nth-child(2) { right: 0; top: 0; border-right: 2px solid; border-top: 2px solid; }
.studio-focus i:nth-child(3) { left: 0; bottom: 0; border-left: 2px solid; border-bottom: 2px solid; }
.studio-focus i:nth-child(4) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.studio-focus span { position: absolute; right: 0; bottom: -32px; font-size: 10px; letter-spacing: .16em; color: var(--gold); }
.studio-result { position:absolute;inset:7%;padding:24px;display:grid;grid-template-rows:auto 1fr;background:var(--white);color:var(--green);opacity:0;transform:translateY(35px) scale(.94);transition:.75s ease;box-shadow:0 25px 60px #0007 }
.studio-shopbar{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--gold);font:10px/1 Arial,sans-serif;letter-spacing:.12em}.studio-shop-product{display:grid;grid-template-columns:1.35fr .75fr;gap:22px;align-items:center;min-height:0}.studio-shop-product>img{width:100%;height:100%;object-fit:contain;min-height:0}.studio-shop-product h3{margin:7px 0 12px;font:25px/1.05 Georgia,serif}.studio-shop-product p{margin:0 0 18px;font-weight:600}.studio-shop-product small{display:block;margin-top:10px;font-size:9px;color:var(--text)}.studio-shop-product button{width:100%;border:0;background:var(--green);color:white;padding:12px 8px;font-size:10px;letter-spacing:.08em}
.studio-progress { height: 2px; margin-top: 20px; background: var(--green); }
.studio-progress span { display: block; width: 20%; height: 100%; background: var(--gold); transition: width .45s ease; }
.studio-table[data-studio-stage="0"] .studio-camera { opacity: 1; transform: translate(-50%,-50%); }
.studio-table[data-studio-stage="1"] .studio-camera { opacity: .32; transform: translate(-50%,-50%) scale(.85); }
.studio-table[data-studio-stage="1"] .studio-light { opacity: 1; transform: rotate(0) translateX(0); }
.studio-table[data-studio-stage="2"] .studio-light { opacity: .55; transform: rotate(0) translateX(0); }
.studio-table[data-studio-stage="2"] .studio-product { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.studio-table[data-studio-stage="3"] .studio-product { opacity: 1; transform: translate(-50%,-50%) scale(.92); }
.studio-table[data-studio-stage="3"] .studio-focus { opacity: 1; transform: scale(1); }
.studio-table[data-studio-stage="4"] .studio-result { opacity: 1; transform: translateY(0) scale(1); }
.studio-story__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .35s; }
.studio-story__step.is-active { opacity: 1; }
.studio-story__step > span { font: 58px/1 Georgia,serif; color: var(--text); }
.studio-story__step > p { margin: 15px 0 22px; font-size: 11px; letter-spacing: .18em; color: var(--gold); }
.studio-story__step h3 { margin: 0 0 14px; font: 34px/1.1 Georgia,serif; }
.studio-story__step small { max-width: 330px; color: var(--gold); font-size: 16px; line-height: 1.6; }

.process {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.process-heading {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  align-items: end;
  gap: 8%;
  margin-bottom: 48px;
}

.process-heading > p {
  margin: 0;
  color: var(--muted);
  max-width: 430px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}

.process-grid::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 4%;
  right: 4%;
  border-top: 1px solid var(--text);
}

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

.process-step figure {
  margin: 0;
  background: white;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.process-step figure > img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: contain;
  background: var(--white);
}

.process-step--studio figure > img { object-fit: cover; }
.process-step--detail figure > img { object-fit: contain; transform: none; }

.process-step figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  letter-spacing: .12em;
}

.process-step h3 {
  font-family: Georgia, serif;
  font-size: 23px;
  margin: 20px 0 8px;
}

.process-step > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.catalog-example {
  height: 310px;
  background: var(--cream);
  padding: 30px 18px 18px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.catalog-example > span {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--muted);
  text-align: right;
}

.shop-product {
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--cream);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 10px 12px 12px;
}

.shop-product > img {
  width: 100%;
  height: 195px;
  object-fit: contain;
}

.shop-meta {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.shop-meta small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
}

.shop-meta strong {
  font: 15px/1.15 Georgia, serif;
  font-weight: 400;
  text-align: right;
}

.hbp-faq {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 8%;
  background: var(--white);
}

.hbp-faq__head {
  position: sticky;
  top: 30px;
  align-self: start;
}

.hbp-faq__list { border-top: 1px solid var(--line); }
.hbp-faq__item { border-bottom: 1px solid var(--line); }

.hbp-faq__item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.hbp-faq__item summary::-webkit-details-marker { display: none; }
.hbp-faq__item summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

.hbp-faq__nr {
  flex: 0 0 2.4rem;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hbp-faq__q {
  flex: 1;
  font-size: 18px;
  line-height: 1.35;
}

.hbp-faq__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.hbp-faq__icon::before,
.hbp-faq__icon::after {
  content: "";
  position: absolute;
  inset: auto 0 50%;
  height: 1px;
  background: currentColor;
  transition: transform .2s;
}

.hbp-faq__icon::after { transform: rotate(90deg); }
.hbp-faq__item[open] .hbp-faq__icon::after { transform: rotate(0); }

.hbp-faq__a {
  margin-left: calc(2.4rem + 16px);
  padding: 0 28px 24px 0;
  max-width: 67ch;
  color: var(--muted);
}

.hbp-faq__a p { margin: 0; }
.hbp-faq__a ul { margin: 0 0 14px; padding-left: 18px; }
.hbp-faq__a li { margin: 7px 0; }
.hbp-faq__a a,
.hbp-faq__more a { text-decoration: underline; text-underline-offset: 3px; }
.hbp-faq__more { grid-column: 2; margin: 26px 0 0; }
.hbp-faq__more a { font-weight: 600; }

@media (max-width: 1000px) {
  .studio-story__layout { grid-template-columns: 1.05fr .95fr; gap: 5%; }
  .studio-table__surface { height: 560px; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; }
  .process-grid::before { display: none; }
  .process-step figure > img,
  .catalog-example { height: 360px; }
  .shop-product > img { height: 250px; }
}

@media (max-width: 700px) {
  .studio-story__intro { padding-bottom: 30px; }
  .studio-story__layout { grid-template-columns: 1fr; }
  .studio-table { top: 12px; z-index: 2; }
  .studio-table__surface { height: 52vh; min-height: 400px; }
  .studio-story__steps { position: relative; z-index: 3; }
  .studio-story__step { min-height: 58vh; padding-top: 48vh; justify-content: flex-start; text-shadow: 0 2px 14px var(--green); }
  .studio-story__step > span { font-size: 44px; }
  .studio-story__step h3 { font-size: 29px; }
  .studio-light { width: 85px; height: 160px; }
  .studio-camera { width: 170px; height: 112px; }
  .studio-camera__lens { width: 80px; left: 45px; top: 13px; border-width: 10px; }
  .studio-result { inset: 6%; padding: 22px; }
  .process-heading,
  .hbp-faq { grid-template-columns: 1fr; gap: 28px; }
  .process-heading { margin-bottom: 32px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step figure > img,
  .catalog-example { height: 370px; }
  .shop-product > img { height: 260px; }
  .process-step h3 { font-size: 22px; }
  .hbp-faq__head { position: static; }
  .hbp-faq__q { font-size: 17px; }
  .hbp-faq__a { margin-left: 0; padding-right: 0; }
  .hbp-faq__more { grid-column: 1; }
  .hbp-faq__item summary { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-camera,.studio-light,.studio-product,.studio-focus,.studio-result,.studio-story__step,.studio-progress span { transition: none; }
  .hbp-faq__icon::after { transition: none; }
}