/* Editorial chapters below the interactive opening. */
.cinematic-site > main,
.cinematic-site > .footer {
  --chapter-paper: var(--site-paper, #faf7f2);
  --chapter-ink: var(--site-ink, #182433);
  --chapter-muted: #5e584f;
  --chapter-line: #c9beb0;
  --chapter-pine: var(--site-night, #182433);
  --chapter-deep: #121b27;
  --chapter-soft: #d8d4ca;
  --chapter-dark-line: #526175;
  --chapter-brass: var(--site-accent, #dfb980);
  --chapter-display: var(--sans, "Manrope", Arial, sans-serif);
  --chapter-mono: "SFMono-Regular", Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace;
  --chapter-pad: clamp(76px, 10vw, 156px);
}

.cinematic-site :is(.living-story, .section, .team-section, .contact, .footer) h2 {
  font: 500 clamp(47px, 6.2vw, 97px)/.99 var(--chapter-display);
  letter-spacing: -.072em;
}

.cinematic-site :is(.living-story, .section, .team-section, .contact) .eyebrow {
  font: 500 11px/1.5 var(--chapter-mono);
  letter-spacing: .09em;
  color: var(--chapter-muted);
}

.cinematic-site :is(.living-story, .section, .team-section) p {
  color: var(--chapter-muted);
}

.cinematic-site .section {
  padding-block: var(--chapter-pad);
}

.cinematic-site :is(.living-story, .section, .team-section) .text-link {
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 44px;
  padding: 7px 0;
  color: inherit;
  border-color: currentColor;
  font: 600 13px/1.4 var(--chapter-display);
}

.cinematic-site :is(.living-story, .section, .team-section, .contact) a .arrow {
  transition: transform .32s cubic-bezier(.2, .65, .25, 1);
}

.cinematic-site :is(.living-story, .section, .team-section, .contact) a:is(:hover, :focus-visible) .arrow {
  transform: translate(3px, -3px);
}

/* A quiet credentials rail opens the architectural story. */
.cinematic-site .trust-strip {
  display: grid;
  grid-template-columns: 1.28fr .8fr 1.25fr auto;
  min-height: 77px;
  padding-block: 19px;
  gap: 14px 25px;
  border-block: 1px solid var(--chapter-line);
  color: var(--chapter-ink);
}

.cinematic-site .trust-strip span {
  font: 500 10px/1.5 var(--chapter-mono);
  letter-spacing: .045em;
}

.cinematic-site .trust-strip .brokerage {
  font: 700 clamp(14px, 1.5vw, 19px)/1.25 var(--chapter-display);
  letter-spacing: -.045em;
}

.cinematic-site .trust-strip .brokerage::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .65rem .1rem 0;
  background: var(--chapter-ink);
  content: "";
}

.cinematic-site .living-story {
  padding: var(--chapter-pad) 0 0;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: clamp(18px, 2.65vw, 38px) clamp(34px, 7vw, 110px);
}

.cinematic-site .living-header {
  display: grid;
  grid-template-columns: minmax(130px, .64fr) minmax(0, 1.36fr);
  align-items: end;
  gap: 24px;
  padding-bottom: clamp(12px, 2.2vw, 36px);
}

.cinematic-site .living-header .eyebrow {
  padding: 0 0 .4rem;
}

.cinematic-site .living-header h2 {
  font-size: clamp(57px, 8vw, 125px);
  padding: 0;
  color: var(--chapter-ink);
}

.cinematic-site :is(.living-header, .about-copy) h2 em {
  color: #775d42;
  font-weight: inherit;
  font-style: normal;
}

.cinematic-site .living-main {
  margin-top: clamp(25px, 4.4vw, 76px);
}

.cinematic-site .living-main img {
  height: auto;
  aspect-ratio: 1.35;
  object-position: 44% center;
}

.cinematic-site .living-detail {
  padding: 0;
}

.cinematic-site .living-detail figure {
  width: 83%;
}

.cinematic-site .living-detail img {
  height: auto;
  aspect-ratio: .85;
  object-position: center 59%;
}

.cinematic-site .living-story figcaption,
.cinematic-site .feature-note {
  color: var(--chapter-muted);
  font: 500 10px/1.5 var(--chapter-mono);
  letter-spacing: .02em;
}

.cinematic-site .living-story figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--chapter-line);
}

.cinematic-site .living-story figcaption::before {
  content: "↗";
  color: var(--chapter-ink);
}

.cinematic-site .living-detail p {
  max-width: 33ch;
  margin: clamp(15px, 4vw, 52px) 0 14px;
  font-size: clamp(14px, 1.55vw, 20px);
  line-height: 1.55;
}

.cinematic-site .feature-note {
  padding-top: 4px;
}

/* Preserve the approved portrait and let the biography sit beside it. */
.cinematic-site #about {
  padding: clamp(68px, 9vw, 138px) 0 var(--chapter-pad);
}

.cinematic-site #about .about {
  max-width: none;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(45px, 8vw, 135px);
  padding-top: clamp(43px, 6vw, 92px);
  border-color: var(--chapter-line);
}

.cinematic-site .bio-side {
  max-width: 460px;
  padding: 0;
}

.cinematic-site.editorial .bio-side .portrait-block {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #e9ded0;
}

.cinematic-site.editorial .bio-side .portrait-block img {
  mix-blend-mode: normal;
}

.cinematic-site.editorial .bio-side .portrait-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px 14px;
  margin: 0;
  padding: 13px 0 0;
  background: var(--chapter-paper);
  text-align: left;
}

.cinematic-site .portrait-caption strong {
  font: 650 20px/1.25 var(--chapter-display);
  letter-spacing: -.05em;
}

.cinematic-site .portrait-caption small {
  margin: 0;
  color: var(--chapter-muted);
  font: 500 9px/1.5 var(--chapter-mono);
  letter-spacing: .02em;
}

.cinematic-site .bio-background {
  max-width: none;
  margin: 20px 0 0;
  border-color: var(--chapter-line);
}

.cinematic-site .bio-background > div {
  display: grid;
  grid-template-columns: minmax(75px, .75fr) minmax(0, 1.25fr);
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-color: var(--chapter-line);
}

.cinematic-site .bio-background dt {
  margin: 0;
  color: var(--chapter-muted);
  font: 500 9px/1.45 var(--chapter-mono);
  letter-spacing: .035em;
}

.cinematic-site .bio-background dd {
  font-size: 12px;
  line-height: 1.5;
}

.cinematic-site #about .about-copy h2 {
  max-width: 14ch;
  text-wrap: balance;
  margin: 16px 0 clamp(20px, 3.5vw, 48px);
  font-size: clamp(44px, 5.8vw, 88px);
  line-height: 1;
}

.cinematic-site #about .about-copy p {
  max-width: 57ch;
  margin: 0 0 14px;
  color: var(--chapter-muted);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.7;
}

.cinematic-site .bio-contact {
  margin-top: 14px;
  padding-top: 3px;
}

.cinematic-site .bio-email {
  color: var(--chapter-muted);
  font-size: 12px;
}

/* Change tempo and give the interactive service choices their own stage. */
.cinematic-site .services {
  background: var(--chapter-pine);
  color: var(--chapter-paper);
  border: 0;
}

.cinematic-site :is(.services, .contact) .eyebrow {
  color: var(--chapter-brass);
}

.cinematic-site .service-layout {
  grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
  align-items: start;
  gap: clamp(45px, 9vw, 140px);
}

.cinematic-site .services h2 {
  margin-top: 16px;
}

.cinematic-site .tab-list {
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  margin: 30px 0 24px;
  border: 1px solid var(--chapter-dark-line);
  border-radius: 999px;
}

.cinematic-site .tab {
  min-width: 0;
  min-height: 44px;
  padding: 9px clamp(16px, 2.2vw, 33px);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--chapter-paper);
  font-weight: 600;
  transition: background .28s, color .28s, border-color .28s;
}

.cinematic-site .tab:hover {
  border-color: var(--chapter-dark-line);
}

.cinematic-site .tab[aria-selected="true"] {
  background: var(--chapter-brass);
  border-color: var(--chapter-brass);
  color: var(--chapter-deep);
}

.cinematic-site :is(.services, .contact) :focus-visible {
  outline-color: var(--chapter-brass);
}

.cinematic-site .services p {
  color: var(--chapter-soft);
}

.cinematic-site .service-intro {
  max-width: 32ch;
  font-size: 15px;
  line-height: 1.6;
}

.cinematic-site .service-panel {
  border-top: 1px solid var(--chapter-dark-line);
  padding: 0;
}

.cinematic-site .service-panel:not([hidden]) .step {
  animation: chapter-step-in .38s cubic-bezier(.2, .65, .25, 1) both;
}

.cinematic-site .service-panel:not([hidden]) .step:nth-child(2) {
  animation-delay: 45ms;
}

.cinematic-site .service-panel:not([hidden]) .step:nth-child(3) {
  animation-delay: 90ms;
}

@keyframes chapter-step-in {
  from { opacity: .35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cinematic-site .service-panel .step {
  grid-template-columns: 29px minmax(0, 1fr);
  padding: clamp(19px, 2.7vw, 40px) 0;
  border-color: var(--chapter-dark-line);
}

.cinematic-site .step-num {
  color: var(--chapter-brass);
  font: 500 11px/1.7 var(--chapter-mono);
}

.cinematic-site .step h3 {
  font: 500 clamp(21px, 2.65vw, 39px)/1.12 var(--chapter-display);
  letter-spacing: -.055em;
}

.cinematic-site .step p {
  max-width: 49ch;
  font-size: 14px;
  line-height: 1.65;
}

.cinematic-site .service-note {
  font: 500 11px/1.7 var(--chapter-mono);
}

.cinematic-site .place-photo {
  height: clamp(365px, 53vw, 820px);
  isolation: isolate;
  background: var(--chapter-deep);
}

.cinematic-site .place-photo::after {
  position: absolute;
  inset: 48% 0 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent, #121b27bd);
  content: "";
  pointer-events: none;
}

.cinematic-site .place-photo img {
  height: 120%;
  object-position: center 60%;
  transform: translate3d(0, var(--place-shift, -8%), 0);
}

.cinematic-site .place-photo figcaption {
  inset: auto max(4%, calc((100% - 1360px) / 2)) clamp(20px, 4vw, 55px);
  z-index: 1;
  padding: 13px 0 0;
  border-top: 1px solid #faf7f28a;
  background: transparent;
  color: white;
  font: 500 11px/1.5 var(--chapter-mono);
  letter-spacing: .075em;
}

/* Two neighborhoods and a compact transaction ledger. */
.cinematic-site .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, .5fr);
  align-items: end;
  gap: clamp(25px, 5vw, 65px);
  margin-bottom: clamp(28px, 4.5vw, 72px);
}

.cinematic-site .section-head h2 {
  margin: 15px 0 0;
}

.cinematic-site .section-head p {
  max-width: 33ch;
  font-size: 15px;
  line-height: 1.65;
}

.cinematic-site .areas {
  gap: 0;
  border-block: 1px solid var(--chapter-line);
}

.cinematic-site .area {
  min-height: 0;
  padding: 26px clamp(26px, 4vw, 64px) 39px 0;
  border: 0;
}

.cinematic-site .area + .area {
  border-left: 1px solid var(--chapter-line);
  padding-inline: clamp(26px, 4vw, 64px) 0;
}

.cinematic-site .area-number {
  color: var(--chapter-muted);
  font: 500 10px/1.45 var(--chapter-mono);
  letter-spacing: .06em;
}

.cinematic-site .area h3 {
  font: 550 clamp(35px, 4.5vw, 70px)/1.02 var(--chapter-display);
  letter-spacing: -.068em;
  margin: 12px 0 15px;
}

.cinematic-site .area p {
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
}

.cinematic-site .area-foot {
  margin-top: 16px;
  font: 500 11px/1.6 var(--chapter-mono);
}

.cinematic-site .work {
  border-color: var(--chapter-line);
}

.cinematic-site .filters {
  gap: 8px;
  margin-bottom: 16px;
}

.cinematic-site .filter {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--chapter-line);
  border-radius: 999px;
  font: 600 12px/1.4 var(--chapter-display);
  color: var(--chapter-ink);
  transition: background .28s, color .28s, border-color .28s;
}

.cinematic-site .filter:hover {
  border-color: var(--chapter-ink);
}

.cinematic-site .filter[aria-pressed="true"] {
  background: var(--chapter-ink);
  border-color: var(--chapter-ink);
  color: var(--chapter-paper);
}

.cinematic-site .transactions {
  border-color: var(--chapter-ink);
}

.cinematic-site .transaction {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .75fr);
  gap: 5px clamp(20px, 4vw, 60px);
  padding: clamp(22px, 2.6vw, 39px) 0;
  border-color: var(--chapter-line);
  transition: background .28s;
}

.cinematic-site .transaction:focus-within {
  background: #ede2d3;
}

.cinematic-site .transaction :is(h3, .price) {
  margin: 0;
  font: 550 clamp(21px, 2.5vw, 37px)/1.14 var(--chapter-display);
  letter-spacing: -.055em;
}

.cinematic-site .transaction .price {
  font-variant-numeric: tabular-nums;
}

.cinematic-site .transaction :is(.status, .facts, .date) {
  font: 500 10px/1.5 var(--chapter-mono);
  letter-spacing: .015em;
}

.cinematic-site .transaction .status {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

.cinematic-site .transaction .status::before {
  display: block;
  background: #946b40;
}

.cinematic-site .transaction .city {
  font-size: 12px;
}

.cinematic-site .transaction .text-link {
  max-width: 220px;
  width: fit-content;
  margin: 0;
  font-size: 12px;
}

.cinematic-site .small-note {
  color: var(--chapter-muted);
  font: 500 11px/1.7 var(--chapter-mono);
}

/* The practical details stay light ahead of the closing contact section. */
.cinematic-site .section:has(.faq-layout) {
  padding-top: 0;
}

.cinematic-site .faq-layout {
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(30px, 7vw, 110px);
  padding-top: clamp(35px, 5.5vw, 88px);
  border-top: 1px solid var(--chapter-line);
}

.cinematic-site .faq-layout h2 {
  font-size: clamp(40px, 4.5vw, 68px);
  margin-top: 14px;
}

.cinematic-site .faq-list details {
  padding: 0;
  border-color: var(--chapter-line);
}

.cinematic-site .faq-list summary {
  min-height: 56px;
  align-items: center;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 650;
}

.cinematic-site .faq-list summary::after {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 50%;
  background: #e5dacb;
  color: var(--chapter-ink);
  font: 400 17px/1 var(--chapter-display);
}

.cinematic-site .faq-list details[open] summary::after {
  background: var(--chapter-ink);
  color: var(--chapter-paper);
}

.cinematic-site .faq-list details p {
  padding: 0 42px 17px 0;
  font-size: 14px;
  line-height: 1.65;
}

.cinematic-site #team {
  padding-bottom: var(--chapter-pad);
}

.cinematic-site #team .team-inner {
  max-width: none;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(25px, 7vw, 110px);
  padding: clamp(28px, 4vw, 58px) 0;
  border-color: var(--chapter-line);
}

.cinematic-site #team h2 {
  font-size: clamp(35px, 4.2vw, 64px);
}

.cinematic-site #team p {
  max-width: 55ch;
  font-size: 15px;
  line-height: 1.65;
}

.cinematic-site .team-points span {
  color: var(--chapter-muted);
  font: 500 10px/1.6 var(--chapter-mono);
}

/* Contact and legal information share the final dark surface. */
.cinematic-site .contact {
  padding: var(--chapter-pad) 0;
  background: var(--chapter-pine);
  color: var(--chapter-paper);
}

.cinematic-site .contact-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 110px);
}

.cinematic-site .contact h2 {
  text-wrap: balance;
  margin-top: 18px;
  font-size: clamp(42px, 5.4vw, 84px);
}

.cinematic-site .contact p {
  color: var(--chapter-soft);
  font-size: 14px;
  line-height: 1.65;
}

.cinematic-site .contact-links {
  gap: 8px;
  margin-top: 22px;
}

.cinematic-site .contact-links a {
  padding: 7px 0;
  border-color: var(--chapter-dark-line);
  font-size: 16px;
  font-weight: 600;
}

.cinematic-site .contact-links a:hover,
.cinematic-site .contact a.social-item:hover {
  color: var(--chapter-brass);
}

.cinematic-site .contact :is(.copy-email-row, .copy-email-row input, .copy-email-row button, .social-copy, .social-item, .contact-alt, .sms-consent, .draft-review) {
  border-color: var(--chapter-dark-line);
}

.cinematic-site .copy-email-row input {
  background: #263548;
  color: var(--chapter-paper);
}

.cinematic-site .contact :is(.copy-email-row button, .social-copy, .contact-alt) {
  color: var(--chapter-paper);
}

.cinematic-site .contact :is(.copy-email-row button, .social-copy, .contact-alt):hover {
  background: #2c3d52;
}

.cinematic-site .contact :is(.email-help, .social-profile-note, .wechat-qr figcaption, .form-intro) {
  font-size: 12px;
  color: var(--chapter-soft);
}

.cinematic-site .contact-card {
  min-width: 0;
  padding: clamp(20px, 3vw, 49px);
  border-color: var(--chapter-dark-line);
  background: #253449;
}

.cinematic-site .contact :is(h3, h4) {
  font: 550 clamp(24px, 2.8vw, 43px)/1.08 var(--chapter-display);
  letter-spacing: -.055em;
}

.cinematic-site .social-section h3 {
  font-size: 23px;
}

.cinematic-site .contact-card :is(.field input, .field select, .field textarea) {
  border: 1px solid var(--chapter-dark-line);
  background: var(--chapter-paper);
  color: var(--chapter-ink);
}

.cinematic-site .contact-card :is(.field input, .field select, .field textarea):focus-visible {
  outline-color: var(--chapter-brass);
}

.cinematic-site .contact-card .checkbox-label input {
  accent-color: var(--chapter-brass);
}

.cinematic-site .contact-card :is(form > p, .sms-consent p) {
  font-size: 11px;
}

.cinematic-site .contact-card .btn {
  padding-inline: 16px;
  background: var(--chapter-brass);
  border-color: var(--chapter-brass);
  color: var(--chapter-deep);
  font-weight: 700;
}

.cinematic-site .contact-card .btn:hover {
  background: #efd3a7;
  border-color: #efd3a7;
}

.cinematic-site .contact-card .secondary-action {
  background: transparent;
  color: var(--chapter-paper);
  border-color: var(--chapter-dark-line);
}

.cinematic-site .contact-card .secondary-action:hover {
  background: #2c3d52;
  border-color: var(--chapter-soft);
}

.cinematic-site .footer {
  padding: clamp(34px, 5.5vw, 74px) 0;
  background: var(--chapter-deep);
  color: var(--chapter-soft);
}

.cinematic-site .footer .brand-name {
  color: var(--chapter-paper);
  font: 600 clamp(36px, 6vw, 98px)/.95 var(--chapter-display);
  letter-spacing: -.08em;
  margin-bottom: 12px;
}

.cinematic-site .footer .brand-dot {
  color: var(--chapter-brass);
}

.cinematic-site .footer-brand {
  color: var(--chapter-paper);
  font: 650 clamp(15px, 2vw, 27px)/1.15 var(--chapter-display);
  letter-spacing: -.04em;
}

.cinematic-site .footer small,
.cinematic-site .footer :is(.legal, .legal p, details) {
  color: var(--chapter-soft);
  font: 500 10px/1.65 var(--chapter-mono);
  letter-spacing: 0;
}

.cinematic-site .footer-brand small {
  margin-top: 8px;
}

.cinematic-site .footer .legal {
  border-color: var(--chapter-dark-line);
}

.cinematic-site .footer a:hover,
.cinematic-site .footer summary:hover {
  color: var(--chapter-brass);
}

html[lang="zh-CN"] .cinematic-site :is(.living-story, .section, .team-section, .contact) h2 {
  font-size: clamp(34px, 4.7vw, 72px);
  line-height: 1.19;
  letter-spacing: -.035em;
}

html[lang="zh-CN"] .cinematic-site #about .about-copy h2 {
  max-width: none;
  font-size: clamp(34px, 4.3vw, 65px);
  line-height: 1.19;
}

html[lang="zh-CN"] .cinematic-site #team h2 {
  font-size: clamp(30px, 3.6vw, 53px);
}

@media (max-width: 780px) {
  .cinematic-site > main {
    --chapter-pad: clamp(61px, 12vw, 92px);
  }

  .cinematic-site .trust-strip {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    padding-block: 16px;
    gap: 10px 17px;
  }

  .cinematic-site .trust-strip span {
    font-size: 9px;
  }

  .cinematic-site .living-story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }

  .cinematic-site .living-header {
    display: block;
    padding: 0;
  }

  .cinematic-site .living-header h2 {
    margin: 13px 0 0;
    font-size: clamp(48px, 10.3vw, 74px);
  }

  .cinematic-site .living-main {
    margin-top: 0;
  }

  .cinematic-site .living-main img {
    aspect-ratio: 1.48;
  }

  .cinematic-site .living-detail {
    display: block;
  }

  .cinematic-site .living-detail figure {
    float: right;
    width: 43%;
    margin: 0 0 4px 17px;
  }

  .cinematic-site .living-detail img {
    aspect-ratio: .9;
  }

  .cinematic-site .living-detail p {
    margin-top: 0;
  }

  .cinematic-site .living-story figcaption,
  .cinematic-site .feature-note {
    font-size: 9px;
  }

  .cinematic-site #about .about {
    gap: 35px;
  }

  .cinematic-site .bio-side {
    max-width: none;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
  }

  .cinematic-site .bio-background {
    margin-top: 0;
  }

  .cinematic-site .bio-background > div {
    display: block;
    padding: 8px 0;
  }

  .cinematic-site .bio-background dt {
    margin-bottom: 3px;
  }

  .cinematic-site .bio-background dd {
    font-size: 11px;
  }

  .cinematic-site .service-layout > div + div {
    margin-top: 34px;
  }

  .cinematic-site .service-panel .step {
    grid-template-columns: 23px minmax(0, 1fr);
  }

  .cinematic-site .place-photo {
    height: clamp(280px, 66vw, 480px);
  }

  .cinematic-site .place-photo figcaption {
    inset-inline: 20px;
    font-size: 9px;
  }

  .cinematic-site .section-head {
    display: block;
    margin-bottom: 28px;
  }

  .cinematic-site .section-head p {
    margin-top: 17px;
  }

  .cinematic-site .area,
  .cinematic-site .area + .area {
    padding: 21px 0 24px;
  }

  .cinematic-site .area + .area {
    border-top: 1px solid var(--chapter-line);
    border-left: 0;
  }

  .cinematic-site .transaction {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 4px 13px;
  }

  .cinematic-site .transaction .price {
    text-align: right;
    font-size: clamp(18px, 4.7vw, 31px);
  }

  .cinematic-site .transaction .date {
    grid-row: 3;
  }

  .cinematic-site .transaction .facts {
    grid-row: 4;
    margin-top: 12px;
  }

  .cinematic-site .transaction .text-link {
    grid-row: 5;
  }

  .cinematic-site .faq-list {
    margin-top: 20px;
  }

  .cinematic-site .contact-card {
    margin-top: 36px;
  }

  .cinematic-site .footer-top {
    align-items: flex-start;
  }
}

@media (max-width: 370px) {
  .cinematic-site .living-detail figure {
    width: 39%;
  }

  .cinematic-site .transaction .status,
  .cinematic-site .transaction .date,
  .cinematic-site .transaction .facts {
    font-size: 9px;
  }

  .cinematic-site .footer-top {
    display: grid;
  }

  .cinematic-site .footer-brand {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-site .service-panel:not([hidden]) .step {
    animation: none;
  }

  .cinematic-site .place-photo img {
    transform: translate3d(0, -8%, 0);
  }
}