/* Readability, accessible comparison modes, and motion controls. */
.compare-controls{display:flex;gap:7px;margin-bottom:15px}
.compare-mode{font-size:12px;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:30px;color:#5c6a52}
.compare-mode[aria-pressed=true]{background:var(--olive);border-color:var(--olive);color:#fff}
.compare.side-by-side{aspect-ratio:1.24;background:#e5e7de;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
.compare.side-by-side .compare-after{position:static;width:100%;height:100%;grid-column:2;object-fit:cover}
.compare.side-by-side .compare-before{position:absolute;width:calc(50% - 4px);height:100%;clip-path:none;overflow:hidden}
.compare.side-by-side .compare-before img{object-fit:cover}
.compare.side-by-side .compare-line,.compare.side-by-side .compare-input{display:none}
.compare.side-by-side .compare-label{font-size:8px;padding:4px 9px;top:13px}
.compare.side-by-side .before-label{left:12px}
.compare.side-by-side .after-label{right:12px}
#comparison-help{font-size:11px;color:#65705d;line-height:1.8;margin-top:14px}
.hero-description,.intro-body>p{font-size:15px}
.section-aside,.difference-list p,.process-step p,.faq-list p{font-size:14px}
.form-note{font-size:10px;color:#5e6952}
.footer-bottom{color:#59654e}
.portfolio-bottom{font-size:12px;color:#5d6953}
.image-number,.gallery-counter{font-variant-numeric:tabular-nums}
.marquee-section:hover .marquee-track{animation-play-state:paused}
@media(max-width:900px){.hero-description,.intro-body>p{font-size:14px}.section-aside,.difference-list p,.process-step p,.faq-list p{font-size:13px}.compare-mode{font-size:11px}}
@media(max-width:640px){
  .hero-description{font-size:14px;line-height:1.85}
  .hero-actions .button,.hero-actions .text-link{font-size:12px}
  .hero-actions{gap:18px}
  .hero-foot>span{font-size:10px}
  .intro-body>p{font-size:14px}
  .intro-values p{font-size:11px}
  .section-aside{font-size:13px}
  .filter{font-size:11px;min-height:44px;padding-inline:12px}
  .project-meta{font-size:11px}
  .project-card .project-subtitle{font-size:12px}
  .project-card h3{font-size:20px}
  .portfolio-bottom{font-size:11px;align-items:flex-start}
  .portfolio-bottom .text-link{font-size:12px;white-space:nowrap}
  .portfolio-track.expanded .project-meta{font-size:10px}
  .portfolio-track.expanded .project-subtitle{font-size:11px}
  .portfolio-track.expanded .project-card h3{font-size:16px}
  .transformation-copy>p:not(.eyebrow){font-size:14px}
  .transformation-copy>p.comparison-note{font-size:11px}
  .comparison-project p{font-size:12px}
  .comparison-visual{width:100%}
  .compare.side-by-side{aspect-ratio:1.2}
  .compare-mode{font-size:12px}
  #comparison-help{font-size:11px}
  .difference-list p,.process-step p,.faq-list p{font-size:14px}
  .difference-list .text-link{font-size:12px}
  .journal-date,.journal-tag{font-size:11px}
  .journal-row p{font-size:12px}
  .faq-title>p:not(.eyebrow),.contact-heading>p:last-child{font-size:14px}
  .faq-list summary{font-size:15px;min-height:34px}
  .faq-title .text-link{font-size:12px}
  .naver-talk>div span,.contact-scope span{font-size:12px}
  .contact-scope{font-size:14px}
  form label,form legend{font-size:12px}
  input:not([type=range]):not([type=radio]),textarea{font-size:16px}
  input::placeholder,textarea::placeholder{font-size:13px}
  .form-grid{grid-template-columns:1fr;gap:18px}
  .choice-list span{min-height:44px;font-size:12px;padding:10px 14px}
  .copy-message{font-size:12px;min-height:44px}
  .form-note{font-size:11px;line-height:1.75}
  .footer-bottom{font-size:11px}
  .footer-bottom>div{font-size:11px;gap:13px}
  .footer-bottom button{font-size:11px;min-height:40px}
  .footer-bottom>div a{min-height:40px;display:flex;align-items:center}
  .project-dialog-copy>p:not(.eyebrow){font-size:14px}
  .project-dialog-copy>p.project-authentic{font-size:11px}
  .project-tags span{font-size:12px}
  .project-dialog-copy>.text-link{font-size:12px}
  .gallery-arrow,.dialog-top .circle-button{width:44px;height:44px}
  .privacy-dialog p:not(.eyebrow){font-size:14px}
  .mobile-contact-bar a{font-size:14px}
}
@media(max-width:360px){.hero-actions{gap:13px}.hero-actions .button{font-size:11px;padding-inline:13px}.hero-actions .text-link{font-size:11px}.filter{font-size:10px;padding-inline:10px}.portfolio-bottom{flex-wrap:wrap;gap:4px}.phone-number{font-size:31px}.compare-mode{font-size:11px}}