@media(min-width:1500px) {
  .hero-main {
    min-height:700px;
  }
  .hero h1 {
    font-size:4.8rem;
  }
}

@media(max-width:1199px) {
  .container {
    width:calc(100% - 64px);
  }
  .main-nav {
    gap:22px;
  }
  .hero-main {
    min-height:610px;
    grid-template-columns:1fr 1fr;
    gap:15px;
  }
  .hero h1 {
    font-size:4rem;
  }
  .hero-visual {
    transform-origin:left center;
    margin-right:-25px;
  }
  .hero-visual>.dashboard {
    width:465px;
    left:0;
    top:72px;
  }
  .float-code {
    right:0;
    top:24px;
  }
  .float-mobile {
    right:0;
    bottom:34px;
  }
  .hero-visual .orbit {
    width:440px;
    height:440px;
    top:14px;
  }
  .float-status {
    left:-10px;
    bottom:28px;
  }
  .visual-caption {
    right:20px;
    bottom:0;
  }
  .services-grid {
    gap:14px;
  }
  .service-card {
    padding:23px 20px;
  }
  .service-card h3 {
    font-size:.92rem;
  }
  .service-card p {
    font-size:0.875rem;
  }
  .card-arrow {
    right:17px;
    top:25px;
  }
  .why-layout {
    gap:45px;
  }
  .section {
    padding-block:80px;
  }
  .project-art .dashboard {
    width:340px;
  }
  .mobile-art-copy {
    left:25px;
    width:110px;
  }
  .mobile-art-copy strong {
    font-size:25px;
  }
  .phone-mockup {
    transform:rotate(8deg) translate(45px,41px);
  }
  .footer-main {
    gap:28px;
  }
  .contact-layout {
    gap:45px;
  }
  .case-card .project-art>.dashboard {
    width:350px;
  }
  .case-card .mobile-art-copy strong {
    font-size:26px;
  }
  .case-card .mobile-art-copy {
    left:25px;
  }
  .case-card .project-content {
    padding:30px;
  }
  .about-intro {
    gap:50px;
  }
}

@media(max-width:991px) {
  :root {
    --header-height:78px;
  }
  .container {
    width:calc(100% - 48px);
  }
  .header-inner {
    gap:20px;
  }
  .main-nav {
    gap:18px;
  }
  .nav-link {
    font-size:.74rem;
  }
  .nav-cta {
    font-size:.7rem;
    padding:10px 13px;
    margin-left:0;
  }
  .brand-word {
    font-size:1.23rem;
  }
  .brand img {
    width:30px;
    height:30px;
  }
  .hero-main {
    min-height:555px;
    gap:10px;
    grid-template-columns:1.05fr 1fr;
  }
  .hero h1 {
    font-size:3.3rem;
  }
  .hero-copy .eyebrow {
    font-size:0.75rem;
    letter-spacing:.09em;
  }
  .hero-description {
    font-size:.86rem;
    max-width:350px;
  }
  .hero .button {
    font-size:.76rem;
    padding:12px 16px;
    gap:var(--space);
  }
  .hero-note {
    font-size:0.75rem;
  }
  .hero-visual {
    height:390px;
  }
  .hero-visual>.dashboard {
    width:385px;
    top:65px;
    left:0;
  }
  .hero-visual .dashboard-body {
    grid-template-columns:79px 1fr;
    min-height:270px;
  }
  .hero-visual .dash-main {
    padding:17px 11px;
  }
  .hero-visual .dash-sidebar {
    padding:17px 6px;
  }
  .hero-visual .dash-brand {
    font-size:12px;
  }
  .hero-visual .dash-nav {
    font-size:7px;
    padding:6px;
    gap:5px;
  }
  .hero-visual .dash-stat {
    padding:7px;
  }
  .hero-visual .dash-stat strong {
    font-size:11px;
  }
  .hero-visual .bars {
    height:64px;
    gap:10px;
  }
  .hero-visual .orbit {
    width:340px;
    height:340px;
    top:32px;
  }
  .float-code {
    right:-17px;
    top:22px;
    padding:10px 13px;
    width:166px;
    font-size:9px;
  }
  .float-status {
    left:-10px;
    bottom:-3px;
    padding:11px 13px;
    gap:9px;
  }
  .float-status strong {
    font-size:9px;
  }
  .float-status small {
    font-size:8px;
  }
  .float-mobile {
    right:-13px;
    bottom:9px;
    padding:var(--space);
    gap:4px;
  }
  .float-mobile strong {
    font-size:8px;
  }
  .float-mobile small {
    font-size:7px;
  }
  .visual-caption {
    bottom:-30px;
    right:0;
    font-size:8px;
  }
  .capabilities-bar {
    gap:10px;
    padding-block:22px;
  }
  .capability {
    font-size:.65rem;
    gap:var(--space);
  }
  .capability strong {
    font-size:.7rem;
  }
  .capability .icon {
    width:18px;
    height:18px;
  }
  .services-grid {
    grid-template-columns:repeat(2,1fr);
    gap:19px;
  }
  .service-card {
    min-height:213px;
    padding:25px;
  }
  .service-card h3 {
    font-size:1.04rem;
  }
  .service-card p {
    font-size:0.875rem;
  }
  .section-heading {
    gap:35px;
  }
  .section-heading h2 {
    font-size:2.35rem;
  }
  .section-heading p {
    font-size:.9rem;
  }
  .project-art {
    height:240px;
  }
  .project-art .dashboard {
    width:310px;
    transform:translate(17px,50px) rotate(-5deg);
  }
  .mobile-art-copy {
    left:20px;
    top:75px;
  }
  .mobile-art-copy strong {
    font-size:22px;
  }
  .mobile-art-copy p {
    width:95px;
    font-size:8px;
  }
  .phone-mockup {
    width:140px;
    transform:rotate(8deg) translate(46px,54px);
    padding-inline:7px;
  }
  .project-content {
    padding:25px;
  }
  .project-content>p {
    font-size:1rem;
  }
  .custom-project {
    padding:var(--space-3);
    gap:20px;
  }
  .custom-project-main {
    gap:var(--space-2);
  }
  .custom-project .text-link {
    font-size:.72rem;
  }
  .process-grid {
    gap:20px;
  }
  .process-step p {
    font-size:0.875rem;
  }
  .process-step h3 {
    font-size:.88rem;
  }
  .why-layout {
    grid-template-columns:1fr;
    gap:45px;
  }
  .why-copy h2 {
    max-width:570px;
  }
  .why-copy>p {
    max-width:630px;
  }
  .benefits-grid {
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .cta-panel {
    padding:46px;
  }
  .cta-panel h2 {
    font-size:1.8rem;
  }
  .cta-panel p {
    font-size:1rem;
  }
  .cta-panel .button {
    font-size:.79rem;
    padding:13px 17px;
    white-space:nowrap;
  }
  .footer-main {
    grid-template-columns:1.3fr 1fr 1fr;
    gap:30px;
  }
  .footer-brand {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1.5fr;
    align-items:center;
    column-gap:30px;
  }
  .footer-brand>p {
    max-width:unset;
    margin-top:0;
  }
  .footer-location {
    margin-top:10px;
  }
  .about-intro {
    gap:35px;
  }
  .origin-art {
    padding:30px;
    min-height:350px;
  }
  .principles-grid {
    grid-template-columns:repeat(2,1fr);
    gap:35px;
  }
  .service-detail {
    padding:28px;
  }
  .service-detail h2 {
    font-size:1.14rem;
  }
  .case-card {
    grid-template-columns:.85fr 1fr;
  }
  .case-card .project-art>.dashboard {
    width:310px;
  }
  .case-card .project-content {
    padding:26px;
  }
  .case-card .mobile-art-copy {
    top:58px;
    left:24px;
  }
  .case-card .project-art-mobile .phone-mockup {
    transform:rotate(8deg) translate(26px,68px);
  }
  .case-detail-content {
    grid-template-columns:1fr;
    gap:30px;
  }
  .contact-layout {
    gap:30px;
    grid-template-columns:.8fr 1.2fr;
  }
  .contact-form {
    padding:26px;
  }
  .contact-info h2 {
    font-size:1.8rem;
  }
  .form-grid {
    gap:var(--space-2);
  }
  .form-submit {
    flex-direction:column-reverse;
    align-items:start;
    gap:13px;
  }
  .form-submit p {
    max-width:none;
  }
  .form-submit .button {
    width:100%;
  }
  .contact-method a {
    overflow-wrap:anywhere;
  }
  .support-band {
    gap:35px;
  }
}

@media(max-width:767px) {
  :root {
    --header-height:73px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .section {
    padding-block:65px;
  }
  .header-inner {
    gap:20px;
  }
  .brand-word {
    font-size:1.33rem;
  }
  .brand img {
    width:32px;
    height:32px;
  }
  .menu-toggle {
    display:block;
  }
  .main-nav {
    position:absolute;
    left:0;
    top:72px;
    right:0;
    background:#fff;
    border-bottom:1px solid #dfe6f2;
    box-shadow:0 20px 30px #293c6512;
    padding:24px 24px 30px;
    align-items:stretch;
    gap:7px;
    display:none;
    max-height:calc(100dvh - 73px);
    overflow:auto;
  }
  .main-nav.is-open {
    display:flex;
    flex-direction:column;
  }
  .nav-link {
    padding:11px 13px;
    font-size:.95rem;
    border-radius:7px;
  }
  .nav-link[aria-current] {
    background:#eff3ff;
  }
  .nav-link[aria-current]::after {
    display:none;
  }
  .nav-cta {
    margin-top:10px;
    font-size:.86rem;
    min-height:46px;
  }
  .no-js .menu-toggle {
    display:none;
  }
  .no-js .site-header {
    height:auto;
    position:relative;
  }
  .no-js .header-inner {
    flex-direction:column;
    padding-block:18px;
  }
  .no-js .main-nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    position:static;
    box-shadow:none;
    padding:0;
    border:0;
    overflow:visible;
  }
  .no-js .nav-link {
    font-size:.75rem;
    padding:6px;
  }
  .no-js .nav-cta {
    margin:0;
  }
  .hero-main {
    grid-template-columns:minmax(0,1fr);
    padding-block:57px 40px;
    gap:15px;
    min-height:unset;
  }
  .hero-copy {
    text-align:center;
  }
  .hero h1 {
    font-size:clamp(2.8rem,8.6vw,4.4rem);
    max-width:560px;
    margin-inline:auto;
    line-height:1.1;
  }
  .hero h1 br:first-of-type {
    display:none;
  }
  .hero-copy .eyebrow {
    justify-content:center;
    font-size:0.75rem;
    letter-spacing:.11em;
    margin-bottom:22px;
  }
  .hero-description {
    font-size:.93rem;
    max-width:450px;
    margin:24px auto 0;
  }
  .hero .actions {
    justify-content:center;
    margin-top:27px;
  }
  .hero .button {
    font-size:.81rem;
    padding:13px 20px;
  }
  .hero-note {
    justify-content:center;
    font-size:0.75rem;
  }
  .hero-visual {
    width:480px;
    max-width:100%;
    height:407px;
    margin:15px auto 10px;
  }
  .hero-visual>.dashboard {
    width:430px;
    left:15px;
    top:53px;
  }
  .hero-visual .dashboard-body {
    grid-template-columns:90px 1fr;
    min-height:280px;
  }
  .hero-visual .dash-main {
    padding:18px 15px;
  }
  .hero-visual .dash-stat strong {
    font-size:12px;
  }
  .hero-visual .bars {
    height:72px;
  }
  .hero-visual .orbit {
    width:360px;
    height:360px;
    left:50px;
    top:21px;
  }
  .float-code {
    top:6px;
    right:1px;
    width:173px;
  }
  .float-status {
    bottom:15px;
    left:1px;
  }
  .float-mobile {
    right:-2px;
    bottom:38px;
  }
  .float-mobile strong {
    font-size:9px;
  }
  .float-mobile small {
    font-size:8px;
  }
  .visual-caption {
    bottom:-11px;
    right:50%;
    transform:translateX(50%);
    white-space:nowrap;
  }
  .capabilities-bar {
    grid-template-columns:1fr 1fr;
    gap:22px 0;
    padding-block:27px;
  }
  .capability {
    justify-content:start;
    padding-left:25px;
    font-size:.65rem;
    gap:12px;
  }
  .capability:nth-child(2) {
    border:0;
  }
  .capability strong {
    font-size:.73rem;
  }
  .capability .icon {
    width:20px;
    height:20px;
  }
  .section-heading {
    display:block;
    margin-bottom:31px;
  }
  .section-heading h2 {
    font-size:2.1rem;
    max-width:540px;
  }
  .section-heading p {
    font-size:.87rem;
    max-width:550px;
    margin-top:17px;
  }
  .section-heading>.text-link {
    margin-top:22px;
    font-size:.81rem;
  }
  .eyebrow {
    font-size:0.75rem;
    margin-bottom:17px;
  }
  .services-grid {
    gap:14px;
  }
  .service-card {
    padding:23px 20px;
    min-height:226px;
  }
  .service-card h3 {
    font-size:.96rem;
  }
  .service-card p {
    font-size:0.875rem;
  }
  .service-card .icon-box {
    margin-bottom:20px;
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:23px;
  }
  .project-art {
    height:295px;
  }
  .project-art .dashboard {
    width:390px;
    transform:translate(12px,45px) rotate(-5deg);
  }
  .project-art-mobile .phone-mockup {
    width:168px;
    min-height:300px;
    transform:rotate(8deg) translate(55px,43px);
  }
  .project-art-mobile .phone-map {
    height:100px;
  }
  .mobile-art-copy {
    left:39px;
    top:103px;
    width:160px;
  }
  .mobile-art-copy strong {
    font-size:30px;
  }
  .mobile-art-copy p {
    font-size:10px;
    width:130px;
  }
  .project-content {
    padding:28px;
  }
  .project-content>p {
    font-size:1rem;
  }
  .custom-project {
    align-items:start;
    flex-direction:column;
    gap:18px;
  }
  .custom-project .text-link {
    margin-left:68px;
    font-size:.78rem;
  }
  .process-grid {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:35px;
  }
  .process-grid::before {
    width:1px;
    height:calc(100% - 50px);
    top:20px;
    left:22px;
  }
  .process-step {
    padding-left:73px;
    min-height:87px;
  }
  .step-number {
    position:absolute;
    top:0;
    left:0;
    width:45px;
    height:45px;
    box-shadow:0 0 0 6px white;
  }
  .process-step h3 {
    font-size:1rem;
    padding-top:4px;
    margin-bottom:9px;
  }
  .process-step p {
    font-size:0.875rem;
    max-width:none;
  }
  .process-note {
    font-size:.7rem;
    margin-top:31px;
  }
  .benefits-grid {
    grid-template-columns:1fr 1fr;
    gap:29px;
  }
  .why-copy h2 {
    font-size:2.1rem;
  }
  .benefit h3 {
    font-size:.88rem;
  }
  .benefit p {
    font-size:0.875rem;
  }
  .technology-section {
    padding-block:42px;
  }
  .technology-intro {
    font-size:0.875rem;
    max-width:290px;
    margin-inline:auto;
  }
  .technology-list {
    gap:18px 23px;
  }
  .technology-list li {
    font-size:.86rem;
  }
  .technology-list .tech-small {
    font-size:.74rem;
  }
  .public-block {
    flex-direction:column;
    align-items:start;
    gap:20px;
    padding-block:34px;
  }
  .public-copy {
    gap:15px;
  }
  .public-copy h3 {
    font-size:.85rem;
  }
  .public-copy p {
    font-size:.74rem;
  }
  .public-block>.text-link {
    margin-left:62px;
    font-size:.73rem;
  }
  .cta-section {
    padding:15px 0 60px;
  }
  .cta-panel {
    padding:38px 30px;
    flex-direction:column;
    align-items:start;
    gap:26px;
    border-radius:13px;
  }
  .cta-panel h2 {
    font-size:1.9rem;
  }
  .cta-panel p {
    font-size:1rem;
  }
  .cta-eyebrow {
    font-size:0.75rem;
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
    padding-bottom:33px;
  }
  .footer-brand {
    display:block;
    grid-column:1/-1;
  }
  .footer-brand>p {
    max-width:300px;
    margin-top:17px;
  }
  .footer-location {
    margin-top:17px;
  }
  .footer-column:last-child {
    grid-column:1/-1;
  }
  .footer-column h3 {
    margin-top:0;
    margin-bottom:var(--space-2);
  }
  .footer-column li {
    font-size:0.875rem;
  }
  .footer-bottom {
    font-size:0.75rem;
    flex-direction:column;
    gap:var(--space);
  }
  .site-footer {
    padding-top:41px;
  }
  .page-hero {
    padding-block:35px 50px;
  }
  .breadcrumb {
    margin-bottom:29px;
    font-size:0.75rem;
  }
  .page-hero h1 {
    font-size:2.7rem;
    max-width:550px;
    line-height:1.2;
  }
  .page-hero .lead {
    font-size:.94rem;
    margin-top:21px;
  }
  .page-hero .hero-footer-note {
    font-size:.68rem;
  }
  .about-intro {
    grid-template-columns:1fr;
    gap:35px;
  }
  .prose h2 {
    font-size:2rem;
  }
  .prose p {
    font-size:1rem;
  }
  .origin-art {
    min-height:345px;
    padding:35px;
  }
  .mission-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .mission-card {
    padding:30px;
  }
  .mission-card h2 {
    font-size:1.65rem;
  }
  .mission-card p {
    font-size:1rem;
  }
  .principles-grid {
    gap:30px;
  }
  .principle h3 {
    font-size:.95rem;
  }
  .principle p {
    font-size:0.9375rem;
  }
  .service-index {
    gap:var(--space);
    margin-top:25px;
  }
  .service-index a {
    font-size:0.8125rem;
    padding:8px 10px;
  }
  .service-details {
    grid-template-columns:1fr;
    gap:20px;
  }
  .service-detail {
    padding:29px;
  }
  .service-detail h2 {
    font-size:1.3rem;
  }
  .service-detail p {
    font-size:1rem;
  }
  .service-detail .check-list li {
    font-size:0.875rem;
  }
  .support-band {
    grid-template-columns:1fr;
    gap:15px;
  }
  .support-band h2 {
    font-size:2rem;
  }
  .support-band p {
    font-size:.9rem;
  }
  .support-band .check-list {
    padding:25px;
    gap:17px;
  }
  .filter-bar {
    align-items:start;
    flex-direction:column;
    gap:13px;
    margin-bottom:25px;
  }
  .filter-group {
    gap:7px;
  }
  .filter-button {
    padding:8px 14px;
    font-size:0.875rem;
  }
  .filter-count {
    font-size:0.75rem;
  }
  .case-card {
    grid-template-columns:1fr;
  }
  .case-card .project-art {
    min-height:305px;
  }
  .case-card .project-art>.dashboard {
    width:390px;
    transform:rotate(-5deg) translate(12px,38px);
  }
  .case-card .project-content {
    padding:28px;
  }
  .case-card .project-content h2 {
    font-size:1.7rem;
  }
  .case-card .mobile-art-copy {
    left:40px;
    top:92px;
  }
  .case-card .mobile-art-copy strong {
    font-size:30px;
  }
  .case-card .project-art-mobile .phone-mockup {
    transform:rotate(8deg) translate(55px,46px);
  }
  .case-detail {
    padding:0 28px;
  }
  .case-detail-content {
    gap:23px;
  }
  .case-detail-content .check-list {
    grid-template-columns:1fr;
  }
  .case-detail summary {
    font-size:.78rem;
  }
  .custom-art {
    padding:40px 25px;
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:40px;
  }
  .contact-info h2 {
    font-size:1.85rem;
  }
  .contact-info>p {
    max-width:500px;
  }
  .contact-method {
    margin-top:25px;
  }
  .contact-public {
    max-width:none;
    margin-top:15px;
  }
  .contact-form {
    padding:29px;
  }
  .form-submit {
    flex-direction:row;
    align-items:center;
    gap:20px;
  }
  .form-submit .button {
    width:auto;
  }
  .form-submit p {
    max-width:210px;
  }
  .contact-bottom {
    flex-direction:column;
    gap:19px;
    margin-top:42px;
  }
  .contact-bottom p {
    font-size:.76rem;
  }
}

@media(max-width:420px) {
  .container {
    width:calc(100% - 36px);
  }
  .hero-main {
    padding-top:43px;
  }
  .hero h1 {
    font-size:clamp(2.5rem,11.6vw,3rem);
  }
  .hero-copy .eyebrow {
    font-size:0.75rem;
    letter-spacing:.08em;
    gap:7px;
  }
  .hero-copy .eyebrow::before {
    width:15px;
  }
  .hero-description {
    font-size:.86rem;
  }
  .hero .button {
    padding:12px 15px;
    font-size:.75rem;
    gap:var(--space);
  }
  .hero .actions {
    gap:10px;
  }
  .hero-visual {
    height:345px;
    margin-top:17px;
  }
  .hero-visual>.dashboard {
    width:345px;
    left:1px;
    top:53px;
  }
  .hero-visual .dashboard-body {
    grid-template-columns:70px 1fr;
    min-height:235px;
  }
  .hero-visual .dash-main {
    padding:14px 10px;
  }
  .hero-visual .dash-sidebar {
    padding:15px 5px;
  }
  .hero-visual .dash-brand {
    font-size:10px;
    gap:4px;
    margin-bottom:22px;
  }
  .hero-visual .dash-brand img {
    width:15px;
    height:15px;
  }
  .hero-visual .dash-nav {
    font-size:6px;
    padding:5px;
    gap:4px;
  }
  .hero-visual .dash-nav .icon {
    width:10px;
    height:10px;
  }
  .hero-visual .dash-title {
    margin-bottom:12px;
  }
  .hero-visual .dash-title strong {
    font-size:12px;
  }
  .hero-visual .dash-title p {
    font-size:6px;
  }
  .hero-visual .dash-stats {
    gap:6px;
    margin-bottom:11px;
  }
  .hero-visual .dash-stat {
    padding:6px;
  }
  .hero-visual .dash-stat>span {
    font-size:6px;
  }
  .hero-visual .dash-stat strong {
    font-size:9px;
  }
  .hero-visual .bars {
    height:51px;
    gap:var(--space);
  }
  .hero-visual .dash-chart {
    padding:9px;
  }
  .hero-visual .orbit {
    width:275px;
    height:275px;
    left:33px;
    top:35px;
  }
  .float-code {
    right:-2px;
    top:15px;
    width:147px;
    font-size:8px;
    padding:8px 12px;
  }
  .code-head {
    font-size:7px;
    padding-bottom:5px;
    margin-bottom:5px;
  }
  .float-status {
    bottom:9px;
    left:0;
    padding:9px 11px;
    gap:var(--space);
  }
  .float-status>.status-check {
    padding:6px;
  }
  .float-status .icon {
    width:16px;
    height:16px;
  }
  .float-status strong {
    font-size:8px;
  }
  .float-status small {
    font-size:7px;
  }
  .float-mobile {
    right:-2px;
    bottom:18px;
    padding:var(--space);
  }
  .float-mobile strong {
    font-size:8px;
  }
  .float-mobile small {
    font-size:7px;
  }
  .float-mobile .icon {
    width:19px;
    height:19px;
  }
  .visual-caption {
    bottom:-18px;
    font-size:7px;
  }
  .capabilities-bar {
    margin-top:10px;
  }
  .capability {
    padding-left:10px;
    font-size:.59rem;
    gap:9px;
  }
  .capability strong {
    font-size:.66rem;
  }
  .services-grid {
    gap:12px;
  }
  .service-card {
    padding:20px 16px;
    min-height:241px;
  }
  .service-card h3 {
    font-size:.9rem;
  }
  .service-card p {
    font-size:0.875rem;
    line-height:1.8;
  }
  .icon-box {
    width:41px;
    height:41px;
  }
  .card-arrow {
    right:15px;
    top:23px;
  }
  .card-arrow .icon {
    width:14px;
    height:14px;
  }
  .project-art .dashboard {
    width:340px;
  }
  .mobile-art-copy {
    left:23px;
    width:120px;
  }
  .mobile-art-copy strong {
    font-size:25px;
  }
  .mobile-art-copy p {
    width:108px;
    font-size:9px;
  }
  .project-art-mobile .phone-mockup {
    transform:rotate(8deg) translate(63px,43px);
    width:154px;
  }
  .project-content {
    padding:var(--space-3);
  }
  .project-footer small {
    font-size:0.75rem;
  }
  .project-footer .text-link {
    font-size:0.875rem;
  }
  .custom-project {
    padding:22px;
  }
  .custom-project-main {
    align-items:start;
    gap:15px;
  }
  .custom-project .text-link {
    margin-left:56px;
  }
  .benefits-grid {
    gap:28px 20px;
  }
  .benefit h3 {
    font-size:.84rem;
  }
  .benefit p {
    font-size:0.875rem;
  }
  .cta-panel {
    padding:33px 26px;
  }
  .cta-panel h2 {
    font-size:1.7rem;
  }
  .page-hero h1 {
    font-size:2.35rem;
  }
  .page-hero .lead {
    font-size:.88rem;
  }
  .principles-grid {
    grid-template-columns:1fr;
    gap:25px;
  }
  .principle h3 {
    margin:14px 0 10px;
    font-size:1rem;
  }
  .principle p {
    font-size:0.9375rem;
  }
  .case-card .project-art>.dashboard {
    width:345px;
  }
  .case-card .mobile-art-copy {
    left:22px;
  }
  .case-card .mobile-art-copy strong {
    font-size:26px;
  }
  .case-card .project-art-mobile .phone-mockup {
    width:158px;
    transform:rotate(8deg) translate(58px,48px);
  }
  .case-card .project-content {
    padding:var(--space-3);
  }
  .case-detail {
    padding-inline:24px;
  }
  .contact-form {
    padding:25px 20px;
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  .form-submit {
    flex-direction:column-reverse;
    align-items:stretch;
    gap:13px;
  }
  .form-submit p {
    max-width:none;
  }
  .form-submit .button {
    width:100%;
  }
  .filter-button {
    padding:8px 12px;
    font-size:0.875rem;
  }
  .service-detail {
    padding:25px;
  }
  .service-detail h2 {
    font-size:1.2rem;
  }
}

@media(max-width:359px) {
  .hero h1 {
    font-size:clamp(2.2rem,11.6vw,2.55rem);
  }
  .hero-visual {
    height:320px;
  }
  .hero-visual>.dashboard {
    width:307px;
    left:0;
  }
  .hero-visual .dash-sidebar {
    display:none;
  }
  .hero-visual .dashboard-body {
    grid-template-columns:1fr;
  }
  .hero-visual .dashboard {
    top:46px;
  }
  .float-mobile {
    bottom:9px;
  }
  .float-status {
    bottom:-6px;
  }
  .visual-caption {
    bottom:-28px;
  }
  .hero-visual .orbit {
    width:235px;
    height:235px;
  }
  .services-grid {
    grid-template-columns:1fr;
  }
  .service-card {
    min-height:205px;
  }
  .project-art .dashboard,.case-card .project-art>.dashboard {
    width:305px;
  }
  .hero .button {
    font-size:.69rem;
    padding:12px;
  }
  .mobile-art-copy strong {
    font-size:23px;
  }
  .project-art-mobile .phone-mockup {
    transform:rotate(8deg) translate(61px,43px);
    width:144px;
  }
  .case-card .project-art-mobile .phone-mockup {
    transform:rotate(8deg) translate(63px,43px);
    width:144px;
  }
  .benefits-grid {
    grid-template-columns:1fr;
  }
  .footer-main {
    gap:28px 15px;
  }
  .filter-group {
    gap:5px;
  }
  .filter-button {
    padding:8px 10px;
  }
  .diagram-node {
    width:73px;
  }
  .diagram-nodes {
    gap:9px;
  }
}