:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.hero { isolation:isolate; padding:30px 3.1vw 50px; }
.hero-media { position:absolute; inset:-2%; z-index:-2; overflow:hidden; transform:scale(1.04); }
.hero-image,.hero-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-image { z-index:0; }
.hero-film { z-index:1; opacity:0; transition:opacity 1.5s var(--motion-ease); }
.hero-film.is-playing { opacity:1; }
.hero:before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.2); pointer-events:none; }
.header nav { gap:30px; padding:6px 7px 6px 26px; background:rgba(39,36,30,.3); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid #ffffff16; border-radius:100px; }
.header .pill { padding:14px 24px; }
.header .wordmark { font-size:clamp(22px,2.15vw,34px); }
.brand-logo { display:block; flex:0 0 auto; width:220px; line-height:0; }
.brand-logo img { width:100%; height:auto; }
.footer .brand-logo { width:200px; }
.footer .brand-logo img { filter:brightness(0); }
@media(max-width:760px) { .header .brand-logo { width:160px; } .header nav { top:calc(100% + 14px); } .footer .brand-logo { width:180px; } }
.hero-center { top:34%; animation:none; }
.hero h1 { font-size:clamp(58px,7.3vw,116px); line-height:1; margin-bottom:28px; }
.hero-line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.03em; }
.hero-line-inner { display:inline-block; }
.hero-center > .pill { font-size:20px; padding:19px 36px; gap:14px; }
.hero-utilities { display:flex; align-items:flex-end; gap:42px; }
.motion-toggle { display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; border:1px solid #ffffff80; background:#ffffff06; color:white; transition:background .4s,border-color .4s; flex-shrink:0; }
.motion-toggle:hover { background:#ffffff20; border-color:white; }
.motion-toggle .icon { width:20px; height:20px; stroke-width:2; }
.concept-note { bottom:44px; pointer-events:none; }
.motion-enabled [data-reveal]:not(.is-visible) { opacity:0; transform:translate3d(0,28px,0); filter:blur(5px); }
.project-photo { overflow:hidden; }
.project-photo > img { transform:translate3d(0,var(--media-y,0px),0) scale(1.07); transition:transform 1.2s var(--motion-ease); }
.project-open:hover .project-photo > img { transform:translate3d(0,var(--media-y,0px),0) scale(1.115); }
.photo-cta { transition:opacity .5s,transform .6s var(--motion-ease); }
.filter { transition:background .4s,color .4s,border-color .4s; }
.services { padding-top:90px; padding-bottom:90px; grid-template-columns:minmax(0,1.56fr) minmax(0,1fr); gap:4vw; }
.comparison-study { width:100%; min-width:0; margin:0; }
.comparison { width:100%; min-width:0; min-height:0; aspect-ratio:1.1; }
.comparison-caption { display:flex; justify-content:space-between; gap:16px; font-size:14px; line-height:1.5; color:#e4e6dc; padding-top:14px; }
.comparison-line > span { transition:box-shadow .4s,transform .4s var(--motion-ease); }
.comparison:hover .comparison-line > span { box-shadow:0 4px 24px #0003; transform:translate(-50%,-50%) scale(1.08); }
.services h2 { font-size:clamp(40px,4.3vw,68px); }
.services h2 em { font-size:1.16em; }
.service-description { overflow:hidden; display:flow-root; }
.plus:after { transition:transform .5s var(--motion-ease); }
.text-link .icon { transition:transform .55s var(--motion-ease); }
.team img { transition:filter .8s; }
.team figure:hover img { filter:contrast(1.035); }
dialog[open] { animation:dialog-enter .5s var(--motion-ease) both; }
dialog[open]::backdrop { animation:backdrop-enter .6s ease both; }
@keyframes dialog-enter { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }
@keyframes menu-enter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media(max-width:1100px) {
  .header nav { gap:22px; padding-left:22px; }
  .services { gap:40px; }
  .services h2 { font-size:50px; }
  .comparison { min-height:0; }
  .service-toggle { font-size:26px; }
}
@media(max-width:900px) {
  .services { grid-template-columns:minmax(0,1fr); gap:44px; }
  .comparison-study { grid-row:2; }
  .comparison { aspect-ratio:1.786; }
  .services .text-link { margin-top:0; padding-top:35px; }
}
@media(max-width:760px) {
  .hero { padding:25px 24px 54px; }
  .hero-media { inset:-2%; }
  .hero-image,.hero-film { object-position:52% center; }
  .hero-center { top:32%; }
  .hero h1 { font-size:clamp(44px,12.3vw,78px); line-height:1.12; margin-bottom:30px; }
  .header .wordmark { font-size:22px; }
  .hero-center > .pill { padding:16px 26px; font-size:16px; }
  .header nav { padding:16px; gap:2px; border-radius:16px; background:#263026ed; }
  .header nav.open { animation:menu-enter .45s var(--motion-ease); }
  .header .pill { padding:14px 23px; }
  .hero-bottom { gap:16px; font-size:13px; }
  .hero-bottom > p { padding-right:0; }
  .hero-utilities { gap:16px; }
  .motion-toggle { width:38px; height:38px; }
  .motion-toggle .icon { width:16px; height:16px; }
  .scroll-link { font-size:10px; gap:8px; }
  .scroll-link .icon { width:23px; height:23px; }
  .concept-note { bottom:18px; }
  .services { padding-top:56px; padding-bottom:56px; gap:36px; }
  .services h2 { font-size:44px; }
  .comparison { aspect-ratio:1.15; }
  .comparison-caption { font-size:11px; gap:10px; padding-top:12px; }
  .comparison-line > span { width:44px; height:44px; }
  .service-toggle { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-media { transform:none!important; }
  .hero-center { opacity:1!important; transform:none!important; }
  [data-reveal] { opacity:1!important; transform:none!important; filter:none!important; }
  .hero-film { transition:none; }
  .project-photo > img,.project-open:hover .project-photo > img { transform:none; }
  dialog[open],dialog[open]::backdrop { animation:none; }
}