/* Full viewport cinematic opening. The header floats above the film. */
.hero-sticky{height:100vh;height:100dvh;min-height:0;width:100%;background-color:#222322}
.hero-track{min-height:0;height:240vh}
.hero-sticky video{object-fit:cover;object-position:center}
.hero-content{top:50%;transform:translateY(-39%)}
.hero-content h1{font-size:clamp(4rem,7.6vw,8.5rem)}
.hero-shade{background:linear-gradient(90deg,rgba(15,20,24,.04),rgba(15,20,24,.28) 40%,rgba(15,20,24,.82)),linear-gradient(0deg,rgba(15,20,24,.78),transparent 28%,rgba(15,20,24,.18))}
.hero-bottom{padding-bottom:env(safe-area-inset-bottom)}
.hero-content .button{margin-bottom:25px}
.contact input,.contact textarea{scroll-margin-block:110px}
.button:disabled{cursor:wait;opacity:.65}
body:has(dialog[open]){overflow:hidden}
.a11y-dialog{overscroll-behavior:contain}
.header .brand img{width:185px;height:82px;object-fit:contain}
@media(max-width:700px){
 .hero-track{height:210vh}
 .hero-content{top:48%;transform:translateY(-32%);right:25px;left:25px}
 .hero-content h1{font-size:clamp(2.8rem,12vw,4.8rem)}
 .hero-shade{background:linear-gradient(90deg,rgba(15,20,24,.22),rgba(15,20,24,.72)),linear-gradient(0deg,rgba(15,20,24,.8),transparent 35%,rgba(15,20,24,.3))}
 .hero-sticky video{object-position:54% center}
 .header .brand img{width:145px;height:65px}
 .header{padding-block:14px}
 .hero-bottom{bottom:20px;inset-inline:25px}
 .hero-content .button{margin-bottom:16px}
}
@media(max-height:600px) and (min-width:701px){
 .header{padding-block:15px}
 .hero-content{top:48%;transform:translateY(-36%)}
 .hero-content h1{font-size:clamp(2.5rem,11vh,5rem)}
 .hero-intro{margin-bottom:12px}
 .hero-sub{margin-block:16px}
 .hero-bottom{bottom:15px}
}
@media(max-height:550px) and (max-width:700px){
 .hero-content h1{font-size:clamp(2rem,10vh,3rem)}
 .hero-content{top:49%;transform:translateY(-32%)}
 .hero-intro{display:none}
 .hero-sub{margin:14px 0;font-size:14px;max-width:none}
 .hero-bottom>a{display:none}
 .hero-bottom{justify-content:flex-end;bottom:10px}
 .hero-content .button{padding:8px 20px;min-height:44px}
}
.a11y-motion .hero-track{height:100vh;height:100dvh;min-height:0}
@media(prefers-reduced-motion:reduce){.hero-track{height:100vh;height:100dvh;min-height:0}}
.brand img,.footer-logo{filter:none;mix-blend-mode:normal;object-fit:contain}
/* Keep the English signature in the heading column's document flow. */
.about{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.about .section-heading{min-width:0}
.about .about-signature{position:static;inset:auto;transform:none;margin-top:clamp(40px,4vw,70px);font-size:clamp(2.25rem,4vw,4rem);line-height:1.18;text-align:left;max-width:100%;overflow-wrap:break-word}
@media(max-width:700px){.about{grid-template-columns:minmax(0,1fr)}}


/* Mobile cards follow native scrolling and overlap with a small visible edge. */
@media (max-width: 700px) {
  .expertise-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .expertise-grid article {
    min-height: 0;
    min-block-size: clamp(245px, 64svh, 540px);
    background: #222322;
  }

  .expertise-grid article > div {
    inset-inline: 22px;
    bottom: 26px;
  }

  .expertise-grid h3 { font-size: 24px; }
  .expertise-grid p { font-size: 14px; }
}

@media (max-width: 700px) and (min-height: 420px) and (prefers-reduced-motion: no-preference) {
  body:not(.a11y-motion) .expertise-grid {
    --card-inset: max(22px, env(safe-area-inset-top));
    --card-edge: 12px;
    padding-block-end: clamp(40px, 11svh, 96px);
    isolation: isolate;
  }

  body:not(.a11y-motion) .expertise-grid article {
    position: sticky;
    inset-block-start: calc(var(--card-inset) + var(--card-offset, 0px));
    box-shadow: 0 -8px 26px #0004;
  }

  .expertise-grid article:nth-child(2) { --card-offset: var(--card-edge); }
  .expertise-grid article:nth-child(3) { --card-offset: calc(2 * var(--card-edge)); }
  .expertise-grid article:nth-child(4) { --card-offset: calc(3 * var(--card-edge)); }
}