/* Yellow marks a new chapter; photography and detailed content sit on black.
   Content gutters remain aligned when a section background spans the viewport. */
:root { --section-space: clamp(72px, 7vw, 104px); }

/* Keep every button square, including native controls and linked actions. */
button,
.button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] { border-radius: 0; }

/* One label style for primary, secondary and text-only actions on every page. */
button,
.button,
.text-link,
.business-footer-link,
.business-footer-secondary,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] { text-transform: uppercase; }

.tone-yellow {
  --text: var(--black);
  --muted: var(--black);
  --line: var(--black);
  background: var(--yellow);
  color: var(--black);
}

.section.tone-yellow {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}

.tone-yellow .yellow-text,
.tone-yellow .eyebrow,
.tone-yellow .note-number,
.tone-yellow .text-link,
.tone-yellow .testimonial-mark,
.tone-yellow .testimonial figcaption strong,
.tone-yellow.shared-copy h2,
.tone-yellow.shared-copy p:not(.eyebrow) { color: var(--black); }

.tone-yellow a:not(.button):not(.text-link):not(.breadcrumb):hover {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.tone-yellow a:focus-visible,
.tone-yellow button:focus-visible,
.tone-yellow summary:focus-visible { outline-color: var(--black); }

.tone-yellow .button {
  background: var(--black);
  color: var(--yellow);
  border-color: var(--black);
}
.tone-yellow .button:hover { background: var(--white); color: var(--black); }
.tone-yellow::selection,
.tone-yellow ::selection { background: var(--black); color: var(--yellow); }

/* Preserve the homepage's two-column layouts and keep headings within the copy. */
.page-home .tone-yellow.shared-copy h2 {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  text-shadow: none;
}

/* The homepage Plug & Play photograph and copy share one inset yellow frame. */
.home-plug-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding-block: 64px;
}
.home-plug-photo {
  margin: 0;
  min-width: 0;
  min-height: 420px;
  align-self: stretch;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 10%, 14% 10%);
}
.home-plug-photo > img { width: 100%; height: 100%; object-fit: cover; }
.home-plug-photo::before,
.home-plug-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 3.3%;
  background: var(--yellow);
  pointer-events: none;
}
.home-plug-photo::before { left: 3.3%; top: 20%; height: 15%; }
.home-plug-photo::after { left: 21.5%; top: 10%; aspect-ratio: 1; }
.home-plug-copy { min-width: 0; }
.home-plug-copy h2 {
  margin: 0 0 24px;
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 76px);
  letter-spacing: -.065em;
  line-height: .98;
  color: var(--black);
}
.home-plug-copy p { color: var(--black); font-size: 17px; line-height: 1.5; }
.home-plug-copy p + p { margin-top: 16px; }
.home-plug-copy .button {
  margin-top: 32px;
  padding-inline: 28px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Give each color change a complete section of breathing room. */
.studio-story,
.studio-formats { padding-top: var(--section-space); }
.visit-section.tone-yellow,
.dtla-visit.tone-yellow { padding-block: var(--section-space); }
.faq-section { padding-top: var(--section-space); }
.location-crosslink .text-link:hover,
.location-crosslink .text-link:focus-visible { text-decoration: none; }

.page-highland .space-notes > div {
  border-top: 2px solid var(--yellow);
  padding-block: 32px;
}
.page-highland .space-notes > div:last-child { padding-bottom: 0; }
.page-highland .room-photo img { object-position: center 65%; }

/* The inquiry pages share a yellow introduction, a dark form and a yellow aside. */
.tour-page { padding: 0; }
.tour-heading.section { padding-block: 64px 72px; }
.tour-heading .breadcrumb { margin-bottom: 28px; }
.tour-heading h1 { max-width: 17ch; }
.tour-grid.section { margin: 0 auto; padding-block: 72px var(--section-space); }
.form-panel { padding: 30px 0 0; border-top: 3px solid var(--yellow); }
.tour-aside .aside-content { padding: 32px; }
.next-step-box.tone-yellow { border: 0; }

@media (max-width: 760px) {
  :root { --section-space: 56px; }
  .home-plug-inner { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  .home-plug-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .home-plug-copy h2 { font-size: clamp(34px, 8.8vw, 62px); }
  .home-plug-copy .button { margin-top: 32px; max-width: 100%; }
  .tour-heading.section { padding-block: 36px 44px; }
  .tour-heading .breadcrumb { margin-bottom: 24px; }
  .tour-grid.section { padding-top: 40px; gap: 40px; }
  .form-panel { padding-top: 24px; }
  .tour-aside .aside-content { padding: 26px 22px; }
}

/* Shared reading and action sizes; decorative display type keeps its own scale. */
.intro-copy > p:not(.large-copy),
.shared-copy p:not(.eyebrow),
.space-notes p,
.format-copy > p:last-child,
.neighborhood-copy > p:not(.eyebrow):not(.large-copy),
.visit-section > div > p:not(.eyebrow),
.dtla-visit > div > p:not(.eyebrow),
.plug-intro p:not(.eyebrow):not(.large-copy):not(.plug-room-note),
.plug-option > p:not(.eyebrow):not(.option-note),
.plug-steps p,
.faq-list details p,
.amenity-groups ul,
.plug-option ul,
.location-intro { font-size: 16px; line-height: 1.6; }

.plug-option .option-note,
.plug-intro .plug-room-note { font-size: 14px !important; }

.button { max-width: 100%; }
.hero-bottom .button,
.closing-cta .button,
.yellow-cta .button,
.plug-actions .button,
.plug-option .button,
.form-footer .button,
.review-actions .button,
.aside-content .text-link { font-size: 14px; }

/* Section families share one vertical rhythm without changing the photo overlaps. */
.location-introduction-wrap,
.studio-intro,
.studio-story,
.studio-formats,
.details-band > .section,
.neighborhood-section,
.plug-intro,
.plug-options-section,
.plug-start,
.trusted-inner,
.testimonial-section,
.yellow-cta,
.plug-closing { padding-block: var(--section-space); }
.faq-section { padding-bottom: var(--section-space); }
.page-dtla .testimonial-band,
.page-plugplay .testimonial-band { margin-top: var(--section-space); }

/* Consecutive black sections share the gap instead of adding two full paddings. */
.plug-start + .faq-section { padding-top: 0; }

@media (max-width: 760px) {
  .shared-copy { padding-block: var(--section-space); }
  .section-heading { margin-bottom: 32px; }
  .studio-intro, .plug-intro, .studio-story,
  .visit-section, .neighborhood-section, .dtla-visit { gap: 32px; }
  .format-copy, .plug-option { padding: 28px 24px; }
  .form-intro > p:last-child { font-size: 14px; }
  .tour-heading > p:last-child { font-size: 16px; }
  .tour-aside .aside-content { padding: 28px 24px; }
  .business-contact-link { min-height: 44px; display: flex; align-items: center; }
  .business-contact-link + .business-contact-link { margin-top: 4px; }
}

@media (max-width: 480px) {
  .radio-options { grid-template-columns: 1fr; gap: 8px; }
  .radio-options label { justify-content: flex-start; }
}

/* Facility copy revisions keep the established editorial composition. */
.location-price { font-size: 18px !important; }
.location-price strong { white-space: nowrap; }
.live-room-section { align-items: center; }
.shared-video { min-width: 0; padding: 40px var(--gutter) 40px 0; }
.shared-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--black); }
.shared-video video:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.plan-placeholder-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.page-faq .faq-page-questions { display: block; max-width: 1120px; }
.page-faq .intro-copy .button { margin-top: 24px; }
.faq-page-questions .faq-entry { border-top: 1px solid var(--line); padding-block: 32px; }
.faq-page-questions .faq-entry:last-child { border-bottom: 1px solid var(--line); }
#main .faq-page-questions h2 { color: var(--yellow); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; margin-bottom: 16px; }
.faq-page-questions .faq-entry p { color: var(--white); font-size: 16px; line-height: 1.6; max-width: 65ch; }
.faq-page-questions .faq-entry p + p { margin-top: 12px; }
@media (max-width: 760px) {
  .live-room-section .shared-copy { order: 0; }
  .shared-video { padding: 0 var(--gutter) var(--section-space); }
}