@media(max-width:1100px) {
  :root {
    --u:1px;
    --header-height:80px
  }
  html {
    scroll-padding-top:20px
  }
  .site-header {
    height:80px
  }
  .header-logo {
    width:225px;
    height:80px;
    border-radius:0 0 12px 0
  }
  .header-logo img {
    width:185px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    width:48px;
    height:48px;
    margin-right:20px;
    border-radius:50%;
    background:#fff
  }
  .menu-toggle span {
    height:2px;
    width:20px;
    background:#333;
    margin-inline:auto;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-4.5px) rotate(-45deg)
  }
  .site-header nav {
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:90px;
    flex-direction:column;
    gap:0;
    padding:18px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 15px 45px #0002;
    font-size:16px;
    align-items:stretch
  }
  .site-header nav.is-open {
    display:flex
  }
  .site-header nav a,.site-header nav button {
    padding:13px 15px
  }
  .recruit-link {
    font-size:15px;
    background:#f7e9ee
  }
  .section {
    height:auto;
    min-height:0
  }
  .section-art {
    display:none
  }
  .mobile-only,.mobile-photo {
    display:block
  }
  .desktop-only {
    display:none
  }
  .section-heading {
    font-size:clamp(28px,5vw,40px);
    line-height:1.15
  }
  .section-heading small {
    font-size:14px;
    margin-top:10px
  }
  .highlight {
    font-size:16px;
    line-height:1.8;
    padding:8px 13px;
    max-width:100%;
    text-align:center;
    border-radius:5px
  }
  .body-copy {
    font-size:14px;
    line-height:2
  }
  .body-copy br {
    display:none
  }
  .more-link {
    font-size:14px;
    gap:10px;
    min-height:44px
  }
  .arrow {
    width:44px;
    height:44px;
    font-size:20px
  }
  .hero {
    padding:150px 6% 100px;
    background-image:url('../images/hero-gradient.webp');
    background-size:cover;
    overflow:hidden
  }
  .hero-copy {
    padding:0;
    position:relative;
    z-index:1
  }
  .hero h1 {
    font-size:clamp(36px,6vw,56px);
    line-height:1.5
  }
  .hero-copy p {
    font-size:10px;
    letter-spacing:-.03em;
    margin:24px 0 0
  }
  .hero-photo {
    margin:36px 0 0 auto;
    width:90%;
    border-radius:12px
  }
  .hero::after {
    content:'';
    position:absolute;
    left:-15%;
    right:-15%;
    bottom:135px;
    height:100px;
    border-bottom:25px solid #ffc5bc;
    border-radius:50%;
    transform:rotate(-12deg);
    pointer-events:none
  }
  .hero-actions {
    position:relative;
    top:auto;
    right:auto;
    height:auto;
    width:100%;
    border-radius:8px;
    margin-top:32px;
    z-index:2
  }
  .hero-actions a {
    min-height:65px;
    font-size:12px;
    gap:8px;
    flex-wrap:wrap;
    padding:15px 6px
  }
  .hero-actions [lang] {
    font-size:16px
  }
  .hero-actions a span:last-child {
    margin-left:0
  }
  .about {
    padding:75px 7% 110px;
    background:linear-gradient(#dedede,#f4f4f4);
    color:#444
  }
  .about-copy {
    padding:0;
    margin:0;
    width:100%
  }
  .about .section-heading {
    font-size:40px
  }
  .about .section-heading small {
    font-size:16px
  }
  .about h3 {
    font-size:clamp(20px,4vw,28px);
    margin-top:38px;
    text-align:left;
    white-space:normal
  }
  .about-copy>p {
    font-size:14px;
    line-height:2.2;
    margin-top:28px
  }
  .about-copy>p br {
    display:none
  }
  .about .more-link {
    margin:28px 0 0
  }
  .about-connect {
    display:none
  }
  .about-mobile-images {
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:18px;
    margin-top:40px;
    align-items:center
  }
  .about-mobile-images img {
    border-radius:10px;
    aspect-ratio:1;
    object-fit:cover
  }
  .about-draft {
    top:auto;
    bottom:300px;
    left:9%;
    font-size:11px
  }

}