/**
 * Ten Walls Design System
 * Tokens + shared components extracted from approved Home V3.
 * Local Space Grotesk via @font-face — no Google Fonts CDN.
 */

/* -------------------------------------------------------------------------- */
/* Local fonts                                                                */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */
:root {
  --tw-bg: #050505;
  --tw-bg2: #0B0B0B;
  --tw-fg: #F5F5F5;
  --tw-secondary: #B5B5B5;
  --tw-muted: #8A8A8A;
  --tw-green: #B6FF00;

  --tw-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tw-header-h: 84px;
  --tw-container: 1400px;
  --tw-gutter: 28px;
  --tw-radius: 0;

  --tw-space-xs: 0.45rem;
  --tw-space-sm: 0.8rem;
  --tw-space-md: 1.35rem;
  --tw-space-lg: 2.15rem;
  --tw-space-xl: 4.5rem;

  --tw-nav-size: 0.68rem;
  --tw-nav-tracking: 0.16em;
  --tw-btn-size: 0.68rem;
  --tw-btn-tracking: 0.18em;
  --tw-transition: 0.28s var(--tw-ease);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */
.tw-site,
.tw-page,
.tw-home-v3 {
  font-family: var(--tw-font);
  background: var(--tw-bg);
  color: var(--tw-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tw-site *,
.tw-site *::before,
.tw-site *::after,
.tw-home-v3 *,
.tw-home-v3 *::before,
.tw-home-v3 *::after,
.tw-page *,
.tw-page *::before,
.tw-page *::after,
.tw-about *,
.tw-about *::before,
.tw-about *::after,
.tw-about-main *,
.tw-about-main *::before,
.tw-about-main *::after {
  box-sizing: border-box;
}

.tw-site a,
.tw-home-v3 a,
.tw-page a {
  color: inherit;
  text-decoration: none;
}

.tw-site img,
.tw-home-v3 img,
.tw-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.tw-container {
  max-width: var(--tw-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tw-gutter);
  padding-right: var(--tw-gutter);
  width: 100%;
}

/* Headings */
.tw-h1,
.tw-v3-title {
  font-family: var(--tw-font);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.86;
  color: var(--tw-fg);
  margin: 0;
}

.tw-h2 {
  font-family: var(--tw-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 var(--tw-space-md);
}

.tw-lead,
.tw-v3-lead {
  font-size: clamp(1.15rem, 1.45vw, 1.4rem);
  line-height: 1.55;
  color: var(--tw-secondary);
  font-weight: 400;
}

.tw-muted { color: var(--tw-muted); }
.tw-secondary { color: var(--tw-secondary); }
.tw-accent { color: var(--tw-green); }

/* Links */
.tw-link {
  color: var(--tw-fg);
  transition: color var(--tw-transition);
}
.tw-link:hover { color: var(--tw-green); }

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.tw-btn,
.tw-v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.45rem;
  font-family: var(--tw-font);
  font-size: var(--tw-btn-size);
  letter-spacing: var(--tw-btn-tracking);
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--tw-radius);
  transition: background var(--tw-transition), color var(--tw-transition), border-color var(--tw-transition);
  cursor: pointer;
  background: transparent;
  text-decoration: none;
}

.tw-btn-fill,
.tw-v3-btn-fill {
  background: transparent;
  color: var(--tw-green);
  border-color: var(--tw-green);
}
.tw-btn-fill:hover,
.tw-v3-btn-fill:hover {
  background: var(--tw-green);
  color: var(--tw-bg);
  border-color: var(--tw-green);
}

.tw-btn-outline,
.tw-v3-btn-outline {
  background: transparent;
  color: var(--tw-fg);
  border-color: rgba(245, 245, 245, 0.5);
}
.tw-btn-outline:hover,
.tw-v3-btn-outline:hover {
  border-color: var(--tw-green);
  color: var(--tw-green);
}

/* -------------------------------------------------------------------------- */
/* Header / Nav                                                               */
/* -------------------------------------------------------------------------- */
/* Sticky on FSE template-part wrapper — sticky only on .tw-v3-header fails because
   the header-only .wp-block-template-part is short and scrolls away with the page. */
header.wp-block-template-part:has(.tw-v3-header),
.wp-block-template-part:has(.tw-v3-header) {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  max-width: 100%;
  background: #050505;
}

body.admin-bar header.wp-block-template-part:has(.tw-v3-header),
body.admin-bar .wp-block-template-part:has(.tw-v3-header) {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part:has(.tw-v3-header),
  body.admin-bar .wp-block-template-part:has(.tw-v3-header) {
    top: 46px;
  }
}

.tw-v3-header {
  position: relative;
  top: auto;
  z-index: 1;
  height: var(--tw-header-h);
  width: 100%;
  max-width: 100%;
  background: #050505;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.06);
  transition: border-color 0.35s var(--tw-ease), background 0.35s var(--tw-ease);
  font-family: var(--tw-font);
}

.tw-v3-header-inner {
  max-width: var(--tw-container);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--tw-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.tw-v3-wordmark {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tw-fg);
  flex-shrink: 0;
  text-decoration: none;
}

.tw-v3-nav {
  display: flex;
  align-items: center;
  gap: 1.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tw-v3-nav a {
  font-size: var(--tw-nav-size);
  font-weight: 500;
  letter-spacing: var(--tw-nav-tracking);
  text-transform: uppercase;
  color: var(--tw-secondary);
  transition: color 0.25s var(--tw-ease);
  text-decoration: none;
}
.tw-v3-nav a:hover { color: var(--tw-green); }

.tw-v3-nav .tw-v3-bookings {
  color: var(--tw-fg);
  border: 1px solid rgba(245, 245, 245, 0.35);
  padding: 0.45rem 0.85rem;
  letter-spacing: 0.14em;
}
.tw-v3-nav .tw-v3-bookings:hover {
  color: var(--tw-green);
  border-color: var(--tw-green);
}

.tw-v3-burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.tw-v3-burger span,
.tw-v3-burger span::before,
.tw-v3-burger span::after {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--tw-fg);
  position: relative;
  transition: background 0.25s, transform 0.25s var(--tw-ease);
}

.tw-v3-burger span::before,
.tw-v3-burger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.tw-v3-burger span::before { top: -6px; }
.tw-v3-burger span::after { top: 6px; }

.tw-v3-burger[aria-expanded="true"] span { background: transparent; }
.tw-v3-burger[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--tw-green);
}
.tw-v3-burger[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--tw-green);
}

.tw-v3-nav-mobile {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tw-header-h);
  background: var(--tw-bg);
  border-bottom: 1px solid rgba(245, 245, 245, 0.08);
  padding: 1.25rem 1.5rem 1.75rem;
  list-style: none;
  margin: 0;
  flex-direction: column;
  gap: 1.1rem;
}

body.is-nav-open .tw-v3-nav-mobile,
.tw-v3-header.is-nav-open .tw-v3-nav-mobile,
.tw-site.is-nav-open .tw-v3-nav-mobile {
  display: flex;
}

.tw-v3-nav-mobile a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-fg);
  font-weight: 500;
  text-decoration: none;
}
.tw-v3-nav-mobile a:hover { color: var(--tw-green); }

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.tw-footer {
  background: var(--tw-bg);
  color: var(--tw-secondary);
  border-top: 1px solid rgba(245, 245, 245, 0.06);
  padding: 2.5rem 0 2rem;
  font-family: var(--tw-font);
}

.tw-footer-inner {
  max-width: var(--tw-container);
  margin: 0 auto;
  padding: 0 var(--tw-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.tw-footer-wordmark {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tw-fg);
  text-decoration: none;
}

.tw-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tw-footer-nav a {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-muted);
  text-decoration: none;
  transition: color 0.25s var(--tw-ease);
}
.tw-footer-nav a:hover { color: var(--tw-green); }

.tw-footer-meta {
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 245, 245, 0.06);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-footer-social {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tw-footer-social:empty { display: none; }

/* -------------------------------------------------------------------------- */
/* Hero (Home V3)                                                             */
/* -------------------------------------------------------------------------- */
.tw-home-v3 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  z-index: 5;
}

.tw-v3-hero {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - var(--tw-header-h));
  min-height: calc(100dvh - var(--tw-header-h));
  background: var(--tw-bg);
}

.tw-v3-photo {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - var(--tw-header-h));
  min-height: calc(100dvh - var(--tw-header-h));
  overflow: hidden;
  background: var(--tw-bg2);
  opacity: 0;
  animation: twV3Fade 0.85s var(--tw-ease) 0.05s forwards;
}

.tw-v3-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(1);
}

.tw-v3-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 68%, #050505 100%);
  pointer-events: none;
}

.tw-v3-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.75rem, 5vw, 4.75rem) clamp(2.5rem, 5vw, 4.5rem);
  background: var(--tw-bg);
  opacity: 0;
  transform: translateY(18px);
  animation: twV3Rise 0.8s var(--tw-ease) 0.18s forwards;
}

.tw-v3-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--tw-space-md);
  opacity: 0;
  animation: twV3Rise 0.7s var(--tw-ease) 0.28s forwards;
}

.tw-v3-index {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--tw-green);
  font-weight: 600;
}

.tw-v3-line {
  width: 28px;
  height: 1px;
  background: var(--tw-green);
  opacity: 0.85;
}

.tw-v3-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tw-green);
  margin: 0 0 1.15rem;
  font-weight: 500;
  opacity: 0;
  animation: twV3Rise 0.7s var(--tw-ease) 0.32s forwards;
}

.tw-v3-title {
  font-size: clamp(82px, 8vw, 150px);
  margin: 0 0 var(--tw-space-md);
  opacity: 0;
  animation: twV3Rise 0.75s var(--tw-ease) 0.38s forwards;
}

.tw-v3-role {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tw-green);
  margin: 0 0 var(--tw-space-md);
  font-weight: 500;
  opacity: 0;
  animation: twV3Rise 0.7s var(--tw-ease) 0.46s forwards;
}

.tw-v3-lead {
  max-width: 500px;
  margin: 0 0 var(--tw-space-lg);
  opacity: 0;
  animation: twV3Rise 0.7s var(--tw-ease) 0.52s forwards;
}

.tw-v3-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tw-space-sm);
  opacity: 0;
  animation: twV3Rise 0.7s var(--tw-ease) 0.58s forwards;
}

/* Animations */
@keyframes twV3Fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes twV3Rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-v3-photo,
  .tw-v3-copy,
  .tw-v3-meta,
  .tw-v3-eyebrow,
  .tw-v3-title,
  .tw-v3-role,
  .tw-v3-lead,
  .tw-v3-ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Breakpoints                                                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --tw-gutter: 24px; }

  .tw-v3-header-inner { padding: 0 24px; }
  .tw-v3-nav { display: none; }
  .tw-v3-burger { display: inline-flex; }

  .tw-v3-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .tw-v3-photo {
    min-height: 52vh;
    min-height: 52dvh;
  }
  .tw-v3-photo::after {
    background: linear-gradient(180deg, transparent 55%, #050505 100%);
  }
  .tw-v3-copy { padding: 1.75rem 24px 3rem; }
  .tw-v3-title { font-size: clamp(64px, 17vw, 92px); }
  .tw-v3-lead {
    font-size: 1.125rem;
    max-width: none;
  }
}

@media (max-width: 480px) {
  :root { --tw-gutter: 20px; --tw-header-h: 72px; }
}

/* Interior pages own gutters — zero WP root horizontal padding to avoid page-level overflow */
body:not(.page-id-111) .wp-site-blocks {
  padding-left: 0;
  padding-right: 0;
}

/* Coming Soon page ID 111 — never show global chrome (public maintenance front) */
body.page-id-111 .tw-v3-header,
body.page-id-111 header.wp-block-template-part,
body.page-id-111 footer.wp-block-template-part,
body.page-id-111 .tw-v3-footer,
body.page-id-111 .wp-block-template-part[data-area="header"],
body.page-id-111 .wp-block-template-part[data-area="footer"] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Latest Release (Home V3 section 02) — Phase 2B.5 correct video under text         */
/* -------------------------------------------------------------------------- */
.tw-latest-release {
  background: var(--tw-bg2);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(3rem, 5.5vw, 4.5rem);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.tw-latest-release__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
}

@media (max-width: 768px) {
  .tw-latest-release__inner { padding: 0 24px; }
}

.tw-latest-release__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.tw-latest-release__artwork {
  margin: 0;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  position: relative;
  background: #111;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  align-self: start;
  justify-self: start;
}

.tw-latest-release__artwork-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #111;
}

.tw-latest-release__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  min-width: 0;
  padding-top: 0.15rem;
}

.tw-latest-release__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
}

.tw-latest-release__index {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--tw-green);
}

.tw-latest-release__eyebrow-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-latest-release__title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--tw-fg);
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

.tw-latest-release__meta {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-secondary);
}

.tw-latest-release__label {
  margin: 0 0 1.25rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-latest-release__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.35rem;
  margin: 0 0 2rem;
}

.tw-latest-release__platform--text {
  display: inline-flex;
  align-items: center;
  color: rgba(245, 245, 245, 0.85);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.3rem 0;
  min-height: 40px;
  transition: color var(--tw-transition);
}

.tw-latest-release__platform--text:hover,
.tw-latest-release__platform--text:focus-visible {
  color: var(--tw-green);
  outline: none;
}

/* Video lives inside the right column — not a separate full-width section */
.tw-latest-release__watch {
  margin: 0;
  padding-top: 0;
  width: 100%;
  max-width: 300px;
  align-self: flex-start;
  text-align: left;
}

.tw-latest-release__watch-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-latest-release__watch-title {
  margin: 0 0 0.7rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-latest-release__video {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  margin-left: 0;
}

.tw-latest-release__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
  display: block;
}

.tw-latest-release__facade-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.88;
  transition: opacity var(--tw-transition);
}

.tw-latest-release__facade:hover .tw-latest-release__facade-img,
.tw-latest-release__facade:focus-visible .tw-latest-release__facade-img {
  opacity: 1;
}

.tw-latest-release__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(182, 255, 0, 0.55);
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(4px);
  transition: border-color var(--tw-transition), background var(--tw-transition);
}

.tw-latest-release__play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.7rem;
  border-color: transparent transparent transparent var(--tw-fg);
}

.tw-latest-release__facade:hover .tw-latest-release__play,
.tw-latest-release__facade:focus-visible .tw-latest-release__play {
  border-color: var(--tw-green);
  background: rgba(5, 5, 5, 0.7);
}

.tw-latest-release__facade:hover .tw-latest-release__play::after,
.tw-latest-release__facade:focus-visible .tw-latest-release__play::after {
  border-color: transparent transparent transparent var(--tw-green);
}

.tw-latest-release__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-latest-release__artwork,
  .tw-latest-release__content {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-latest-release.is-inview .tw-latest-release__artwork,
  .tw-latest-release.is-inview .tw-latest-release__content {
    opacity: 1;
    transform: none;
  }
  .tw-latest-release.is-inview .tw-latest-release__content { transition-delay: 0.06s; }
}

@media (max-width: 900px) {
  .tw-latest-release {
    padding: 2.5rem 0 2.75rem;
  }
  .tw-latest-release__grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  .tw-latest-release__artwork {
    max-width: 100%;
    margin: 0;
  }
  .tw-latest-release__title {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }
  .tw-latest-release__platforms {
    margin-bottom: 1.75rem;
  }
  .tw-latest-release__watch,
  .tw-latest-release__video {
    max-width: 100%;
  }
}

/* Secondary cards — architecture ready (unstyled lightly until Phase with 2–3) */
.tw-recent-releases__secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  max-width: 1240px;
  margin: 2rem auto 0;
  padding: 0 var(--tw-gutter);
}
.tw-release-card__artwork { margin: 0; aspect-ratio: 1/1; }
.tw-release-card__artwork-img { width: 100%; height: 100%; object-fit: cover; }
.tw-release-card__title {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tw-release-card__meta {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.tw-home-v3-latest-wrap {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Beyond the Walls (Home V3 section 03) — Phase 3A                          */
/* -------------------------------------------------------------------------- */
.tw-beyond {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.25rem, 6vw, 5.25rem);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.tw-beyond__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
}

@media (max-width: 768px) {
  .tw-beyond__inner { padding: 0 24px; }
}

.tw-beyond__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.tw-beyond__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 0.15rem;
}

.tw-beyond__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.95rem;
}

.tw-beyond__index {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--tw-green);
}

.tw-beyond__eyebrow-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-beyond__title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.65rem, 2.8vw, 2.45rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
}

.tw-beyond__bio {
  margin: 0 0 1.75rem;
  max-width: 36rem;
}

.tw-beyond__bio p {
  margin: 0 0 0.95rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-beyond__bio p:last-child {
  margin-bottom: 0;
}

.tw-beyond__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: 34rem;
  margin: 0 0 1.85rem;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-beyond__hl {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem 1.05rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  min-width: 0;
}

.tw-beyond__hl:nth-child(odd) {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-beyond__hl:nth-child(even) {
  padding-left: 1.25rem;
}

.tw-beyond__hl-num {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--tw-green);
}

.tw-beyond__hl-key {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tw-fg);
  line-height: 1.25;
}

.tw-beyond__hl-desc {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tw-muted);
  line-height: 1.35;
}

.tw-beyond__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.15rem;
  padding: 0.35rem 0;
  min-height: 40px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.78);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-beyond__cta:hover,
.tw-beyond__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-beyond__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  line-height: 1;
  transition: transform var(--tw-transition);
}

.tw-beyond__cta:hover .tw-beyond__cta-arrow,
.tw-beyond__cta:focus-visible .tw-beyond__cta-arrow {
  transform: translateX(3px);
}

.tw-beyond__media {
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  align-self: stretch;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: min(78vh, 720px);
}

.tw-beyond__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  /* Color portrait intact — no filters, no B&W, no heavy face overlays */
}

@media (prefers-reduced-motion: no-preference) {
  .tw-beyond__copy,
  .tw-beyond__media {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-beyond.is-inview .tw-beyond__copy,
  .tw-beyond.is-inview .tw-beyond__media {
    opacity: 1;
    transform: none;
  }
  .tw-beyond.is-inview .tw-beyond__media { transition-delay: 0.06s; }
}

@media (max-width: 900px) {
  .tw-beyond {
    padding: 2.5rem 0 2.85rem;
  }
  .tw-beyond__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* Mobile order: eyebrow → headline → bio → image → highlights → CTA */
  .tw-beyond__copy {
    display: contents;
  }
  .tw-beyond__eyebrow { order: 1; }
  .tw-beyond__title { order: 2; }
  .tw-beyond__bio { order: 3; max-width: none; }
  .tw-beyond__media {
    order: 4;
    max-width: 100%;
    justify-self: stretch;
    max-height: min(62vh, 520px);
    aspect-ratio: 3 / 4;
  }
  .tw-beyond__highlights {
    order: 5;
    max-width: none;
    margin-bottom: 1.35rem;
  }
  .tw-beyond__cta { order: 6; }
  .tw-beyond__title {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
    margin-bottom: 1.1rem;
  }
  .tw-beyond__hl:nth-child(odd) {
    padding-right: 0.85rem;
  }
  .tw-beyond__hl:nth-child(even) {
    padding-left: 0.85rem;
  }
}

@media (max-width: 420px) {
  .tw-beyond__highlights {
    grid-template-columns: 1fr;
  }
  .tw-beyond__hl:nth-child(odd),
  .tw-beyond__hl:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }
}

.tw-home-v3-beyond-wrap {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* Shared interior eyebrow color roles. Page-specific selectors retain their
   existing spacing/type rules; these utilities keep the split treatment consistent. */
.tw-eyebrow-kicker { color: var(--tw-green); }
.tw-eyebrow-sep { color: var(--tw-muted); }
.tw-eyebrow-name { color: var(--tw-secondary); }

/* -------------------------------------------------------------------------- */
/* About page — editorial story (.tw-about*)                                  */
/* Phase 3B.2 — shared desktop editorial grid + alignment                     */
/* -------------------------------------------------------------------------- */
.tw-about-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.tw-about {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  /* 4G.2 critical: clip X without creating a Y scroll container (hidden→auto) */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-about__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
  box-sizing: border-box;
  /* Phase 3B.2 — shared desktop editorial grid tokens
     LEFT zone | gap | RIGHT zone — same axes across Language / Breakthrough /
     Catalogue / Beyond Club / Runemark+Now (Facts 50/50 as reference). */
  --tw-about-col-left: minmax(0, 1fr);
  --tw-about-col-gap: clamp(1.75rem, 4.5vw, 4rem);
  --tw-about-col-right: minmax(0, 1fr);
  --tw-about-grid: var(--tw-about-col-left) var(--tw-about-col-right);
}

@media (max-width: 768px) {
  .tw-about__inner { padding: 0 24px; }
}

/* Hero — keep composition; microscopic pad tighten only */
.tw-about__hero {
  padding: calc(var(--tw-header-h) + clamp(1.75rem, 3.5vw, 2.85rem)) 0 clamp(2.5rem, 5vw, 4rem);
  /* no min-height:100vh */
}

.tw-about__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: center;
}

.tw-about__hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tw-about__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tw-about__eyebrow-kicker { color: var(--tw-green); }
.tw-about__eyebrow-sep { color: var(--tw-muted); }
.tw-about__eyebrow-name { color: var(--tw-muted); }

.tw-about__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.35rem, 5.2vw, 4.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
}

.tw-about__hero-media {
  margin: 0;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  overflow: hidden;
  background: var(--tw-bg2);
  aspect-ratio: 3 / 4;
  max-height: min(86vh, 760px);
}

.tw-about__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: none;
}

.tw-about__img--portrait {
  object-position: center 16%;
}

.tw-about__img--live {
  object-position: center 28%;
}

.tw-about__prose {
  max-width: 34rem;
}

.tw-about__prose--intro {
  max-width: 28rem;
}

.tw-about__prose p {
  margin: 0 0 0.9rem;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-about__prose p:last-child { margin-bottom: 0; }
.tw-about__prose em { font-style: italic; color: var(--tw-fg); }

/* Numbered / text sections — content-driven height (no 100vh) */
.tw-about__section {
  padding: clamp(2.25rem, 4.25vw, 3.75rem) 0;
  border-top: 1px solid rgba(245, 245, 245, 0.06);
  min-height: 0;
}

.tw-about__index-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}

.tw-about__index {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--tw-green);
}

.tw-about__index-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-about__section-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tw-fg);
  margin: 0 0 1.2rem;
}

.tw-about__section-title--soft {
  color: rgba(245, 245, 245, 0.92);
}

/* 01 Language — LEFT identity / RIGHT body on shared editorial grid */
.tw-about__lang-grid {
  display: grid;
  grid-template-columns: var(--tw-about-grid);
  column-gap: var(--tw-about-col-gap);
  row-gap: 1.5rem;
  align-items: start;
  justify-content: start;
}

.tw-about__lang-identity {
  min-width: 0;
}

.tw-about__lang-identity .tw-about__section-title {
  margin-bottom: 0;
}

.tw-about__lang-body {
  max-width: 34rem; /* not wider than prior body measure */
  padding-top: 0.15rem;
  justify-self: start; /* left edge = RIGHT editorial axis */
}

/* 02 Breakthrough — LEFT copy / RIGHT UK #6 (centered in right zone) */
.tw-about__break-grid {
  display: grid;
  grid-template-columns: var(--tw-about-grid);
  column-gap: var(--tw-about-col-gap);
  row-gap: 1.75rem;
  align-items: center;
}

.tw-about__break-copy {
  min-width: 0;
}

.tw-about__break-copy .tw-about__prose {
  max-width: 32rem;
}

/* Typographic facts */
.tw-about__typo-hl {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(182, 255, 0, 0.22);
}

.tw-about__typo-stack {
  margin: 1.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tw-about__typo-stack .tw-about__typo-hl {
  margin: 0;
}

.tw-about__typo-hl-main {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tw-green);
  line-height: 1.15;
}

.tw-about__typo-hl-sub {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

/* UK #6 — largest typographic fact; optically centered in RIGHT zone */
.tw-about__typo-hl--uk6 {
  margin: 0;
  padding: 0;
  border-top: 0;
  align-items: center;
  justify-self: center;
  text-align: center;
  max-width: 18rem;
}

.tw-about__typo-hl--uk6 .tw-about__typo-hl-main {
  font-size: clamp(3.25rem, 8.5vw, 6.5rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--tw-fg); /* white; alt #B6FF00 available via modifier */
}

.tw-about__typo-hl--uk6 .tw-about__typo-hl-sub {
  margin-top: 0.65rem;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
}

/* Catalogue — LEFT narrative / RIGHT device optically centered in right zone */
.tw-about__cat-grid {
  display: grid;
  grid-template-columns: var(--tw-about-grid);
  column-gap: var(--tw-about-col-gap);
  row-gap: 1.75rem;
  align-items: start;
}

.tw-about__cat-copy {
  min-width: 0;
}

.tw-about__cat-copy .tw-about__prose {
  max-width: 34rem;
}

.tw-about__cat-device {
  margin: 0;
  padding: 0.35rem 0 0;
  pointer-events: none;
  user-select: none;
  justify-self: center;
  text-align: center;
  max-width: 16rem;
}

.tw-about__cat-queen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1.15rem;
}

.tw-about__cat-queen-name {
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tw-fg);
  line-height: 1;
}

.tw-about__cat-queen-year {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-about__cat-others {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-muted);
  line-height: 1.55;
}

/* Live / Beyond the Club — RIGHT text column = editorial RIGHT axis reference */
.tw-about__live {
  padding: clamp(2.25rem, 4.25vw, 3.75rem) 0;
  border-top: 1px solid rgba(245, 245, 245, 0.06);
  background: var(--tw-bg2);
  min-height: 0;
}

.tw-about__live-grid {
  display: grid;
  grid-template-columns: var(--tw-about-grid);
  column-gap: var(--tw-about-col-gap);
  row-gap: var(--tw-about-col-gap);
  align-items: center;
}

.tw-about__live-media {
  margin: 0;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 2 / 3;
  max-height: min(78vh, 680px);
}

.tw-about__live-copy {
  min-width: 0;
}

.tw-about__live-copy .tw-about__prose {
  max-width: 32rem;
}

/* 04 + 05 — shared editorial grid; 05 left edge = RIGHT axis (Runemark stays) */
.tw-about__section--chapters {
  padding: clamp(2.25rem, 4.25vw, 3.75rem) 0;
}

.tw-about__chapters-grid {
  display: grid;
  grid-template-columns: var(--tw-about-grid);
  column-gap: var(--tw-about-col-gap);
  row-gap: 2.25rem;
  align-items: start;
}

.tw-about__chapter {
  min-width: 0;
}

.tw-about__chapter--04 .tw-about__prose {
  max-width: 26rem;
}

.tw-about__chapter--05 .tw-about__prose {
  max-width: 32rem;
}

/* Final statement — stronger than body, below hero scale */
.tw-about__final {
  margin: 1.65rem 0 0;
  max-width: 30rem;
  font-size: clamp(1.05rem, 1.85vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tw-fg);
}

/* Facts — slight pad reduce */
.tw-about__facts {
  padding: clamp(2.1rem, 4vw, 3.35rem) 0;
  border-top: 1px solid rgba(245, 245, 245, 0.06);
  min-height: 0;
}

.tw-about__facts-title {
  margin: 0 0 1.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-about__facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-about__facts-list li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.15rem 1rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-about__facts-list li:nth-child(odd) {
  padding-right: 1.5rem;
  border-right: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-about__facts-list li:nth-child(even) {
  padding-left: 1.5rem;
}

.tw-about__fact-key {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-about__fact-val {
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(245, 245, 245, 0.78);
}

/* CTAs — editorial links; slight pad reduce */
.tw-about__cta-band {
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.75rem, 5.5vw, 4.5rem);
  border-top: 1px solid rgba(245, 245, 245, 0.06);
  min-height: 0;
}

.tw-about__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
}

.tw-about__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tw-fg);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-about__cta:hover,
.tw-about__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: rgba(182, 255, 0, 0.55);
  outline: none;
}

.tw-about__cta-arrow {
  display: inline-block;
  transition: transform var(--tw-transition);
}

.tw-about__cta:hover .tw-about__cta-arrow,
.tw-about__cta:focus-visible .tw-about__cta-arrow {
  transform: translateX(4px);
}

/* Reveal motion — restrained */
@media (prefers-reduced-motion: no-preference) {
  .tw-about__reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-about__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

/* Mobile — stacked natural order; ~24px pad; no forced 2-col */
@media (max-width: 900px) {
  .tw-about__hero {
    padding-top: calc(var(--tw-header-h) + 1.35rem);
    padding-bottom: 2rem;
  }
  .tw-about__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tw-about__hero-copy { order: 1; }
  .tw-about__hero-media {
    order: 2;
    max-width: 100%;
    justify-self: stretch;
    max-height: min(70vh, 580px);
    aspect-ratio: 3 / 4;
  }
  .tw-about__hero-title {
    font-size: clamp(2.05rem, 11vw, 2.85rem);
  }

  .tw-about__section {
    padding: 2rem 0;
  }

  .tw-about__lang-grid,
  .tw-about__break-grid,
  .tw-about__cat-grid,
  .tw-about__chapters-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.25rem;
  }

  .tw-about__lang-body,
  .tw-about__break-copy .tw-about__prose,
  .tw-about__cat-copy .tw-about__prose,
  .tw-about__prose,
  .tw-about__prose--intro {
    max-width: none;
  }

  .tw-about__typo-hl--uk6 {
    justify-self: start;
    text-align: left;
    align-items: flex-start;
    max-width: none;
  }
  .tw-about__typo-hl--uk6 .tw-about__typo-hl-main {
    font-size: clamp(2.75rem, 16vw, 4.25rem);
  }

  .tw-about__cat-device {
    justify-self: start;
    text-align: left;
    max-width: none;
  }
  .tw-about__cat-queen {
    align-items: flex-start;
  }

  .tw-about__live {
    padding: 2rem 0;
  }
  .tw-about__live-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  .tw-about__live-media {
    order: 1;
    max-width: 100%;
    max-height: min(68vh, 560px);
  }
  .tw-about__live-copy { order: 2; }

  .tw-about__section--chapters {
    padding: 2rem 0;
  }
  .tw-about__chapter--05 {
    padding-top: 0.35rem;
    border-top: 1px solid rgba(245, 245, 245, 0.06);
    margin-top: 0.35rem;
  }

  .tw-about__facts {
    padding: 1.85rem 0;
  }
  .tw-about__facts-list {
    grid-template-columns: 1fr;
  }
  .tw-about__facts-list li:nth-child(odd),
  .tw-about__facts-list li:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }

  .tw-about__cta-band {
    padding: 1.85rem 0 2.75rem;
  }
  .tw-about__cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

@media (max-width: 420px) {
  .tw-about__hero-media,
  .tw-about__live-media {
    max-height: min(62vh, 480px);
  }
}

/* Phase 3B.3 — mobile only: fix horizontal overflow
   About is outside .tw-site, so default content-box made
   .tw-about__inner (width:100% + horizontal padding) wider than the viewport,
   clipping body copy and hero/live images on the right. Desktop unchanged. */
@media (max-width: 900px) {
  .tw-about,
  .tw-about *,
  .tw-about *::before,
  .tw-about *::after {
    box-sizing: border-box;
  }
  .tw-about__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    min-width: 0;
  }
  .tw-about__hero-grid,
  .tw-about__lang-grid,
  .tw-about__break-grid,
  .tw-about__cat-grid,
  .tw-about__live-grid,
  .tw-about__chapters-grid,
  .tw-about__hero-copy,
  .tw-about__hero-media,
  .tw-about__prose,
  .tw-about__lang-body,
  .tw-about__break-copy,
  .tw-about__cat-copy,
  .tw-about__cat-device,
  .tw-about__live-media,
  .tw-about__live-copy,
  .tw-about__chapter {
    min-width: 0;
    max-width: 100%;
  }
  .tw-about__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* -------------------------------------------------------------------------- */
/* Music page (/music/) — Phase 4B                                           */
/* Editorial interior; grids 3/2/1; no SaaS cards.                           */
/* -------------------------------------------------------------------------- */

.tw-music-main {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Hide empty Recent / Selected shells (no cards) */
.tw-music-recent-wrap:not(:has(.tw-release-card)),
.tw-music-selected-wrap:not(:has(.tw-release-card)),
.tw-music-listen-wrap:not(:has(.tw-music-listen__link)) {
  display: none;
}

/* --- 01 Intro (editorial, max ~70vh) --- */
.tw-music-intro {
  background: var(--tw-bg);
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 clamp(2.25rem, 4vw, 3.25rem);
  max-height: 80vh;
}
.tw-music-intro__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tw-music-intro__eyebrow {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted);
}
.tw-music-intro__eyebrow-sep { opacity: 0.55; }
.tw-music-intro__title {
  margin: 0 0 0.85rem;
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
}
.tw-music-intro__line {
  margin: 0 0 1.1rem;
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tw-green);
  font-weight: 500;
}
.tw-music-intro__lede {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  line-height: 1.55;
  color: var(--tw-secondary);
  font-weight: 400;
}
.tw-music-intro__media {
  margin: 0;
  width: 100%;
  max-height: min(62vh, 560px);
  overflow: hidden;
}
.tw-music-intro__img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(62vh, 560px);
  object-fit: cover;
  object-position: center 30%;
}

@media (max-width: 900px) {
  .tw-music-intro { max-height: none; padding: 2rem 0 1.75rem; }
  .tw-music-intro__inner {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 1.5rem;
  }
  .tw-music-intro__media,
  .tw-music-intro__img {
    max-height: 48vh;
  }
}

/* --- Section heads 03 / 04 --- */
.tw-music-section-head {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 0;
}
.tw-music-section-head__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 900px) {
  .tw-music-section-head__inner { padding: 0 24px; }
}
.tw-music-section-head__eyebrow {
  margin: 0 0 0.65rem;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted);
}
.tw-music-section-head__index { color: var(--tw-green); font-weight: 600; }
.tw-music-section-head__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tw-music-section-head__sub {
  margin: 0.75rem 0 0;
  max-width: 36rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--tw-secondary);
}

/* Selected tonal shift */
.tw-music-selected-wrap {
  background: var(--tw-bg2);
  padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.tw-music-section-head--selected .tw-music-section-head__title {
  color: var(--tw-fg);
}

/* --- Music Latest: compact catalogue variant (same engine markup) --- */
.tw-music-latest-wrap .tw-latest-release {
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
}
.tw-music-latest-wrap .tw-latest-release__inner {
  max-width: 1240px;
}

/* --- Release grids (Recent + Selected) --- */
.tw-music-recent-wrap .tw-recent-releases,
.tw-music-selected-wrap .tw-selected-catalogue {
  padding: 1.35rem 0 clamp(2.75rem, 4.5vw, 4rem);
}
.tw-music-recent-wrap .tw-release-grid,
.tw-music-selected-wrap .tw-release-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.15rem) clamp(1.25rem, 2vw, 1.75rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .tw-music-recent-wrap .tw-release-grid,
  .tw-music-selected-wrap .tw-release-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .tw-music-recent-wrap .tw-release-grid,
  .tw-music-selected-wrap .tw-release-grid {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 1.75rem;
  }
}

.tw-release-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  transition: transform 0.28s var(--tw-ease);
  min-width: 0;
}
.tw-release-card:hover,
.tw-release-card:focus-within {
  transform: scale(1.015);
}
.tw-release-card:hover .tw-release-card__title,
.tw-release-card:focus-within .tw-release-card__title {
  color: var(--tw-green);
}
.tw-release-card__artwork {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
}
.tw-release-card__artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tw-release-card__content { padding: 0.85rem 0 0; }
.tw-release-card__artist {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tw-secondary, #b5b5b5);
  line-height: 1.35;
}
.tw-release-card__title {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color 0.28s var(--tw-ease);
}
.tw-release-card__meta,
.tw-release-card__label {
  margin: 0 0 0.25rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-muted);
}
.tw-release-card__smartlink {
  margin: 0.55rem 0 0.35rem;
}
.tw-release-card__smartlink a {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tw-release-card__smartlink a:hover,
.tw-release-card__smartlink a:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
}
.tw-release-card__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin-top: 0.45rem;
}
.tw-release-card__platforms a {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-secondary);
  text-decoration: none;
}
.tw-release-card__platforms a:hover,
.tw-release-card__platforms a:focus-visible {
  color: var(--tw-green);
}

/* --- 05 Listen strip --- */
.tw-music-listen {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 clamp(3rem, 5vw, 4.25rem);
  border-top: 1px solid rgba(245, 245, 245, 0.08);
}
.tw-music-listen__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 900px) {
  .tw-music-listen__inner { padding: 0 24px; }
}
.tw-music-listen__eyebrow {
  margin: 0 0 1.15rem;
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted);
}
.tw-music-listen__index { color: var(--tw-green); font-weight: 600; }
.tw-music-listen__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
}
.tw-music-listen__link {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.25);
  padding-bottom: 0.15rem;
}
.tw-music-listen__link:hover,
.tw-music-listen__link:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
}


/* -------------------------------------------------------------------------- */
/* Studio Services (Home V3 section 04) — Phase 4C SHAPE YOUR SOUND           */
/* -------------------------------------------------------------------------- */
.tw-studio {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.25rem, 6vw, 5.25rem);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.tw-studio__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
}

@media (max-width: 768px) {
  .tw-studio__inner { padding: 0 24px; }
}

.tw-studio__intro {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 40rem;
}

.tw-studio__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.95rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-studio__eyebrow-num {
  color: var(--tw-green);
}

.tw-studio__title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.65rem, 2.8vw, 2.45rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 1.2rem;
  text-transform: uppercase;
}

.tw-studio__lede {
  margin: 0;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
  max-width: 38rem;
}

.tw-studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.tw-studio__media {
  margin: 0;
  width: 100%;
  max-width: 560px;
  justify-self: start;
  align-self: stretch;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 720px);
}

.tw-studio__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 35%;
}

.tw-studio__index {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding-top: 0.15rem;
}

.tw-studio__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  column-gap: 0.85rem;
  align-items: baseline;
  padding: 1.15rem 0 1.1rem;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tw-transition);
}

.tw-studio__row:last-of-type {
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-studio__row:hover,
.tw-studio__row:focus-visible {
  border-top-color: rgba(182, 255, 0, 0.45);
  outline: none;
}

.tw-studio__row:hover + .tw-studio__row,
.tw-studio__row:focus-visible + .tw-studio__row {
  border-top-color: rgba(182, 255, 0, 0.45);
}

.tw-studio__row:hover:last-of-type,
.tw-studio__row:focus-visible:last-of-type {
  border-bottom-color: rgba(182, 255, 0, 0.45);
}

.tw-studio__num {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--tw-green);
  line-height: 1.6;
}

.tw-studio__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  transition: transform var(--tw-transition);
}

.tw-studio__row:hover .tw-studio__row-body,
.tw-studio__row:focus-visible .tw-studio__row-body {
  transform: translateX(4px);
}

.tw-studio__name {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tw-fg);
  line-height: 1.2;
}

.tw-studio__desc {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--tw-muted);
  line-height: 1.45;
}

.tw-studio__arrow {
  color: rgba(245, 245, 245, 0.45);
  font-size: 1rem;
  line-height: 1;
  transition: color var(--tw-transition), transform var(--tw-transition);
  align-self: center;
}

.tw-studio__row:hover .tw-studio__arrow,
.tw-studio__row:focus-visible .tw-studio__arrow {
  color: var(--tw-green);
  transform: translateX(3px);
}

.tw-studio__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  margin-top: 1.55rem;
  padding: 0.35rem 0;
  min-height: 40px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.78);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-studio__cta:hover,
.tw-studio__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-studio__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  line-height: 1;
  transition: transform var(--tw-transition);
}

.tw-studio__cta:hover .tw-studio__cta-arrow,
.tw-studio__cta:focus-visible .tw-studio__cta-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
  .tw-studio__intro,
  .tw-studio__media,
  .tw-studio__index {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-studio.is-inview .tw-studio__intro,
  .tw-studio.is-inview .tw-studio__media,
  .tw-studio.is-inview .tw-studio__index {
    opacity: 1;
    transform: none;
  }
  .tw-studio.is-inview .tw-studio__media { transition-delay: 0.05s; }
  .tw-studio.is-inview .tw-studio__index { transition-delay: 0.1s; }
}

@media (max-width: 900px) {
  .tw-studio {
    padding: 2.5rem 0 2.85rem;
  }
  .tw-studio__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* Mobile: label → headline → copy → image → rows → CTA */
  .tw-studio__inner {
    display: flex;
    flex-direction: column;
  }
  .tw-studio__intro { order: 1; margin-bottom: 1.35rem; max-width: none; }
  .tw-studio__grid {
    order: 2;
    display: contents;
  }
  .tw-studio__media {
    order: 2;
    max-width: 100%;
    justify-self: stretch;
    max-height: min(62vh, 520px);
    aspect-ratio: 4 / 5;
    margin-bottom: 0.35rem;
  }
  .tw-studio__index { order: 3; }
  .tw-studio__title {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
    margin-bottom: 1.05rem;
  }
  .tw-studio__row {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    column-gap: 0.7rem;
    padding: 1.05rem 0 1rem;
  }
  .tw-studio__name {
    font-size: clamp(1.02rem, 5vw, 1.2rem);
  }
  .tw-studio__cta { margin-top: 1.35rem; }
}

.tw-home-v3-studio-wrap {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}


/* -------------------------------------------------------------------------- */
/* Services page (/services/) — Phase 4D SHAPE YOUR SOUND hub                 */
/* Editorial chapters — NOT SaaS cards. Interior hero (not 100vh Home).       */
/* -------------------------------------------------------------------------- */
.tw-svc-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-svc {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  /* 4G.2 critical: clip X without creating a Y scroll container (hidden→auto) */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-svc__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .tw-svc__inner { padding: 0 24px; }
}

/* —— Hero (interior) —— */
.tw-svc__hero {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

.tw-svc__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.tw-svc__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-svc__eyebrow-sep { opacity: 0.55; }

.tw-svc__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.2vw, 3.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
}

.tw-svc__hero-support {
  margin: 0;
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-svc__hero-media {
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: min(68vh, 640px);
}

.tw-svc__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Different crop from Home Studio (center 35%) — reuse media 170 */
.tw-svc__img--hero {
  object-position: center 18%;
}

/* —— Chapters —— */
.tw-svc__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.tw-svc__chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.tw-svc__chapter-grid--alt {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
}

.tw-svc__index-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-svc__index { color: var(--tw-green); }

.tw-svc__index-label { color: var(--tw-muted); }

.tw-svc__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.tw-svc__chapter-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.45;
  color: var(--tw-muted);
  font-weight: 400;
}

.tw-svc__chapter-desc--accent {
  color: var(--tw-green);
}

.tw-svc__prose {
  max-width: 38rem;
}

.tw-svc__prose p {
  margin: 0 0 1rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-svc__prose p:last-child { margin-bottom: 0; }

.tw-svc__focus-label {
  margin: 1.35rem 0 0.55rem !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted) !important;
}

.tw-svc__focus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tw-svc__focus li {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(245, 245, 245, 0.78);
  padding-left: 0.85rem;
  border-left: 1px solid rgba(182, 255, 0, 0.35);
}

.tw-svc__cta-wrap { margin: 1.55rem 0 0; }

.tw-svc__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  min-height: 40px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.78);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-svc__cta:hover,
.tw-svc__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-svc__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  line-height: 1;
  transition: transform var(--tw-transition);
}

.tw-svc__cta:hover .tw-svc__cta-arrow,
.tw-svc__cta:focus-visible .tw-svc__cta-arrow {
  transform: translateX(3px);
}

.tw-svc__rule {
  border: 0;
  height: 1px;
  margin: 0 auto;
  max-width: 1220px;
  width: calc(100% - clamp(64px, 8vw, 96px));
  background: rgba(245, 245, 245, 0.1);
}

/* —— How it works —— */
.tw-svc__how-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 40rem;
}

.tw-svc__how-lede {
  margin: 0.85rem 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-svc__flows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-svc__flow {
  padding: 1.25rem 0 1.2rem;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: baseline;
}

.tw-svc__flow-name {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-svc__flow-line {
  margin: 0;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--tw-muted);
}

.tw-svc__chapter--how {
  padding-bottom: clamp(3.25rem, 6vw, 5rem);
}

/* —— Reveal —— */
@media (prefers-reduced-motion: no-preference) {
  .tw-svc__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-svc__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

/* —— Responsive —— */
@media (max-width: 900px) {
  .tw-svc__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-svc__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tw-svc__hero-media {
    max-width: 100%;
    justify-self: stretch;
    max-height: min(58vh, 480px);
    order: 2;
  }
  .tw-svc__hero-copy { order: 1; }
  .tw-svc__hero-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }
  .tw-svc__chapter-grid,
  .tw-svc__chapter-grid--alt {
    /* 4H.1: true one column; minmax(0,…) so grid track can shrink under overflow-x:clip */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 4H.1: chapter copy must shrink + wrap inside padded .tw-svc__inner (border-box) */
  .tw-svc__chapter-identity,
  .tw-svc__chapter-body,
  .tw-svc__chapter-desc,
  .tw-svc__prose,
  .tw-svc__prose p,
  .tw-svc__flow,
  .tw-svc__flow-line,
  .tw-svc__focus,
  .tw-svc__focus li,
  .tw-svc__cta-wrap,
  .tw-svc__cta {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .tw-svc__cta {
    width: auto;
    max-width: 100%;
  }
  .tw-svc__chapter-desc,
  .tw-svc__prose p,
  .tw-svc__flow-line {
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }
  .tw-svc__flow-line {
    font-size: clamp(0.82rem, 3.6vw, 0.95rem);
    line-height: 1.5;
  }
  .tw-svc__flow {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .tw-svc__rule {
    width: calc(100% - 48px);
  }
}

/* -------------------------------------------------------------------------- */
/* Mixing page (/services/mixing/) — Phase 4E                                  */
/* Editorial service page + form. #050505 system. No SaaS cards.               */
/* Media 170 crop ≠ Home (35%) / Services hub (18%).                           */
/* -------------------------------------------------------------------------- */
.tw-mix-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-mix {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  /* 4G.2 critical: clip X without creating a Y scroll container (hidden→auto) */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-mix__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
}

@media (max-width: 768px) {
  .tw-mix__inner { padding: 0 24px; }
}

.tw-mix__hero {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

.tw-mix__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.tw-mix__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-mix__eyebrow-kicker { color: var(--tw-green); }
.tw-mix__eyebrow-sep { color: var(--tw-muted); opacity: 0.55; }
.tw-mix__eyebrow-name { color: var(--tw-secondary); }

.tw-mix__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.2vw, 3.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
}

.tw-mix__hero-support {
  margin: 0 0 1.75rem;
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-mix__hero-media {
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: min(68vh, 640px);
}

.tw-mix__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Mix-Ten-Walls: keep wall speakers + racks + crouching subject (not portrait-only). Was 48% for Services-Ten-Walls. */
.tw-mix__img--hero {
  object-position: center 40%;
}

.tw-mix__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.tw-mix__chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.tw-mix__index-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-mix__index { color: var(--tw-green); }
.tw-mix__index-label { color: var(--tw-muted); }

.tw-mix__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.tw-mix__chapter-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.45;
  color: var(--tw-muted);
  font-weight: 400;
}

.tw-mix__prose {
  max-width: 38rem;
}

.tw-mix__prose p {
  margin: 0 0 1rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-mix__prose p:last-child { margin-bottom: 0; }

.tw-mix__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-mix__areas li {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-mix__area-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-mix__delivery {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.tw-mix__del-name {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-mix__del-desc {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
}

.tw-mix__note {
  margin: 0;
  padding-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tw-muted);
  max-width: 38rem;
}

.tw-mix__inline-link {
  color: rgba(245, 245, 245, 0.88);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(182, 255, 0, 0.4);
}

.tw-mix__inline-link:hover,
.tw-mix__inline-link:focus-visible {
  color: var(--tw-green);
  outline: none;
}

.tw-mix__reqs {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tw-mix__reqs li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.8);
  padding-left: 0.85rem;
  border-left: 1px solid rgba(182, 255, 0, 0.35);
}

.tw-mix__process-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 40rem;
}

.tw-mix__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-mix__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem 0 1.2rem;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  align-items: start;
}

.tw-mix__step-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tw-green);
  padding-top: 0.15rem;
}

.tw-mix__step-name {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-mix__step-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--tw-muted);
}

.tw-mix__chapter--process {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.tw-mix__form-section {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}

.tw-mix__form-head {
  margin: 0 0 0.5rem;
  max-width: 40rem;
}

.tw-mix__form-lede {
  margin: 0.85rem 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-mix__rule {
  border: 0;
  height: 1px;
  margin: 0 auto;
  max-width: 1220px;
  width: calc(100% - clamp(64px, 8vw, 96px));
  background: rgba(245, 245, 245, 0.1);
}

.tw-mix__cta-wrap { margin: 0; }

.tw-mix__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  min-height: 40px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.78);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-mix__cta:hover,
.tw-mix__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-mix__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  line-height: 1;
  transition: transform var(--tw-transition);
}

.tw-mix__cta:hover .tw-mix__cta-arrow,
.tw-mix__cta:focus-visible .tw-mix__cta-arrow {
  transform: translateX(3px);
}

/* —— Form (Core shortcode + theme CSS) —— */
.tw-mix-form-wrap {
  background: var(--tw-bg);
  padding: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}

.tw-mix-form-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(32px, 4vw, 48px) 0;
}

@media (max-width: 768px) {
  .tw-mix-form-inner { padding-left: 24px; padding-right: 24px; }
}

.tw-mix-form {
  max-width: 44rem;
  margin-top: 0.5rem;
}

.tw-mix-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.35rem;
}

.tw-mix-form__field {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tw-mix-form__field--full {
  grid-column: 1 / -1;
}

.tw-mix-form__field label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-mix-form__req { color: var(--tw-green); }

.tw-mix-form__field input,
.tw-mix-form__field select,
.tw-mix-form__field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #0B0B0B;
  border: 1px solid rgba(245, 245, 245, 0.14);
  border-radius: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font);
  font-size: 0.98rem;
  line-height: 1.4;
  padding: 0.85rem 0.95rem;
  outline: none;
  transition: border-color var(--tw-transition);
}

.tw-mix-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,245,245,0.55) 50%), linear-gradient(135deg, rgba(245,245,245,0.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.tw-mix-form__field input:focus,
.tw-mix-form__field select:focus,
.tw-mix-form__field textarea:focus {
  border-color: rgba(182, 255, 0, 0.55);
}

.tw-mix-form__help {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--tw-muted);
}

.tw-mix-form__stem-note {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.7);
  grid-column: 1 / -1;
}

.tw-mix-form__consent {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.78);
}

.tw-mix-form__consent label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
}

.tw-mix-form__consent input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--tw-green);
  flex-shrink: 0;
}

.tw-mix-form__actions {
  margin: 1.75rem 0 0;
}

.tw-mix-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(182, 255, 0, 0.45);
  border-radius: 0;
  padding: 0.4rem 0;
  min-height: 44px;
  font-family: var(--tw-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.9);
  cursor: pointer;
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-mix-form__submit:hover,
.tw-mix-form__submit:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-mix-form__submit .tw-mix__cta-arrow {
  transition: transform var(--tw-transition);
}

.tw-mix-form__submit:hover .tw-mix__cta-arrow,
.tw-mix-form__submit:focus-visible .tw-mix__cta-arrow {
  transform: translateX(3px);
}

.tw-mix-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.tw-mix-form__success {
  max-width: 40rem;
  padding: 2rem 0 3rem;
}

.tw-mix-form__success-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-mix-form__success-body {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.85);
}

.tw-mix-form__error {
  margin: 0 0 1.25rem;
  padding: 0.85rem 0;
  border-left: 2px solid rgba(182, 255, 0, 0.6);
  padding-left: 0.85rem;
  color: rgba(245, 245, 245, 0.9);
  font-size: 0.95rem;
}

.tw-mix-form__pay-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-mix__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-mix__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .tw-mix__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-mix__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tw-mix__hero-media {
    max-width: 100%;
    justify-self: stretch;
    max-height: min(58vh, 480px);
    order: 2;
  }
  .tw-mix__hero-copy { order: 1; }
  .tw-mix__hero-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }
  .tw-mix__chapter-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .tw-mix__rule {
    width: calc(100% - 48px);
  }
  .tw-mix-form__grid {
    grid-template-columns: 1fr;
  }
}


/* Mixing areas + final CTA (4E exact brief) */
.tw-mix__area-desc {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--tw-muted, #8a8a8a);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}
.tw-mix__final {
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
	border-top: 1px solid rgba(245, 245, 245, 0.08);
}
.tw-mix__final-inner { text-align: left; }
.tw-mix__final-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tw-green, #b6ff00);
}
.tw-mix__final-line {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tw-white, #f5f5f5);
}

/* -------------------------------------------------------------------------- */
/* Mastering page (/services/mastering/) — Phase 4F                            */
/* Sibling to Mixing. Landscape hero (Media 237). #050505. No prices.          */
/* object-position keeps monitors + listening-position symmetry.               */
/* -------------------------------------------------------------------------- */
.tw-mast-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-mast {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  /* 4G.2 critical: clip X without creating a Y scroll container (hidden→auto) */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-mast__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
}

@media (max-width: 768px) {
  .tw-mast__inner { padding: 0 24px; }
}

.tw-mast__hero {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

/* Landscape-led: copy left, wide monitoring image right (≠ Mixing 4:5 portrait). */
.tw-mast__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 4.5vw, 3.75rem);
  align-items: center;
}

.tw-mast__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-mast__eyebrow-kicker { color: var(--tw-green); }
.tw-mast__eyebrow-sep { color: var(--tw-muted); opacity: 0.55; }
.tw-mast__eyebrow-name { color: var(--tw-secondary); }

.tw-mast__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.2vw, 3.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
}

.tw-mast__hero-support {
  margin: 0 0 1.75rem;
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-mast__hero-media {
  margin: 0;
  width: 100%;
  max-width: 640px;
  justify-self: end;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 420px);
}

.tw-mast__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Master-Ten-Walls: keep centered monitors + listening chair (symmetric sweet spot). */
.tw-mast__img--hero {
  object-position: center 48%;
}

.tw-mast__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.tw-mast__chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.tw-mast__index-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-mast__index { color: var(--tw-green); }
.tw-mast__index-label { color: var(--tw-muted); }

.tw-mast__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.tw-mast__chapter-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.45;
  color: var(--tw-muted);
  font-weight: 400;
}

.tw-mast__prose {
  max-width: 38rem;
}

.tw-mast__prose p {
  margin: 0 0 1rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-mast__prose p:last-child { margin-bottom: 0; }

.tw-mast__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-mast__areas li {
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-mast__areas li:nth-child(odd) {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-mast__area-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-mast__area-desc {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tw-muted, #8a8a8a);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.tw-mast__delivery {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.tw-mast__del-name {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-mast__del-desc {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
}

.tw-mast__note {
  margin: 0;
  padding-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tw-muted);
  max-width: 38rem;
}

.tw-mast__inline-link {
  color: rgba(245, 245, 245, 0.88);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(182, 255, 0, 0.4);
}

.tw-mast__inline-link:hover,
.tw-mast__inline-link:focus-visible {
  color: var(--tw-green);
  outline: none;
}

.tw-mast__reqs {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tw-mast__reqs li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.8);
  padding-left: 0.85rem;
  border-left: 1px solid rgba(182, 255, 0, 0.35);
}

.tw-mast__process-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 40rem;
}

.tw-mast__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-mast__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.25rem 1.2rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  align-items: start;
}

.tw-mast__step:nth-child(odd) {
  border-right: 1px solid rgba(245, 245, 245, 0.08);
  padding-right: 1.5rem;
}

.tw-mast__step-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tw-green);
  padding-top: 0.15rem;
}

.tw-mast__step-name {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-mast__step-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--tw-muted);
}

.tw-mast__chapter--process {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.tw-mast__form-section {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}

.tw-mast__form-head {
  margin: 0 0 0.5rem;
  max-width: 40rem;
}

.tw-mast__form-lede {
  margin: 0.85rem 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-mast__rule {
  border: 0;
  height: 1px;
  margin: 0 auto;
  max-width: 1220px;
  width: calc(100% - clamp(64px, 8vw, 96px));
  background: rgba(245, 245, 245, 0.1);
}

.tw-mast__cta-wrap { margin: 0; }

.tw-mast__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  min-height: 40px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.78);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-mast__cta:hover,
.tw-mast__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-mast__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  line-height: 1;
  transition: transform var(--tw-transition);
}

.tw-mast__cta:hover .tw-mast__cta-arrow,
.tw-mast__cta:focus-visible .tw-mast__cta-arrow {
  transform: translateX(3px);
}

.tw-mast__final {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  border-top: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-mast__final-inner { text-align: left; }

.tw-mast__final-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-green, #b6ff00);
}

.tw-mast__final-line {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tw-white, #f5f5f5);
}

/* —— Mastering form —— */
.tw-mast-form-wrap {
  background: var(--tw-bg);
  padding: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}

.tw-mast-form-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(32px, 4vw, 48px) 0;
}

@media (max-width: 768px) {
  .tw-mast-form-inner { padding-left: 24px; padding-right: 24px; }
}

.tw-mast-form {
  max-width: 44rem;
  margin-top: 0.5rem;
}

.tw-mast-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.35rem;
}

.tw-mast-form__field {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tw-mast-form__field--full {
  grid-column: 1 / -1;
}

.tw-mast-form__field label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-mast-form__req { color: var(--tw-green); }

.tw-mast-form__field input,
.tw-mast-form__field select,
.tw-mast-form__field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #0B0B0B;
  border: 1px solid rgba(245, 245, 245, 0.14);
  border-radius: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font);
  font-size: 0.98rem;
  line-height: 1.4;
  padding: 0.85rem 0.95rem;
  outline: none;
  transition: border-color var(--tw-transition);
}

.tw-mast-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,245,245,0.55) 50%), linear-gradient(135deg, rgba(245,245,245,0.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.tw-mast-form__field input:focus,
.tw-mast-form__field select:focus,
.tw-mast-form__field textarea:focus {
  border-color: rgba(182, 255, 0, 0.55);
}

.tw-mast-form__help {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--tw-muted);
}

.tw-mast-form__consent {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.78);
}

.tw-mast-form__consent label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
}

.tw-mast-form__consent input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--tw-green);
  flex-shrink: 0;
}

.tw-mast-form__actions {
  margin: 1.75rem 0 0;
}

.tw-mast-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(182, 255, 0, 0.45);
  border-radius: 0;
  padding: 0.4rem 0;
  min-height: 44px;
  font-family: var(--tw-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.9);
  cursor: pointer;
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-mast-form__submit:hover,
.tw-mast-form__submit:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-mast-form__submit .tw-mast__cta-arrow {
  transition: transform var(--tw-transition);
}

.tw-mast-form__submit:hover .tw-mast__cta-arrow,
.tw-mast-form__submit:focus-visible .tw-mast__cta-arrow {
  transform: translateX(3px);
}

.tw-mast-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.tw-mast-form__success {
  max-width: 40rem;
  padding: 2rem 0 3rem;
}

.tw-mast-form__success-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-mast-form__success-body {
  margin: 0 0 0.65rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.85);
}

.tw-mast-form__success-body:last-child { margin-bottom: 0; }

.tw-mast-form__error {
  margin: 0 0 1.25rem;
  padding: 0.85rem 0;
  border-left: 2px solid rgba(182, 255, 0, 0.6);
  padding-left: 0.85rem;
  color: rgba(245, 245, 245, 0.9);
  font-size: 0.95rem;
}

.tw-mast-form__pay-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-mast__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-mast__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .tw-mast__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-mast__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tw-mast__hero-media {
    max-width: 100%;
    justify-self: stretch;
    max-height: min(42vh, 320px);
    order: 2;
    aspect-ratio: 16 / 9;
  }
  .tw-mast__hero-copy { order: 1; }
  .tw-mast__hero-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }
  .tw-mast__chapter-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .tw-mast__areas {
    grid-template-columns: 1fr;
  }
  .tw-mast__areas li:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
  .tw-mast__steps {
    grid-template-columns: 1fr;
  }
  .tw-mast__step:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
  .tw-mast__rule {
    width: calc(100% - 48px);
  }
  .tw-mast-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== TRACK PIMPING (4G) ===== */
.tw-pimp-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-pimp {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  /* 4G.2 critical: clip X without creating a Y scroll container (hidden→auto) */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-pimp__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
}

@media (max-width: 768px) {
  .tw-pimp__inner { padding: 0 24px; }
}

.tw-pimp__hero {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

/* Landscape-led: copy left, wide monitoring image right (≠ Mixing 4:5 portrait). */
.tw-pimp__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 4.5vw, 3.75rem);
  align-items: center;
}

.tw-pimp__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-pimp__eyebrow-kicker { color: var(--tw-green); }
.tw-pimp__eyebrow-sep { color: var(--tw-muted); opacity: 0.55; }
.tw-pimp__eyebrow-name { color: var(--tw-secondary); }

.tw-pimp__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.2vw, 3.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
}

.tw-pimp__hero-support {
  margin: 0 0 1.75rem;
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-pimp__hero-media {
  margin: 0;
  width: 100%;
  max-width: 640px;
  justify-self: end;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 420px);
}

.tw-pimp__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Pimping-Ten-Walls-: keep DAW monitor + controller + studio monitors dominant. */
.tw-pimp__img--hero {
  object-position: center 42%;
}

.tw-pimp__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.tw-pimp__chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.tw-pimp__index-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-pimp__index { color: var(--tw-green); }
.tw-pimp__index-label { color: var(--tw-muted); }

.tw-pimp__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.tw-pimp__chapter-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.45;
  color: var(--tw-muted);
  font-weight: 400;
}

.tw-pimp__prose {
  max-width: 38rem;
}

.tw-pimp__prose p {
  margin: 0 0 1rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-pimp__prose p:last-child { margin-bottom: 0; }

.tw-pimp__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-pimp__areas li {
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-pimp__areas li:nth-child(odd) {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-pimp__area-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-pimp__area-desc {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tw-muted, #8a8a8a);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.tw-pimp__delivery {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.tw-pimp__del-name {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-pimp__del-desc {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
}

.tw-pimp__note {
  margin: 0;
  padding-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tw-muted);
  max-width: 38rem;
}

.tw-pimp__inline-link {
  color: rgba(245, 245, 245, 0.88);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(182, 255, 0, 0.4);
}

.tw-pimp__inline-link:hover,
.tw-pimp__inline-link:focus-visible {
  color: var(--tw-green);
  outline: none;
}

.tw-pimp__reqs {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tw-pimp__reqs li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.8);
  padding-left: 0.85rem;
  border-left: 1px solid rgba(182, 255, 0, 0.35);
}

.tw-pimp__process-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 40rem;
}

.tw-pimp__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-pimp__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.25rem 1.2rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  align-items: start;
}

.tw-pimp__step:nth-child(odd) {
  border-right: 1px solid rgba(245, 245, 245, 0.08);
  padding-right: 1.5rem;
}

.tw-pimp__step-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tw-green);
  padding-top: 0.15rem;
}

.tw-pimp__step-name {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-pimp__step-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--tw-muted);
}

.tw-pimp__chapter--process {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.tw-pimp__form-section {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}

.tw-pimp__form-head {
  margin: 0 0 0.5rem;
  max-width: 40rem;
}

.tw-pimp__form-lede {
  margin: 0.85rem 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-pimp__rule {
  border: 0;
  height: 1px;
  margin: 0 auto;
  max-width: 1220px;
  width: calc(100% - clamp(64px, 8vw, 96px));
  background: rgba(245, 245, 245, 0.1);
}

.tw-pimp__cta-wrap { margin: 0; }

.tw-pimp__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  min-height: 40px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.78);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-pimp__cta:hover,
.tw-pimp__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-pimp__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  line-height: 1;
  transition: transform var(--tw-transition);
}

.tw-pimp__cta:hover .tw-pimp__cta-arrow,
.tw-pimp__cta:focus-visible .tw-pimp__cta-arrow {
  transform: translateX(3px);
}

.tw-pimp__final {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  border-top: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-pimp__final-inner { text-align: left; }

.tw-pimp__final-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-green, #b6ff00);
}

.tw-pimp__final-line {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tw-white, #f5f5f5);
}

/* —— Mastering form —— */
.tw-pimp-form-wrap {
  background: var(--tw-bg);
  padding: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}

.tw-pimp-form-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(32px, 4vw, 48px) 0;
}

@media (max-width: 768px) {
  .tw-pimp-form-inner { padding-left: 24px; padding-right: 24px; }
}

.tw-pimp-form {
  max-width: 44rem;
  margin-top: 0.5rem;
}

.tw-pimp-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.35rem;
}

.tw-pimp-form__field {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tw-pimp-form__field--full {
  grid-column: 1 / -1;
}

.tw-pimp-form__field label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-pimp-form__req { color: var(--tw-green); }

.tw-pimp-form__field input,
.tw-pimp-form__field select,
.tw-pimp-form__field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #0B0B0B;
  border: 1px solid rgba(245, 245, 245, 0.14);
  border-radius: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font);
  font-size: 0.98rem;
  line-height: 1.4;
  padding: 0.85rem 0.95rem;
  outline: none;
  transition: border-color var(--tw-transition);
}

.tw-pimp-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,245,245,0.55) 50%), linear-gradient(135deg, rgba(245,245,245,0.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.tw-pimp-form__field input:focus,
.tw-pimp-form__field select:focus,
.tw-pimp-form__field textarea:focus {
  border-color: rgba(182, 255, 0, 0.55);
}

.tw-pimp-form__help {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--tw-muted);
}

.tw-pimp-form__consent {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.78);
}

.tw-pimp-form__consent label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
}

.tw-pimp-form__consent input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--tw-green);
  flex-shrink: 0;
}

.tw-pimp-form__actions {
  margin: 1.75rem 0 0;
}

.tw-pimp-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(182, 255, 0, 0.45);
  border-radius: 0;
  padding: 0.4rem 0;
  min-height: 44px;
  font-family: var(--tw-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.9);
  cursor: pointer;
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-pimp-form__submit:hover,
.tw-pimp-form__submit:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-pimp-form__submit .tw-pimp__cta-arrow {
  transition: transform var(--tw-transition);
}

.tw-pimp-form__submit:hover .tw-pimp__cta-arrow,
.tw-pimp-form__submit:focus-visible .tw-pimp__cta-arrow {
  transform: translateX(3px);
}

.tw-pimp-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.tw-pimp-form__success {
  max-width: 40rem;
  padding: 2rem 0 3rem;
}

.tw-pimp-form__success-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tw-green);
}

.tw-pimp-form__success-body {
  margin: 0 0 0.65rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.85);
}

.tw-pimp-form__success-body:last-child { margin-bottom: 0; }

.tw-pimp-form__error {
  margin: 0 0 1.25rem;
  padding: 0.85rem 0;
  border-left: 2px solid rgba(182, 255, 0, 0.6);
  padding-left: 0.85rem;
  color: rgba(245, 245, 245, 0.9);
  font-size: 0.95rem;
}

.tw-pimp-form__pay-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-pimp__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-pimp__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .tw-pimp__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-pimp__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tw-pimp__hero-media {
    max-width: 100%;
    justify-self: stretch;
    max-height: min(42vh, 320px);
    order: 2;
    aspect-ratio: 16 / 9;
  }
  .tw-pimp__img--hero {
    object-position: center 38%;
  }
  .tw-pimp__hero-copy { order: 1; }
  .tw-pimp__hero-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }
  .tw-pimp__chapter-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .tw-pimp__areas {
    grid-template-columns: 1fr;
  }
  .tw-pimp__areas li:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
  .tw-pimp__steps {
    grid-template-columns: 1fr;
  }
  .tw-pimp__step:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
  .tw-pimp__rule {
    width: calc(100% - 48px);
  }
  .tw-pimp-form__grid {
    grid-template-columns: 1fr;
  }
}




/* Stage select in Track Pimping form */
.tw-pimp-form select {
  appearance: none;
  background-color: #0f0f0f;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,245,245,0.45) 50%),
    linear-gradient(135deg, rgba(245,245,245,0.45) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}


/* -------------------------------------------------------------------------- */
/* OTHER STUDIO SERVICES cross-nav (Mixing / Mastering / Track Pimping)       */
/* -------------------------------------------------------------------------- */
.tw-xnav {
  padding: 3.5rem 0 2.5rem;
}
.tw-xnav__label {
  margin: 0 0 1.25rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-muted);
}
.tw-xnav__list {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
}
.tw-xnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tw-transition), color var(--tw-transition);
}
.tw-xnav__row:last-child {
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
}
.tw-xnav__name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.9);
}
.tw-xnav__arrow {
  color: var(--tw-muted);
  transition: transform var(--tw-transition), color var(--tw-transition);
}
.tw-xnav__row:hover .tw-xnav__name,
.tw-xnav__row:focus-visible .tw-xnav__name {
  color: var(--tw-green);
}
.tw-xnav__row:hover .tw-xnav__arrow,
.tw-xnav__row:focus-visible .tw-xnav__arrow {
  color: var(--tw-green);
  transform: translateX(3px);
}
.tw-xnav__row:focus-visible {
  outline: none;
  border-top-color: rgba(182, 255, 0, 0.45);
}

/* Shared studio form grid safety (Phase 4G.1) */
.tw-mix-form__grid,
.tw-mast-form__grid,
.tw-pimp-form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tw-mix-form__field,
.tw-mast-form__field,
.tw-pimp-form__field {
  min-width: 0;
}
.tw-mix-form__field input,
.tw-mix-form__field select,
.tw-mix-form__field textarea,
.tw-mast-form__field input,
.tw-mast-form__field select,
.tw-mast-form__field textarea,
.tw-pimp-form__field input,
.tw-pimp-form__field select,
.tw-pimp-form__field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .tw-mix-form__grid,
  .tw-mast-form__grid,
  .tw-pimp-form__grid {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------------------------- */
/* 1-on-1 Lessons (/services/1-on-1-lessons/) — Phase 4H                        */
/* TidyCal booking only — no tw_enquiry form. overflow-x:clip (4G.2b safe).     */
/* -------------------------------------------------------------------------- */
.tw-lessons-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-lessons {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.tw-lessons__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.tw-lessons__hero {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.25rem, 4vw, 3.25rem);
}

.tw-lessons__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.tw-lessons__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  margin: 0 0 1rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tw-lessons__eyebrow-kicker { color: var(--tw-green); }
.tw-lessons__eyebrow-sep { color: var(--tw-muted); }
.tw-lessons__eyebrow-name { color: var(--tw-muted); }

.tw-lessons__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.8vw, 3.35rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.tw-lessons__hero-support {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-lessons__hero-media {
  margin: 0;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: min(62vh, 520px);
}

.tw-lessons__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tw-lessons__img--hero {
  object-position: center 28%;
}

.tw-lessons__rule {
  display: block;
  border: 0;
  height: 1px;
  margin: 0 auto;
  width: calc(100% - clamp(2.5rem, 8vw, 5rem));
  max-width: 1220px;
  background: rgba(245, 245, 245, 0.12);
}

.tw-lessons__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.tw-lessons__chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.tw-lessons__index-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-lessons__index { color: var(--tw-green); }
.tw-lessons__index-label { color: var(--tw-muted); }

.tw-lessons__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tw-fg);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.tw-lessons__chapter-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.45;
  color: var(--tw-muted);
  font-weight: 400;
}

.tw-lessons__prose {
  max-width: 38rem;
}

.tw-lessons__prose p {
  margin: 0 0 1rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
}

.tw-lessons__prose p:last-child { margin-bottom: 0; }

.tw-lessons__note {
  margin: 1.35rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-lessons__note strong {
  color: rgba(245, 245, 245, 0.88);
  font-weight: 600;
}

.tw-lessons__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-lessons__areas li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.85rem 1.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  align-items: baseline;
}

.tw-lessons__area-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-lessons__area-desc {
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  line-height: 1.5;
  color: var(--tw-muted);
}

.tw-lessons__sessions-head,
.tw-lessons__how-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 40rem;
}

.tw-lessons__packs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-lessons__pack {
  padding: clamp(1.35rem, 2.5vw, 1.85rem) 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  max-width: 42rem;
}

.tw-lessons__pack-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-lessons__pack-desc {
  margin: 0 0 0.65rem;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
}

.tw-lessons__pack-desc:last-of-type { margin-bottom: 0; }

.tw-lessons__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.12);
}

.tw-lessons__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.25rem 1.2rem 0;
  border-bottom: 1px solid rgba(245, 245, 245, 0.12);
  align-items: start;
}

.tw-lessons__step:nth-child(odd) {
  border-right: 1px solid rgba(245, 245, 245, 0.08);
  padding-right: 1.5rem;
}

.tw-lessons__step-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tw-green);
  padding-top: 0.15rem;
}

.tw-lessons__step-name {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-lessons__step-desc {
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--tw-muted);
}

.tw-lessons__cta-wrap { margin: 1.35rem 0 0; }

.tw-lessons__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0;
  min-height: 44px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.88);
  border-bottom: 1px solid rgba(182, 255, 0, 0.35);
  transition: color var(--tw-transition), border-color var(--tw-transition);
}

.tw-lessons__cta:hover,
.tw-lessons__cta:focus-visible {
  color: var(--tw-green);
  border-bottom-color: var(--tw-green);
  outline: none;
}

.tw-lessons__cta-arrow {
  color: var(--tw-green);
  font-size: 0.85em;
  transition: transform var(--tw-transition);
}

.tw-lessons__cta:hover .tw-lessons__cta-arrow,
.tw-lessons__cta:focus-visible .tw-lessons__cta-arrow {
  transform: translateX(3px);
}

.tw-lessons__final {
  padding: clamp(2.75rem, 5vw, 4rem) 0;
}

.tw-lessons__final-inner {
  max-width: 40rem;
}

.tw-lessons__final-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tw-fg);
}

.tw-lessons .tw-xnav {
  padding: 0 0 clamp(3rem, 5vw, 4.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  .tw-lessons__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-lessons__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .tw-lessons__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-lessons__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .tw-lessons__hero-media {
    max-width: 100%;
    justify-self: stretch;
    max-height: min(52vh, 420px);
    order: 2;
    aspect-ratio: 1 / 1;
  }
  .tw-lessons__img--hero {
    object-position: center 24%;
  }
  .tw-lessons__hero-copy { order: 1; }
  .tw-lessons__hero-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }
  .tw-lessons__chapter-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .tw-lessons__areas li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .tw-lessons__steps {
    grid-template-columns: 1fr;
  }
  .tw-lessons__step:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
  .tw-lessons__rule {
    width: calc(100% - 48px);
  }
  .tw-lessons__chapter-identity,
  .tw-lessons__chapter-body,
  .tw-lessons__pack,
  .tw-lessons__pack-desc {
    min-width: 0;
    max-width: 100%;
  }
  .tw-lessons__pack-desc {
    overflow-wrap: anywhere;
  }
}

/* -------------------------------------------------------------------------- */
/* Contact page (/contact/) — Phase 4I THE RIGHT CONTACT                      */
/* Typography-first. Editorial rows — NOT SaaS cards. No hero photo.          */
/* -------------------------------------------------------------------------- */
.tw-contact-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-contact {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  /* clip X without creating a Y scroll container */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-contact *,
.tw-contact *::before,
.tw-contact *::after {
  box-sizing: border-box;
}

.tw-contact__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .tw-contact__inner { padding: 0 24px; }
}

/* —— Hero (typography-first, no media) —— */
.tw-contact__hero {
  padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

.tw-contact__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-contact__eyebrow-kicker { color: var(--tw-green); }
.tw-contact__eyebrow-sep { opacity: 0.55; }
.tw-contact__eyebrow-name { color: var(--tw-secondary); }

.tw-contact__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.4vw, 3.45rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
  max-width: 18ch;
  overflow-wrap: break-word;
}

.tw-contact__hero-support {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

/* —— Chapter —— */
.tw-contact__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.tw-contact__chapter-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
  max-width: 100%;
}

.tw-contact__index-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tw-contact__index { color: var(--tw-green); }
.tw-contact__index-label { color: var(--tw-muted); }

.tw-contact__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--tw-fg);
  margin: 0;
  text-transform: uppercase;
  max-width: 16ch;
  overflow-wrap: break-word;
}

/* —— Editorial rows —— */
.tw-contact__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.tw-contact__row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  padding: clamp(1.35rem, 2.4vw, 1.85rem) 0;
  border-top: 1px solid rgba(245, 245, 245, 0.1);
  min-width: 0;
  max-width: 100%;
}

.tw-contact__row:last-child {
  border-bottom: 1px solid rgba(245, 245, 245, 0.1);
}

.tw-contact__row-identity,
.tw-contact__row-body {
  min-width: 0;
  max-width: 100%;
}

.tw-contact__row-title {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--tw-fg);
  overflow-wrap: break-word;
}

.tw-contact__row-desc {
  margin: 0 0 0.85rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
  overflow-wrap: break-word;
}

.tw-contact__row-email {
  margin: 0 0 1rem;
}

.tw-contact__row-email--discreet {
  margin-bottom: 0.55rem;
}

.tw-contact__row-note {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-contact__email {
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.28);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: color 0.25s var(--tw-ease), border-color 0.25s var(--tw-ease);
  overflow-wrap: anywhere;
}

.tw-contact__email:hover,
.tw-contact__email:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
  outline: none;
}

.tw-contact__email--muted {
  color: var(--tw-muted);
  border-bottom-color: rgba(138, 138, 138, 0.35);
  font-size: 0.85rem;
}

.tw-contact__email--muted:hover,
.tw-contact__email--muted:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
}

.tw-contact__cta-wrap { margin: 0; }

.tw-contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.35);
  padding-bottom: 0.15rem;
  transition: color 0.25s var(--tw-ease), border-color 0.25s var(--tw-ease);
  max-width: 100%;
  overflow-wrap: break-word;
}

.tw-contact__cta:hover,
.tw-contact__cta:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
  outline: none;
}

.tw-contact__cta-arrow {
  display: inline-block;
  transition: transform 0.25s var(--tw-ease);
}

.tw-contact__cta:hover .tw-contact__cta-arrow,
.tw-contact__cta:focus-visible .tw-contact__cta-arrow {
  transform: translateX(3px);
}

.tw-contact__studio-discreet {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-contact__rule {
  border: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.08);
  margin: 0 auto;
  width: calc(100% - clamp(64px, 8vw, 96px));
  max-width: 1220px;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-contact__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-contact__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

/* Tablet: prefer 1-col or loose 2 — avoid cramped 3-col */
@media (max-width: 900px) {
  .tw-contact__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-contact__hero-title {
    font-size: clamp(1.85rem, 8.5vw, 2.65rem);
    max-width: none;
  }
  .tw-contact__row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1.35rem 0;
  }
  .tw-contact__row-identity,
  .tw-contact__row-body,
  .tw-contact__row-desc,
  .tw-contact__row-title,
  .tw-contact__cta,
  .tw-contact__cta-wrap {
    min-width: 0;
    max-width: 100%;
  }
  .tw-contact__row-desc,
  .tw-contact__email {
    overflow-wrap: anywhere;
  }
  .tw-contact__rule {
    width: calc(100% - 48px);
  }
  .tw-contact__chapter-title {
    max-width: none;
  }
}

.tw-contact__elsewhere {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 4vw, 2.75rem);
  min-width: 0;
  max-width: 100%;
}

.tw-contact__elsewhere li {
  min-width: 0;
}

.tw-contact__elsewhere-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.35);
  padding-bottom: 0.15rem;
  transition: color 0.25s var(--tw-ease), border-color 0.25s var(--tw-ease);
}

.tw-contact__elsewhere-link:hover,
.tw-contact__elsewhere-link:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
  outline: none;
}

.tw-contact__elsewhere-link:hover .tw-contact__cta-arrow,
.tw-contact__elsewhere-link:focus-visible .tw-contact__cta-arrow {
  transform: translateX(3px);
}

.tw-contact__chapter--elsewhere {
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* ==========================================================================
   Phase 4J — Bookings (Gigwell Booking Form / booknow.js) — typography-first hub
   overflow-x:clip + overflow-y:visible (one document scroll)
   ========================================================================== */

.tw-bookings-main {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tw-bg);
}

.tw-bookings {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font-family: var(--tw-font);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.tw-bookings *,
.tw-bookings *::before,
.tw-bookings *::after {
  box-sizing: border-box;
}

.tw-bookings__inner {
  box-sizing: border-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 48px);
  width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .tw-bookings__inner { padding: 0 24px; }
}

.tw-bookings__hero {
  padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

.tw-bookings__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-bookings__eyebrow-kicker { color: var(--tw-green); }
.tw-bookings__eyebrow-sep { opacity: 0.55; }
.tw-bookings__eyebrow-name { color: var(--tw-secondary); }

.tw-bookings__hero-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.4vw, 3.45rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--tw-fg);
  margin: 0 0 1.35rem;
  text-transform: uppercase;
  max-width: 14ch;
  overflow-wrap: break-word;
}

.tw-bookings__hero-support {
  margin: 0 0 0.75rem;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.82);
  font-weight: 400;
}

.tw-bookings__hero-note {
  margin: 0 0 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-bookings__hero-cta-wrap {
  margin: 0;
}

.tw-bookings__chapter {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.tw-bookings__chapter-head {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
  max-width: 100%;
}

.tw-bookings__index-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tw-bookings__index { color: var(--tw-green); }
.tw-bookings__index-label { color: var(--tw-muted); }

.tw-bookings__chapter-title {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--tw-fg);
  margin: 0 0 1rem;
  text-transform: uppercase;
  max-width: 16ch;
  overflow-wrap: break-word;
}

.tw-bookings__chapter-desc {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
}

.tw-bookings__gigwell-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  /* allow Gigwell widget room; no nested page scroll */
  overflow-x: clip;
  overflow-y: visible;
}

.tw-bookings__gigwell-wrap gigwell-booking-form {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.tw-bookings__gigwell-wrap iframe {
  max-width: 100% !important;
}

.tw-bookings__fallback {
  margin-top: 1.25rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(245, 245, 245, 0.1);
}

.tw-bookings__fallback[hidden] {
  display: none !important;
}

.tw-bookings__fallback-label {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-bookings__fallback-email,
.tw-bookings__fallback-link {
  margin: 0 0 0.75rem;
}

.tw-bookings__secondary {
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(245, 245, 245, 0.08);
}

.tw-bookings__secondary-label {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-muted);
}

.tw-bookings__secondary-email {
  margin: 0 0 1rem;
}

.tw-bookings__simple {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.72);
}

.tw-bookings__email {
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.28);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: color 0.25s var(--tw-ease), border-color 0.25s var(--tw-ease);
  overflow-wrap: anywhere;
}

.tw-bookings__email:hover,
.tw-bookings__email:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
  outline: none;
}

.tw-bookings__email--muted {
  color: var(--tw-muted);
  border-bottom-color: rgba(138, 138, 138, 0.35);
  font-size: 0.85rem;
}

.tw-bookings__email--muted:hover,
.tw-bookings__email--muted:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
}

.tw-bookings__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 245, 0.35);
  padding-bottom: 0.15rem;
  transition: color 0.25s var(--tw-ease), border-color 0.25s var(--tw-ease);
  max-width: 100%;
  overflow-wrap: break-word;
}

.tw-bookings__cta:hover,
.tw-bookings__cta:focus-visible {
  color: var(--tw-green);
  border-color: var(--tw-green);
  outline: none;
}

.tw-bookings__cta--muted {
  color: var(--tw-muted);
  border-bottom-color: rgba(138, 138, 138, 0.35);
}

.tw-bookings__cta--inline {
  display: inline-flex;
  margin-left: 0.35rem;
}

.tw-bookings__cta-arrow {
  display: inline-block;
  transition: transform 0.25s var(--tw-ease);
}

.tw-bookings__cta:hover .tw-bookings__cta-arrow,
.tw-bookings__cta:focus-visible .tw-bookings__cta-arrow {
  transform: translateX(3px);
}

.tw-bookings__rule {
  border: 0;
  border-top: 1px solid rgba(245, 245, 245, 0.08);
  margin: 0 auto;
  width: calc(100% - clamp(64px, 8vw, 96px));
  max-width: 1220px;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-bookings__reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  }
  .tw-bookings__reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .tw-bookings__hero {
    padding: 2.25rem 0 2rem;
  }
  .tw-bookings__hero-title {
    font-size: clamp(1.85rem, 8.5vw, 2.65rem);
    max-width: none;
  }
  .tw-bookings__chapter-title {
    max-width: none;
  }
  .tw-bookings__rule {
    width: calc(100% - 48px);
  }
}