/* Marketing page for a guided spatial review. */
#main-nav { gap: clamp(24px, 3.2vw, 44px); }
#main-nav > a { font-size: 14px; font-weight: 620; }
.hero .hero-description { max-width: 41rem; margin: 16px auto 0; text-wrap: pretty; }
.hero .hero-actions { margin-top: 22px; }
/* One question occupies the same line throughout the rotation. */
.club-questions { display: flex; justify-content: center; margin: 20px auto 0; color: #375543; font-size: clamp(17px, 2vw, 24px); font-weight: 570; line-height: 1.35; }
.question-window { --question-height: 1.35em; height: var(--question-height); overflow: hidden; max-width: 100%; }
.question-strip { animation: club-questions 23s infinite; }
.question-strip > span { display: grid; align-content: center; height: var(--question-height); line-height: 1.35; text-align: center; }
@keyframes club-questions {
  0%, 17% { transform: translateY(0); }
  20%, 37% { transform: translateY(calc(-1 * var(--question-height))); }
  40%, 57% { transform: translateY(calc(-2 * var(--question-height))); }
  60%, 77% { transform: translateY(calc(-3 * var(--question-height))); }
  80%, 97% { transform: translateY(calc(-4 * var(--question-height))); }
  100% { transform: translateY(calc(-5 * var(--question-height))); }
}
@media (max-width: 430px) { .question-window { --question-height: 2.7em; width: 95%; } }
@media (prefers-reduced-motion: reduce) { .question-strip { animation: none; } }
.club-viewer { background: #edf0ec; }
.club-viewer .viewer-preview { display: block; background: #e8ece8; }
.club-viewer .viewer-preview img { width: 100%; height: auto; max-height: 670px; object-fit: contain; }
.preview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #e8ece8; pointer-events: none; }
.motion-toggle { position: absolute; right: 12px; bottom: 12px; min-width: 54px; min-height: 36px; border: 1px solid #d8ddd6; border-radius: 22px; padding: 6px 14px; background: #fafbf6f5; color: #20372b; font-size: 13px; font-weight: 600; }
.motion-toggle:hover { background: white; }
.format-visual:is([data-format-media="web"], [data-format-media="film"]) { width: min(100%, 850px, max(320px, calc(160svh - 560px))); margin-inline: auto; }
.format-visual:is([data-format-media="web"], [data-format-media="film"]) #format-image { height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.format-visual[data-format-media="web"] #format-image { aspect-ratio: 16 / 10; }
#solution { scroll-margin-top: -8px; }


.club-case { padding-block: clamp(40px, 5vw, 68px); }
.case-intro { max-width: 710px; margin-bottom: 24px; }
.case-intro > p { color: var(--muted); margin: 12px 0 0; line-height: 1.45; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "picture options"; gap: clamp(22px, 3.5vw, 44px); align-items: center; }
.case-grid-mirror { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "options picture"; }
.case-grid + .case-grid { margin-top: clamp(22px, 3vw, 34px); }
.case-picture { grid-area: picture; position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--soft); }
.case-picture img { display: block; width: 100%; height: auto; aspect-ratio: 940/550; object-fit: contain; }
.case-picture figcaption { position: absolute; left: 12px; bottom: 12px; color: #20372b; background: #fafbf6f2; font-size: 12px; border-radius: 20px; padding: 5px 12px; }
.case-options { grid-area: options; min-width: 0; }
.case-options h3 { max-width: 18ch; text-wrap: balance; font-size: clamp(23px, 2.4vw, 32px); }
.case-buttons { display: flex; margin: 14px 0 10px; gap: 7px; flex-wrap: wrap; }
.case-buttons button { border-radius: 24px; padding: 9px 15px; background: #f0f1ed; color: #284633; font-size: 14px; }
.case-buttons button[aria-pressed="true"] { background: var(--accent); font-weight: 600; }
.case-options > p { max-width: 48ch; color: var(--muted); line-height: 1.45; }
.case-options > .text-link { margin-top: 9px; }
#pricing .review-intro { max-width: 46ch; text-wrap: balance; }
.process { border-top: 1px solid #e4e5e2; padding-block: clamp(40px, 5vw, 70px); }
.process-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(15px, 2vw, 26px); margin-top: 30px; }
.process-art { display: grid; place-items: center; aspect-ratio: 1.65; overflow: hidden; position: relative; border-radius: 16px; }
.process-art img { display: block; width: 100%; }
.brief-art { background: #e8ebe5; }
.plan-paper,.detail-paper { position: absolute; background: #fff; border: 1px solid #deded4; padding: 4px; box-shadow: 0 4px 10px #283b2917; }
.plan-paper { width: 70%; top: 16%; left: 7%; transform: rotate(-7deg); }
.detail-paper { width: 40%; right: 7%; bottom: 11%; transform: rotate(7deg); }
.plan-paper span,.detail-paper span { display: block; padding: 2px; color: #4a5147; font-size: clamp(8px, 1vw, 11px); }
.screen-art { background: #e7ecea; }
.screen-art img { width: 90%; border-radius: 5px; box-shadow: 0 4px 12px #1c302826; }
.meeting-art { background: #eeebe5; }
.decision-slide { width: 84%; padding: 8px; background: white; box-shadow: 0 4px 12px #38372d1a; transform: rotate(-2deg); }
.decision-slide img { height: clamp(48px, 6vw, 82px); object-fit: cover; }
.decision-slide > div { display: grid; padding: 5px 4px 2px; color: #26382d; line-height: 1.25; }
.decision-slide small { font-size: 9px; }
.decision-slide strong { font-size: clamp(14px, 1.4vw, 18px); }
.decision-slide span { font-size: 10px; }
.stage-copy { display: flex; gap: 12px; margin: 18px 0 0; }
.stage-copy > span { font-size: 13px; color: #50715a; }
.stage-copy h3 { font-size: clamp(19px, 2vw, 24px); }
.stage-copy p { font-size: 15px; margin-top: 9px; color: var(--muted); }
.process + .formats { padding-top: 45px; }
footer .footer-top > p { margin-right: auto; }
@media (max-width: 650px) {
  .hero .hero-description { font-size: 17px; padding-inline: 8px; }


  .case-grid, .case-grid-mirror { grid-template-columns: minmax(0,1fr); grid-template-areas: "picture" "options"; gap: 14px; }
  .case-grid + .case-grid { margin-top: 28px; }
  .case-options h3 { max-width: none; text-wrap: pretty; }
  .case-buttons { margin-top: 10px; }
  .process-stages { grid-template-columns: 1fr; gap: 22px; }
  .case-picture { border-radius: 15px; }
  .process-stages article + article { margin-top: 8px; }
  .process-art { aspect-ratio: 1.9; }
  .decision-slide img { height: 65px; }
  .process + .formats { padding-top: 20px; }
}
.case-grid[data-comparison="entrance"] .case-picture img { aspect-ratio: 1200/630; }
.review-intro { text-wrap: balance; }

.project-conversation{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,6vw,80px);border-top:1px solid var(--line);padding-block:clamp(44px,6vw,80px)}
.project-conversation h2{font-size:clamp(34px,4vw,54px);text-wrap:balance}
.project-conversation p{max-width:55ch;margin:14px 0 0;color:var(--muted);line-height:1.5}
.project-conversation .button{flex-shrink:0}
@media(max-width:700px){.project-conversation{align-items:flex-start;flex-direction:column}}

#formats .section-heading{display:block;text-align:center}
#formats .section-heading h2{margin-inline:auto;max-width:none}
@media(max-width:650px){#formats .section-heading h2{font-size:clamp(21px,7vw,39px);letter-spacing:-.045em;line-height:1.14}}