@media(min-width:1600px) {
  .hero-layout {
    gap:6%;
    padding-block:90px;
  }
  .hero-frame {
    aspect-ratio:1.12;
  }
}
@media(max-width:1199px) {
  .hero-layout {
    gap:4%;
    padding-block:65px;
    min-height:660px;
  }
  .hero h1 {
    font-size:7.2vw;
  }
  .hero-eyebrow {
    font-size:10px;
    letter-spacing:.055em;
  }
  .hero-actions {
    gap:14px;
  }
  .hero-actions .button {
    font-size:12px;
    gap:14px;
  }
  .hero-frame {
    aspect-ratio:.93;
  }
  .piece-caption>span {
    display:none;
  }
  .services-layout {
    gap:7%;
  }
  .services-heading>p {
    max-width:230px;
  }
  .service-stage {
    top:130px;
  }
  .service {
    min-height:300px;
  }
  .contact-layout {
    gap:40px;
  }
  .footer-bottom>span:last-child {
    display:none;
  }
}
@media(min-width:768px) and (max-width:1023px) {
  .desktop-nav {
    margin:0;
    gap:24px;
  }
  .header-inner {
    gap:20px;
  }
  .hero-layout {
    min-height:660px;
  }
  .hero h1 {
    font-size:7.1vw;
  }
  .hero-description {
    font-size:13px;
  }
  .hero-actions {
    display:flex;
    flex-direction:column;
    align-items:start;
  }
  .hero-scene {
    padding-top:45px;
  }
  .scene-caption {
    flex-direction:column;
    gap:5px;
  }
  .service-stage-caption {
    flex-direction:column;
  }
  .services-heading {
    gap:30px;
  }
  .service summary {
    gap:10px;
    grid-template-columns:22px 1fr 18px;
  }
  .service-details {
    padding-left:32px;
  }
  .contact-action .button {
    font-size:12px;
    gap:14px;
  }
  .process-step {
    padding-right:25px;
  }
}
@media(max-width:767px) {
  :root {
    --gutter:24px;
  }
  .section {
    padding-block:80px;
  }
  .section-top {
    margin-bottom:35px;
  }
  .section-side-note {
    display:none;
  }
  .section h2 {
    font-size:clamp(35px,8.5vw,60px);
  }
  .eyebrow {
    font-size:12px;
  }
  .site-header {
    height:76px;
  }
  .brand {
    width:112px;
  }
  .brand-wordmark {
    font-size:29px;
  }
  .header-inner {
    gap:10px;
  }
  .desktop-nav {
    display:none;
  }
  .header-contact {
    font-size:12px;
    gap:8px;
    white-space:nowrap;
    margin-left:auto;
  }
  .header-contact svg {
    width:15px;
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    background:none;
    margin-right:-10px;
    flex:none;
  }
  .menu-toggle>span {
    width:21px;
    height:1px;
    background:var(--white);
  }
  .hero {
    padding-top:76px;
  }
  .hero-layout {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:38px;
    min-height:0;
    padding-block:43px 36px;
  }
  .hero-eyebrow {
    font-size:10px;
    margin-bottom:25px;
    letter-spacing:.06em;
  }
  .status-dot {
    width:5px;
    height:5px;
    margin-right:8px;
    flex:none;
  }
  .hero h1 {
    font-size:clamp(48px,13.1vw,94px);
    line-height:1.035;
  }
  .hero-description {
    font-size:13px;
    margin-top:24px;
    max-width:360px;
  }
  .hero-actions {
    gap:14px 25px;
    margin-top:24px;
  }
  .hero-actions .button {
    font-size:12px;
    gap:18px;
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:12px;
  }
  .hero-scene {
    padding:0;
    max-width:560px;
    width:100%;
    margin:auto;
  }
  .scene-heading {
    font-size:10px;
    margin-bottom:18px;
  }
  .hero-frame {
    aspect-ratio:1.32;
    padding:8px;
    gap:7px;
    transform:rotateY(-3deg) rotateZ(1deg);
  }
  .frame-piece-detail {
    margin-bottom:-9px;
    margin-right:-9px;
    border-top-width:7px;
    margin-top:45%;
  }
  .piece-caption {
    font-size:18px;
    padding:28px 12px 12px;
  }
  .frame-piece-detail .piece-caption {
    font-size:13px;
  }
  .scene-caption {
    margin-top:21px;
    font-size:10px;
    flex-direction:row;
  }
  .scene-caption>span:last-child {
    font-size:10px;
  }
  .hero-bottom {
    padding-block:14px;
    font-size:10px;
    gap:10px;
  }
  .hero-bottom>span {
    gap:9px;
  }
  .hero-bottom>a {
    font-size:0;
    gap:0;
  }
  .positioning {
    padding-block:75px 70px;
    gap:28px;
    grid-template-columns:1fr;
  }
  .positioning h2 {
    font-size:clamp(33px,8vw,57px);
  }
  .positioning-note {
    grid-column:1;
    font-size:12px;
  }
  .frame-thread {
    right:-10px;
  }
  .services-heading {
    display:block;
    margin-bottom:42px;
  }
  .services-heading>p {
    margin-top:24px;
    max-width:360px;
    font-size:13px;
  }
  .services-layout {
    display:flex;
    flex-direction:column;
    gap:32px;
  }
  .service-stage {
    position:relative;
    top:auto;
    width:100%;
  }
  .service-frame {
    aspect-ratio:1.6;
    margin-block:23px;
  }
  .service-stage-label {
    font-size:12px;
  }
  .service-stage-caption {
    font-size:12px;
  }
  .service-stage-caption>span:last-child {
    font-size:12px;
  }
  .service-progress {
    margin-top:24px;
  }
  .services-list {
    width:100%;
  }
  .service {
    min-height:0;
    padding-block:12px;
  }
  .service summary {
    grid-template-columns:20px 1fr 20px;
    gap:10px;
    padding-block:16px;
  }
  .service h3 {
    font-size:22px;
  }
  .service-short {
    font-size:12px;
    line-height:1.7;
    margin-top:9px;
  }
  .service-details {
    padding:5px 20px 24px 30px;
  }
  .service-details p {
    font-size:13px;
  }
  .service-label {
    font-size:12px;
  }
  .process-heading {
    display:block;
  }
  .process-heading>p {
    font-size:13px;
    margin-top:24px;
  }
  .process-steps {
    grid-template-columns:1fr;
    margin-top:42px;
    gap:34px;
  }
  .process-step {
    padding:0 0 0 40px;
  }
  .step-rail {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:22px;
    height:auto;
  }
  .step-number {
    font-size:12px;
  }
  .step-dot {
    top:34px;
    left:0;
  }
  .step-rail:before,.step-rail:after {
    top:36px;
    bottom:-34px;
    left:2px;
    right:auto;
    height:auto;
    width:1px;
  }
  .step-rail:after {
    transform:scaleY(var(--step-progress,1));
    transform-origin:top;
  }
  .process-step:last-child .step-rail:before,.process-step:last-child .step-rail:after {
    bottom:0;
  }
  .process-step h3 {
    font-size:30px;
    margin-bottom:16px;
  }
  .process-step>p {
    max-width:440px;
  }
  .manifesto {
    padding-block:80px;
  }
  .manifesto-layout {
    padding-left:0;
  }
  .manifesto-layout:before {
    width:18px;
    height:18px;
    left:auto;
    right:0;
    top:-24px;
    border-width:1px 1px 0 0;
    border-style:solid;
    border-color:var(--blue);
  }
  .manifesto .eyebrow {
    font-size:12px;
    margin-bottom:30px;
  }
  .manifesto h2 {
    font-size:clamp(31px,7.8vw,58px);
  }
  .manifesto-note {
    font-size:12px;
    margin-top:30px;
  }
  .contact .section-top {
    display:block;
  }
  .contact-phone {
    display:inline-block;
    margin-top:15px;
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:30px;
  }
  .contact h2 {
    font-size:clamp(42px,10.2vw,70px);
  }
  .contact-action {
    justify-self:start;
  }
  .contact-action>p {
    font-size:13px;
  }
  .footer {
    margin-top:65px;
  }
  .footer-wordmark {
    font-size:23vw;
    padding-bottom:18px;
  }
  .footer-top {
    flex-wrap:wrap;
    gap:12px 20px;
    padding-block:25px;
  }
  .footer-top>p {
    font-size:12px;
  }
  .footer-top>.text-link {
    width:100%;
    margin-left:0;
    font-size:12px;
  }
  .footer-bottom {
    flex-wrap:wrap;
    font-size:12px;
    gap:12px;
  }
  .footer-controls {
    gap:20px;
    flex-wrap:wrap;
  }
  .motion-toggle {
    font-size:12px;
  }
  .privacy p {
    left:0;
    max-width:calc(100vw - 48px);
  }
  .contact {
    padding-bottom:20px;
  }
}
@media(max-width:359px) {
  :root {
    --gutter:18px;
  }
  .header-contact {
    font-size:12px;
    gap:8px;
  }
  .header-inner {
    gap:10px;
  }
  .hero-eyebrow {
    font-size:10px;
  }
  .hero h1 {
    font-size:13.8vw;
  }
  .hero-actions {
    gap:10px;
  }
  .hero-actions .button {
    font-size:11px;
    padding-left:15px;
    gap:10px;
  }
  .scene-caption {
    flex-wrap:wrap;
  }
  .service h3 {
    font-size:20px;
  }
}
@media(min-width:768px) and (max-height:700px) {
  .service-stage {
    top:110px;
  }
  .service-frame {
    max-height:300px;
    aspect-ratio:1.7;
  }
  .service-stage-label {
    font-size:12px;
  }
  .service {
    min-height:270px;
  }
}
/* Keep the complete opening composition within short laptop viewports. */
@media(min-width:768px) {
  .hero-layout {
    padding-block:clamp(35px,6vh,65px) 50px;
  }
  .hero-frame {
    height:clamp(300px,calc(100svh - 360px),580px);
    aspect-ratio:auto;
    grid-template-rows:minmax(0,1fr);
  }
  .frame-piece {
    min-height:0;
  }
  .scene-caption {
    margin-top:24px;
  }
}