.case-row video{display:block;width:100%;height:auto;border-radius:8px}.case-description>p:first-child{margin-top:0}.case-description>p:last-child{margin-bottom:0}
/* The Contact page scrolls with the same outer viewport as project cases. */
@media (min-width:901px) and (max-width:1199px) and (min-height:501px),
       (min-width:901px) and (max-width:1199px) and (pointer:fine){
  #main.contact-main{overflow-x:hidden!important;overflow-y:auto!important}
  #main.contact-main>.contact-surface{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-content:stretch;
    gap:48px;
    margin:var(--margin) 0;
    min-height:calc(100vh - (2 * var(--margin)));
    overflow:visible;
    padding:32px 16px;
  }
  .contact-main .contact-info{
    width:100%;
    max-width:600px;
    margin:0 auto;
    padding:0;
  }
  .contact-main .contact-info h1{font-size:clamp(32px,4.5vw,48px)}
  .contact-main .contact-description{font-size:18px}
  .contact-main .contact-direct{margin-top:32px}
  .contact-main .form-scroll{
    width:100%;
    max-width:600px;
    height:auto;
    margin:0 auto;
    padding:0;
    overflow:visible;
  }
  .contact-main #contact-form{
    width:100%;
    min-height:0;
    padding:40px clamp(24px,5vw,56px);
  }
}

/* Phones and tablets use normal document flow, so expanding an accordion
   never creates a nested scroll area that traps touch scrolling. */
@media (max-width:900px),
       (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
  #main.about-main{position:relative;inset:auto;overflow:visible!important}
  .about-surface{
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    min-height:calc(100dvh - var(--mobile-menu-height,104.878px) - 16px);
    overflow:visible;
    background:var(--green);
  }
  .about-surface .accordion-scroll{
    position:relative;
    inset:auto;
    order:1;
    flex:none;
    margin:0;
    padding:0;
    overflow:visible;
    z-index:2;
  }
  .about-surface>.mobile-footer{
    display:flex;
    order:2;
    flex:none;
    position:relative;
    inset:auto;
    margin: auto 0 24px;
    padding:0;
    z-index:4;
    transform:none;
  }
  .about-surface>.metal-link{
    display:block;
    order:3;
    position:relative;
    inset:auto;
    width:calc(100% + (2 * var(--margin)));
    height:clamp(75px,19.5vw,150px);
    margin:0 0 0 calc(-1 * var(--margin));
    background:transparent;
    overflow:hidden;
    z-index:3;
  }
  .about-surface .metal-link .metal-clip{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    overflow:hidden;
    container-type:inline-size;
    background:transparent;
  }
}

/* Landscape tablets keep the desktop sidebar, but About still scrolls as one
   surface with its information row directly above the cropped wordmark. */
@media (min-width:901px) and (max-width:1200px) and (pointer:coarse){
  #main.about-main{overflow-x:hidden!important;overflow-y:auto!important}
  #main.about-main>.about-surface{
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    min-height:calc(100dvh - (2 * var(--margin)));
    margin:var(--margin) 0;
    overflow:visible;
    background:var(--green);
  }
  .about-surface .accordion-scroll{
    position:relative;
    inset:auto;
    order:1;
    flex:none;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .about-surface>.mobile-footer{
    display:flex;
    order:2;
    flex:none;
    position:relative;
    inset:auto;
    margin:auto 0 24px;
    padding:0;
    transform:none;
  }
  .about-surface>.metal-link{
    display:block;
    order:3;
    position:relative;
    inset:auto;
    width:calc(100% + (2 * var(--margin)));
    height:clamp(75px,19.5vw,150px);
    margin:0 0 0 calc(-1 * var(--margin));
    overflow:hidden;
    background:transparent;
  }
  .about-surface .metal-link .metal-clip{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    overflow:hidden;
    container-type:inline-size;
    background:transparent;
  }
}

/* Keep the WebGL wordmark as an enhancement. The black SVG appears at once
   and remains if the browser cannot create a WebGL context. Both use one crop. */
.about-surface .metal-link .metal-clip .metal-fallback,
.about-surface .metal-link .metal-clip iframe{
  position:absolute;
  left:50%;
  top:0;
  width:180cqw;
  min-width:0;
  max-width:none;
  height:41.51cqw;
  aspect-ratio:1323 / 305.1;
  transform:translateX(-50%);
}
.about-surface .metal-link .metal-clip .metal-fallback{
  display:block;
  z-index:1;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s;
}
.about-surface .metal-link .metal-clip iframe{
  display:block;
  border:0;
  opacity:0;
  z-index:2;
  transition:opacity .25s ease;
}
.about-surface .metal-link .metal-clip.is-ready iframe{
  opacity:1;
}
.about-surface .metal-link .metal-clip.is-ready .metal-fallback{
  opacity:0;
  visibility:hidden;
}
.about-surface .metal-link,
.about-surface .metal-link .metal-clip{background:transparent}

@media (min-width:901px) and (min-height:501px),
       (min-width:1201px),
       (min-width:901px) and (pointer:fine){
  .about-surface>.metal-link{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    width:auto;
    height:200px;
    margin:0;
    overflow:hidden;
  }
  .about-surface .metal-link .metal-clip{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    container-type:inline-size;
  }
}