/* Homepage density pass: retain the content, shorten the route to a project brief. */
.audience-section {
  padding-top:clamp(64px,7vw,104px);
  padding-bottom:clamp(64px,7vw,104px);
}
.audience-heading {margin-bottom:clamp(30px,3.5vw,48px)}
.audience-heading h2 {font-size:clamp(48px,5.5vw,84px)}
.audience-card {
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:18px;
  min-height:230px;
  padding:clamp(22px,2vw,30px);
}
.audience-card>div:last-child {min-width:0}
.audience-art {width:72px;height:88px}
.audience-art svg {width:90px;height:88px;max-width:none}
.audience-card h3 {font-size:clamp(27px,2.3vw,36px)}
.audience-card p {font-size:14px}

.project-gallery .case-heading {padding-bottom:clamp(30px,4vw,54px)}
.project-gallery .case-heading .section-heading {align-items:end}
.project-gallery .case-heading .section-heading>p {max-width:380px}
.case-mobile-hint {display:none}
.case-showcase:focus-visible {outline:3px solid var(--studio-blue);outline-offset:5px}
.project-gallery>.case-more {order:2}
.case-more {display:flex;justify-content:center;padding-top:24px;padding-bottom:clamp(58px,7vw,110px)}
.case-more button {display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:13px 22px;border:1px solid var(--studio-ink);border-radius:999px;background:var(--studio-ink);color:var(--studio-white);font:inherit;font-weight:600;cursor:pointer}
.case-more button:hover {background:var(--studio-blue);border-color:var(--studio-blue)}
.case-more button:focus-visible {outline:3px solid var(--studio-blue);outline-offset:4px}
.case-more button span {font-size:24px;line-height:1}
.case-more.is-open {padding-bottom:22px}
.project-gallery>.case-more-list {order:3}
.case-more-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:clamp(58px,7vw,110px)}
.case-more-list[hidden] {display:none}
.case-more-list button {display:grid;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;gap:15px;min-height:72px;padding:15px 20px;border:1px solid var(--studio-line);border-radius:22px;background:var(--studio-white);color:var(--studio-ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.case-more-list button:hover {border-color:var(--studio-blue);background:var(--studio-paper)}
.case-more-list button:focus-visible {outline:3px solid var(--studio-blue);outline-offset:2px}
.case-more-list button span:first-child {font-size:12px;color:var(--studio-muted);letter-spacing:.06em}
.case-more-list button strong {font-size:clamp(16px,1.4vw,21px);font-weight:600;line-height:1.15}
.case-more-list button span:last-child {font-size:23px;color:var(--studio-blue);text-align:right}
.case-swipe-pointer {display:inline-block;margin-left:6px;color:var(--studio-blue);font-size:20px;font-weight:700;line-height:0;white-space:nowrap}
.case-hint-end {white-space:nowrap}

.about-story {padding-top:clamp(68px,8vw,110px);padding-bottom:clamp(68px,8vw,110px)}
.about-story-head {margin-bottom:clamp(30px,4vw,48px)}
.team-teaser {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  width:min(100%,var(--studio-max));
  margin:auto;
  padding:24px clamp(22px,3vw,42px);
  border:1px solid rgb(255 255 255 / .16);
  border-radius:clamp(26px,3vw,38px);
  background:rgb(255 255 255 / .055);
}
.team-teaser-people {display:flex;align-items:center;padding-left:12px}
.team-teaser-people img {
  width:64px;
  height:64px;
  flex:none;
  margin-left:-12px;
  border:3px solid var(--studio-ink);
  border-radius:50%;
  background:var(--studio-white);
  object-fit:cover;
  object-position:center 25%;
}
.team-teaser-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:56px;
  padding:12px 20px;
  border-radius:999px;
  background:var(--studio-white);
  color:var(--studio-ink);
  font-weight:600;
}
.team-teaser-link:hover {background:var(--studio-paper)}
.team-teaser-link:focus-visible {outline:3px solid var(--studio-blue);outline-offset:4px}

.pricing-catalog>.section-heading>div>.eyebrow {display:block;margin-bottom:20px}
.pricing-catalog>.section-heading>p {max-width:460px}

.quiz-invitation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  width:calc(100% - 28px);
  margin:14px auto;
  padding-top:clamp(40px,5vw,72px);
  padding-bottom:clamp(40px,5vw,72px);
  border-radius:var(--studio-radius);
  background:var(--studio-blue);
  color:var(--studio-white);
}
.quiz-invitation h2 {max-width:690px;margin:15px 0;font-size:clamp(38px,4.7vw,70px);line-height:.97}
.quiz-invitation p:last-child {max-width:530px;color:rgb(255 255 255 / .78)}
.quiz-invitation .button {flex:none;background:var(--studio-white);color:var(--studio-ink)}
.quiz-invitation .button:hover {background:var(--studio-paper)}

#quiz-dialog {
  width:min(760px,calc(100% - 24px));
  max-height:calc(100dvh - 24px);
  padding:clamp(22px,3vw,36px);
  border-radius:30px;
  background:var(--studio-white);
  overflow-y:auto;
}
#quiz-dialog .dialog-top {position:sticky;top:0;z-index:2;padding:4px 0 10px;background:var(--studio-white)}
#quiz-dialog h2 {margin:18px 0 8px;font-size:clamp(28px,4vw,44px)}
#quiz-dialog>p {margin:0 0 24px;color:var(--studio-muted)}
#quiz-dialog .quiz-card {min-height:0;padding:clamp(18px,3vw,30px);background:var(--studio-paper)}
#quiz-dialog .quiz-choice {background:var(--studio-white)}
#quiz-dialog .quiz-progress {margin-bottom:24px}
#quiz-dialog .quiz-navigation {margin-top:24px}

.club-section {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);
  align-items:center;
  gap:clamp(32px,5vw,80px);
  padding-top:clamp(58px,7vw,100px);
  padding-bottom:clamp(58px,7vw,100px);
}
.club-copy {order:0}
.club-copy h2 {max-width:690px;margin:16px 0;font-size:clamp(38px,4.8vw,68px);line-height:.98}
.club-copy>p:not(.eyebrow) {max-width:540px;margin-bottom:16px}
.club-video-open {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:clamp(22px,2.5vw,34px);
  background:var(--studio-ink);
  color:var(--studio-white);
}
.club-video-open img {width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform 360ms ease,opacity 360ms ease}
.club-video-open:hover img {transform:scale(1.035);opacity:1}
.club-video-open>span {
  position:absolute;
  top:50%;left:50%;
  display:grid;
  place-items:center;
  width:70px;height:70px;
  border:1px solid rgb(255 255 255 / .65);
  border-radius:50%;
  background:rgb(11 15 28 / .68);
  font-size:24px;
  transform:translate(-50%,-50%);
}
.club-video-open:focus-visible {outline:3px solid var(--studio-blue);outline-offset:5px}
#club-video-dialog {width:min(1040px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:clamp(14px,2vw,24px);border-radius:26px;background:var(--studio-ink);color:var(--studio-white)}
#club-video-dialog .dialog-top {gap:20px;margin-bottom:16px}
#club-video-dialog h2 {margin:0;font-size:clamp(22px,3vw,36px)}
#club-video-dialog .close-button {border-color:rgb(255 255 255 / .35);color:var(--studio-white)}
#club-video-dialog video {display:block;width:100%;height:auto;max-height:calc(100dvh - 130px);border-radius:16px;background:#000}

@media(max-width:900px) {
  .audience-section {padding:62px 18px 68px}
  .audience-heading {margin-bottom:24px}
  .audience-grid {gap:10px}
  .audience-card {grid-template-columns:66px minmax(0,1fr);gap:17px;min-height:0;padding:20px 22px}
  .audience-art {width:66px;height:80px}
  .audience-art svg {width:76px;height:80px}
  .audience-card h3 {font-size:clamp(27px,4vw,34px)}
  .audience-card p {font-size:14px}

  .process-rooms-story {padding:70px 18px}
  .process-rooms-heading h2 {font-size:clamp(39px,7vw,58px)}
  .process-room-viewport {min-height:0;margin-top:26px}
  .process-room-list {gap:0}
  .process-room-list li,
  .process-rooms-story.is-enhanced .process-room-list li {
    position:relative;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:4px 12px;
    min-height:0;
    height:auto;
    padding:17px 0;
    border:0;
    border-top:1px solid rgb(255 255 255 / .2);
    border-radius:0;
    background:none;
    box-shadow:none;
    text-shadow:none;
  }
  .process-room-list li>span {grid-column:1;grid-row:1/3;justify-self:start;align-self:start;font-size:14px;line-height:1.4;letter-spacing:.09em;opacity:.8}
  .process-room-list h3 {grid-column:2;grid-row:1;margin:0;font-size:clamp(24px,4vw,31px);line-height:1.04}
  .process-room-list p {grid-column:2;grid-row:2;max-width:640px;margin:0;font-size:13px;line-height:1.42}

  .parallel-page .about-story {margin:0;padding:64px 18px;border-radius:0}
  .about-story-head {margin-bottom:24px}
  .about-story-head h2 {font-size:clamp(44px,8vw,68px)}
  .team-teaser {padding:22px;border-radius:28px}

  .quiz-invitation {display:block;padding:34px 24px}
  .quiz-invitation h2 {font-size:clamp(36px,7vw,58px)}
  .quiz-invitation .button {margin-top:22px}
  .club-section {grid-template-columns:1fr;gap:24px}
  .club-copy {order:0}
  .club-copy h2 {font-size:clamp(36px,7vw,58px)}
}

@media(max-width:600px) {
  .audience-heading h2 {font-size:clamp(39px,10vw,48px)}
  .audience-heading>p:last-child {margin-top:14px}
  .audience-card {grid-template-columns:54px minmax(0,1fr);gap:14px;padding:19px}
  .audience-art {width:54px;height:64px}
  .audience-art svg {width:62px;height:64px}
  .audience-card h3 {font-size:26px}
  .audience-card p {font-size:13px;line-height:1.38}
  .audience-index {font-size:9px}

  .project-gallery .case-heading .section-heading>p {margin-top:16px}
  .process-rooms-story {padding:60px 18px}
  .process-room-list li,
  .process-rooms-story.is-enhanced .process-room-list li {grid-template-columns:38px minmax(0,1fr);gap:4px 9px;padding:15px 0}
  .process-room-list h3 {font-size:25px}
  .process-room-list p {font-size:12px}

  .parallel-page .about-story {padding:58px 18px}
  .about-story-head h2 {font-size:clamp(42px,11vw,54px)}
  .about-story-head>p:last-child {margin-top:14px}
  .team-teaser {align-items:stretch;flex-direction:column;gap:20px}
  .team-teaser-people img {width:54px;height:54px}
  .team-teaser-link {width:100%;font-size:14px}

  .quiz-invitation {width:calc(100% - 16px);margin:8px auto;border-radius:26px}
  .quiz-invitation h2 {font-size:clamp(34px,9vw,46px)}
  .quiz-invitation p:last-child {font-size:14px}
  .quiz-invitation .button {width:100%;justify-content:space-between}
  #quiz-dialog {width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:20px;border-radius:24px}
  #quiz-dialog h2 {font-size:30px}
  #quiz-dialog .quiz-card {padding:18px;border-radius:20px}
  #quiz-dialog .quiz-choice {min-height:48px}
  .club-section {padding-top:56px;padding-bottom:56px}
  .club-video-open>span {width:54px;height:54px;font-size:18px}
}

@media(max-width:767px) {
  .case-desktop-hint {display:none}
  .case-mobile-hint {display:inline}
  .case-field[data-live-index] {width:100%;min-width:0;padding-right:18px;padding-bottom:28px!important}
  .case-more {justify-content:stretch;padding-top:0;padding-bottom:64px}
  .case-more button {width:100%}
  .case-more.is-open {padding-bottom:16px}
  .case-more-list {grid-template-columns:1fr;gap:8px;padding-bottom:64px}
  .case-more-list button {min-height:62px;padding:12px 16px;border-radius:18px}
  .case-showcase {
    display:flex;
    width:100%;
    min-width:0;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-padding-inline:0;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .case-showcase-card,
  .case-showcase-card-featured {
    flex:0 0 calc(100% - 42px);
    min-width:0;
    scroll-snap-align:start;
  }
  .case-showcase-media,
  .case-showcase-card-featured .case-showcase-media {height:clamp(230px,66vw,300px)}
  .case-showcase-copy {padding-bottom:10px}
}

@media(prefers-reduced-motion:reduce) {
  .club-video-open img {transition:none}
}

/* Stable image box on mobile Safari: percentage-height grid children were
   collapsing to a thin strip inside the aspect-ratio case card. */
.project-gallery .case-showcase-media,
.project-gallery .case-showcase-card-featured .case-showcase-media {
  position:relative;
  display:block;
  height:auto;
  aspect-ratio:4/3;
  border-radius:clamp(24px,2.4vw,38px);
}
.project-gallery .case-showcase-media img,
.project-gallery .case-showcase-media img.case-portrait {
  position:absolute;
  inset:0;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  height:100%;
  padding:0;
  border-radius:inherit;
  object-fit:cover;
  object-position:center;
  transform:none;
  filter:none;
}