@media(min-width:1600px) {
  .hero {
    min-height:800px;
  }
}
@media(max-width:1100px) {
  .site-header nav {
    gap:18px;
  }
  .hero {
    min-height:650px;
    padding-top:55px;
  }
  h1 {
    font-size:clamp(62px,8vw,92px);
  }
  .hero-actions {
    gap:14px;
  }
  .hero-actions .button,.hero-actions .text-link {
    padding:15px 18px;
    font-size:12px;
  }
  .service {
    grid-template-columns:25% 28px minmax(0,1fr) 20% 40px;
    gap:16px;
  }
  .service h3 {
    font-size:25px;
  }
  .tags {
    font-size:8px;
    padding-left:15px;
  }
  .project-art {
    height:320px;
  }
  .project-art strong {
    font-size:30px;
  }
  .project-art small {
    font-size:7px;
  }
}
@media(max-width:800px) {
  .site-header {
    padding-block:20px;
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--white);
    padding:10px 14px;
    border-radius:4px;
    font-size:12px;
  }
  .site-header nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#07130e;
    padding:20px 6%;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .site-header nav.is-open {
    display:flex;
  }
  .site-header nav>a:not(.button),.site-header nav>a[aria-current] {
    padding:14px 0;
    border:0;
  }
  .site-header nav .button {
    align-self:start;
    margin-top:12px;
  }
  .hero {
    min-height:620px;
    padding-top:45px;
  }
  .hero-copy {
    width:75%;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:2px;
  }
  h1 {
    font-size:clamp(62px,10vw,80px);
    letter-spacing:-3px;
  }
  .hero-art {
    left:25%;
    opacity:.65;
  }
  .hero-sculpture {
    object-position:58% center;
    mask-image:linear-gradient(90deg,transparent,#000 50%);
  }
  .art-coordinate {
    display:none;
  }
  .hero-description {
    max-width:340px;
    font-size:14px;
  }
  .hero-bottom {
    gap:18px;
  }
  .hero-bottom>span {
    padding-right:18px;
    font-size:13px;
  }
  .hero-bottom>span>span {
    font-size:7px;
  }
  .discipline-strip {
    gap:20px;
    font-size:23px;
  }
  .section-heading {
    column-gap:35px;
    grid-template-columns:1.1fr 1fr;
  }
  .section-heading h2 {
    font-size:44px;
  }
  .section-heading>p:last-child {
    font-size:12px;
  }
  .service {
    grid-template-columns:25% 25px minmax(0,1fr) 40px;
    gap:15px;
  }
  .service-image {
    height:145px;
  }
  .service .tags {
    display:none;
  }
  .service h3 {
    font-size:25px;
  }
  .service p {
    font-size:12px;
  }
  .number {
    font-size:25px;
  }
  .project-grid {
    gap:16px;
  }
  .project-art {
    height:270px;
  }
  .menu-sheet,.landing-sheet,.enterprise-sheet {
    padding:16px;
  }
  .project-art strong,.enterprise-sheet strong {
    font-size:24px;
    margin-top:45px;
  }
  .project h3 {
    font-size:15px;
  }
  .about {
    gap:35px;
  }
  .about-copy h2 {
    font-size:36px;
  }
  .about-symbol {
    font-size:115px;
  }
  .footer-top {
    flex-wrap:wrap;
  }
}
@media(max-width:560px) {
  .wrap {
    width:calc(100% - 40px);
    margin-inline:auto;
  }
  .site-header {
    padding-inline:20px;
    gap:16px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding-top:30px;
    min-height:0;
  }
  .hero-copy {
    order:1;
    width:100%;
    padding-bottom:0;
  }
  .hero .eyebrow {
    font-size:7px;
    letter-spacing:2px;
    margin-bottom:26px;
  }
  h1 {
    font-size:clamp(40px,11.5vw,64px);
    line-height:1;
    letter-spacing:-2px;
    margin-bottom:25px;
  }
  .hero-description {
    font-size:14px;
    max-width:340px;
  }
  .hero-actions {
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
    gap:12px;
    margin-top:22px;
  }
  .hero-actions .button,.hero-actions .text-link {
    justify-content:space-between;
    min-height:48px;
    font-size:13px;
    padding:14px 18px;
  }
  .hero-art {
    position:relative;
    order:2;
    z-index:0;
    inset:auto;
    width:100%;
    max-width:100%;
    height:360px;
    margin:12px 0 0;
    opacity:1;
  }
  .hero-sculpture {
    object-position:68% center;
    mask-image:linear-gradient(180deg,transparent,#000 25%,#000 90%,transparent);
  }
  .orbital-line {
    width:350px;
    height:350px;
  }
  .line-a {
    right:-100px;
    top:120px;
  }
  .line-b {
    right:50px;
    top:0;
  }
  .art-caption {
    font-size:7px;
    right:8%;
    bottom:15%;
  }
  .hero-bottom {
    position:relative;
    order:3;
    bottom:auto;
    left:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
    padding:10px 0 25px;
  }
  .hero-bottom>span {
    background:#030c09bb;
    padding-right:12px;
    font-size:12px;
  }
  .hero-bottom>span>span {
    font-size:6px;
    letter-spacing:1px;
  }
  .discipline-strip {
    flex-wrap:wrap;
    gap:10px;
    font-size:15px;
    padding:20px 3%;
  }
  .discipline-strip b {
    font-size:12px;
  }
  .discipline-strip>span:last-child,.discipline-strip>b:last-of-type {
    display:none;
  }
  .section {
    padding-block:50px;
  }
  .section-heading {
    display:block;
    margin-bottom:28px;
  }
  .section-heading .eyebrow {
    font-size:8px;
    letter-spacing:2px;
  }
  .section-heading h2 {
    font-size:42px;
  }
  .section-heading>p:last-child {
    margin-top:18px;
    font-size:13px;
    max-width:none;
  }
  .service {
    grid-template-columns:30px minmax(0,1fr) 40px;
    gap:13px;
    padding:20px 0;
  }
  .service-image {
    grid-column:1/-1;
    height:165px;
  }
  .number {
    align-self:start;
    margin-top:1px;
  }
  .service h3 {
    font-size:26px;
  }
  .service p {
    font-size:12px;
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:35px;
  }
  .project-art {
    height:390px;
  }
  .menu-sheet,.landing-sheet,.enterprise-sheet {
    padding:26px;
  }
  .project-art strong,.enterprise-sheet strong {
    font-size:39px;
    margin-top:75px;
  }
  .project-art .landing-sheet strong {
    margin-top:65px;
  }
  .project-art small {
    font-size:9px;
  }
  .project h3 {
    font-size:19px;
  }
  .project-meta {
    margin-top:16px;
  }
  .about {
    display:block;
    padding-top:10px;
  }
  .about-symbol {
    display:none;
  }
  .about-copy h2 {
    font-size:35px;
  }
  .contact-section {
    padding-block:35px;
    min-height:560px;
  }
  .contact-section::before {
    height:560px;
    background-position:64% center;
    background-image:
      linear-gradient(180deg,transparent 60%,var(--ink) 100%),
      linear-gradient(90deg,#030c09ef,#030c0999),
      url('../assets/images/hero/emerald-portal.webp');
  }
  .contact-grid h2 {
    font-size:42px;
    letter-spacing:-1.7px;
  }
  .contact-grid>.reveal>p:not(.eyebrow) {
    font-size:13px;
  }
  .contact-details {
    margin-top:22px;
  }
  .contact-form {
    padding:5px 18px 18px;
  }
  .contact-form input,.contact-form select,.contact-form textarea {
    font-size:16px;
    min-width:0;
  }
  .hero-copy,.service-copy,.contact-details,.footer-bottom {
    overflow-wrap:anywhere;
  }
  .footer-top {
    display:block;
  }
  .footer-top p {
    margin:20px 0 10px;
    font-size:12px;
  }
  .site-footer nav {
    flex-wrap:wrap;
    font-size:12px;
    gap:18px;
  }
  .footer-bottom {
    flex-direction:column;
    font-size:10px;
    gap:10px;
  }
  .dialog-inner {
    padding:28px;
  }
  .dialog-inner h2 {
    font-size:28px;
  }
}
@media(scripting:none) {
  .menu-toggle {
    display:none;
  }
  .site-header {
    flex-wrap:wrap;
  }
  .site-header nav {
    display:flex;
    position:static;
    flex-wrap:wrap;
  }
}