.editorial-section {
  color: var(--studio-ink);
  font-family: var(--studio-sans);
  padding-block: clamp(46px, 7vw, 95px);
}
.editorial-section h2 {
  color: var(--studio-red);
  font-family: var(--studio-serif);
  font-size: clamp(41px, 5.7vw, 79px);
  font-weight: 700;
  letter-spacing: -.052em;
  line-height: .99;
}
.editorial-section .eyebrow { color: var(--studio-red-deep); }
.editorial-section .section-intro > p { color: var(--studio-muted); }
#platform.editorial-section {
  background: radial-gradient(ellipse at 90% 0%, #e1ead6, transparent 64%), var(--studio-sage);
}
#teams.editorial-section, #faq.editorial-section { background: var(--studio-cream); border-color: #cbbdaf; }

.editorial-section .offer-row, .editorial-section .role-grid { gap: clamp(12px, 1.4vw, 20px); }
.editorial-section .offer-card, .editorial-section .role-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid #c4b5a4;
  border-radius: 6px;
  background: #fffaf0;
}
.editorial-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: clamp(16px, 2.25vw, 29px);
}
.editorial-section .offer-card .eyebrow { margin-top: 0; }
.editorial-section .offer-card h3, .editorial-section .role-card h3 {
  color: var(--studio-red-deep);
  font-family: var(--studio-serif);
  font-size: clamp(24px, 2.9vw, 39px);
  letter-spacing: -.04em;
  line-height: 1.05;
}
.editorial-section .offer-card p:not(.eyebrow), .editorial-section .role-card p { color: var(--studio-muted); }
.editorial-section .offer-card .text-link, .editorial-section .role-card .text-link { color: var(--studio-red-deep); }
.editorial-section .role-card.featured { background: var(--studio-red-deep); color: #fffaf0; }
.editorial-section .role-card.featured h3, .editorial-section .role-card.featured .text-link { color: #fff5e9; }
.editorial-section .role-card.featured p { color: #f0ded5; }
.editorial-section .role-card:last-child { background: #e0e9d6; }

.editorial-visual {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
}
.offer-visual, .role-visual { aspect-ratio: 1.72; border-bottom: 1px solid #68453a42; }
.visual-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms cubic-bezier(.22,.61,.36,1);
}
.editorial-card-copy a:focus-visible { outline-offset: 5px; }
.editorial-section article:focus-within .visual-photo { transform: scale(1.045); }
@media (hover: hover) {
  .editorial-section article:hover .visual-photo { transform: scale(1.045); }
}
.visual-icon {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #eadbd1;
  border-radius: 4px;
  color: var(--studio-red-deep);
  background: #fff8ee;
}
.visual-icon svg { width: 17px; height: 17px; }
.offer-brief, .offer-vault { display: grid; place-items: center; }
.offer-brief { background: #9c3a30; }
.offer-vault { background: #becfb9; }
.offer-brief::before, .offer-vault::before {
  content: "";
  z-index: -1;
  position: absolute;
  width: 68%;
  height: 95%;
  inset: -40% auto auto 12%;
  transform: rotate(39deg) skewY(21deg);
  border-right: 1px solid #fff3e777;
  border-bottom: 1px solid #fff3e777;
  box-shadow: 11px 11px 0 -10px #fff3e777, 22px 22px 0 -20px #fff3e755;
}
.brief-sheet {
  display: grid;
  gap: 8px;
  width: 49%;
  padding: 12% 8% 9%;
  border: 1px solid #aa8c7c;
  border-radius: 5px;
  background: var(--studio-cream);
  transform: rotate(-8deg);
  box-shadow: 11px 11px 0 #6928208c, 19px 19px 0 #69282045;
}
.brief-sheet > i { height: 4px; background: #bc9d8e; border-radius: 3px; }
.brief-sheet > i:first-child { width: 63%; height: 8px; background: var(--studio-red-deep); }
.brief-sheet > i:nth-child(3) { width: 75%; }
.brief-marks { display: flex; gap: 5px; }
.brief-marks span { width: 12px; height: 12px; border-radius: 50%; background: #d3dfc6; border: 1px solid #96a691; }
.brief-marks span:first-child { background: var(--studio-red); border-color: var(--studio-red); }
.vault-stack { position: relative; width: 48%; aspect-ratio: 1.49; transform: rotate(-6deg); }
.vault-stack > div { position: absolute; inset: 0; border: 4px solid var(--studio-cream); border-radius: 5px; background: #8c4336; box-shadow: 0 3px 8px #3b3c2e28; }
.vault-stack > div:first-child { transform: translate(16px,-12px) rotate(14deg); background: #a55b4a; }
.vault-stack > div:nth-child(2) { transform: translate(-9px,10px) rotate(-10deg); background: #887a5f; }
.vault-stack img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.offer-managed .visual-photo { object-position: center 45%; }
.offer-managed::after, .role-visual::after, .finder-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(0deg, #2b181a60, transparent 54%);
  pointer-events: none;
}
.shot-progress, .photo-note-mark, .finder-trail, .faq-art-note {
  position: absolute;
  z-index: 2;
  border: 1px solid #fff3dfb8;
  border-radius: 4px;
  background: var(--studio-cream);
  color: var(--studio-red-deep);
  box-shadow: 0 6px 17px #351d1f35;
}
.shot-progress {
  inset: auto 13px 13px auto;
  display: flex;
  gap: 4px;
  padding: 7px;
}
.shot-progress span { width: 16px; height: 11px; border-radius: 2px; background: #bdcdb4; }
.shot-progress span:nth-child(2) { background: #a35a4b; }
.shot-progress span:nth-child(3) { background: #d9b19f; }
.shot-progress span:nth-child(4) { background: #dbcfc2; }
.role-visual { aspect-ratio: 1.54; }
.role-creative .visual-photo { object-position: center 46%; }
.role-crew .visual-photo { object-position: center 46%; }
.role-brand .visual-photo { object-position: center 52%; }
.photo-note-mark {
  inset: auto 12px 11px auto;
  display: grid;
  grid-template-columns: 19px 1fr;
  grid-template-rows: 4px 4px;
  gap: 4px 6px;
  align-items: center;
  width: 77px;
  padding: 7px;
}
.photo-note-mark svg { grid-row: 1 / 3; width: 16px; height: 16px; }
.photo-note-mark i, .faq-art-note i { display: block; height: 3px; border-radius: 4px; background: #a29083; }
.photo-note-mark i:last-child, .faq-art-note i:last-child { width: 67%; background: #b5c4aa; }

#finder.editorial-section {
  color-scheme: light;
  background: radial-gradient(ellipse at 3% 0%, #9a3b2f, transparent 66%), var(--studio-red-deep);
  color: #fff8ee;
}
#finder .finder-grid { align-items: center; gap: clamp(26px, 6vw, 80px); }
#finder .finder-intro h2 { color: #fff5e9; }
#finder .finder-intro .eyebrow { color: #dcebd0; }
#finder .finder-intro > p:not(.eyebrow) { color: #fff5e9; }
#finder .finder-foot svg { color: #dcebd0; }
.finder-visual { aspect-ratio: 2.05; max-width: 460px; margin-top: 23px; border: 1px solid #f3e5d68a; border-radius: 6px; }
.finder-visual .visual-photo { object-position: center 44%; }
.finder-trail { display: flex; gap: 5px; align-items: center; inset: auto 10px 10px auto; padding: 6px; }
.finder-trail span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 4px; color: var(--studio-red-deep); background: #e6dacb; transition: background-color 200ms, color 200ms; }
.finder-trail span svg { width: 16px; height: 16px; }
.finder-trail i { width: 12px; height: 1px; background: #ba9e8d; }
.finder-grid:not(:has(.step-line i:nth-child(2).active)) .finder-trail span:nth-of-type(1),
.finder-grid:has(.step-line i:nth-child(2).active):not(:has(.finder-result)) .finder-trail span:nth-of-type(2),
.finder-grid:has(.finder-result) .finder-trail span:nth-of-type(3) { background: var(--studio-red-deep); color: #fffaf0; }
#finder .finder-card { color: var(--studio-ink); background: #fff9ee; border-color: #e2c7b5; }
#finder .step-line, #finder .finder-result .result-meta, #finder .finder-card .finder-error { color: var(--studio-red-deep); }
#finder .step-line i { background: #dbc9bc; }
#finder .step-line i.active { background: var(--studio-red); }
#finder .finder-option { color: var(--studio-ink); background: #f3ebdf; border-color: #c9b8aa; }
#finder .finder-option:hover { border-color: var(--studio-red); }
#finder .finder-option:has(input:checked) { background: var(--studio-sage); border-color: #829c7c; }
#finder .finder-option:has(input:focus-visible) { outline-color: var(--studio-red-deep); }
#finder .finder-option input { accent-color: var(--studio-red-deep); }
#finder .finder-actions .primary { color: #fffaf0; background: var(--studio-red-deep); }
#finder .finder-result p:not(.result-meta), #finder .finder-result ul { color: var(--studio-muted); }
#finder .finder-result li::marker { color: var(--studio-red); }

.faq-visual { max-width: 460px; aspect-ratio: 1.85; margin-top: 21px; border: 1px solid #bca899; border-radius: 6px; }
.faq-visual .visual-photo { object-position: center 48%; }
.faq-art-note {
  inset: auto 14px 13px auto;
  display: grid;
  grid-template-columns: 21px 1fr;
  grid-template-rows: 4px 4px;
  align-items: center;
  gap: 6px;
  width: 86px;
  padding: 10px;
  transform: rotate(-6deg);
}
.faq-art-note svg { grid-row: 1 / 3; width: 18px; height: 18px; }
#faq .faq-list { align-self: start; border-top-color: #bdab9c; }
#faq details { border-bottom-color: #bdab9c; }
#faq details[open] { background: #f8f4e9; }
#faq summary { color: var(--studio-red-deep); }
#faq summary::after {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid #a98978;
  border-radius: 50%;
  color: var(--studio-red-deep);
}
#faq details[open] summary::after { background: var(--studio-sage); }
#faq details p { color: var(--studio-muted); }

.visual-entered .visual-detail { animation: editorial-arrive .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes editorial-arrive {
  from { opacity: .5; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 720px) {
  .editorial-section .offer-row, .editorial-section .role-grid { grid-template-columns: 1fr; }
  .offer-visual { aspect-ratio: 1.9; }
  .role-visual { aspect-ratio: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-section .visual-photo, .finder-trail span { transition: none; }
  .visual-entered .visual-detail { animation: none; }
}

.role-previews .section-heading { margin-bottom: 2rem; }
.role-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.role-preview-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid #cfc4b8; border-radius: 1rem; background: #fffbf4; color: #241918; }
.role-preview-card .eyebrow { color: #772c24; margin-bottom: .65rem; }
.role-preview-card h3 { font-size: clamp(1.3rem, 2.25vw, 1.85rem); margin: 0 0 .5rem; }
.role-preview-card figure { width: 100%; margin: auto 0 1.1rem; }
.role-preview-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #151316; border-radius: .65rem; }
.role-preview-card figcaption { font-size: .83rem; margin-top: .45rem; }
.role-preview-card .text-link { color: #772c24; }
@media (max-width: 760px) { .role-preview-grid { grid-template-columns: 1fr; } }
