/* Ingenuity Systems — mobile and tablet experience layer (v19)
   Every rule is scoped to 1040px and below so the approved desktop site is
   left untouched. This file is intentionally loaded after all existing CSS. */

/* The script creates these mobile-only accordion panels on every route. Keep
   them completely out of desktop layout and paint. */
@media (min-width: 1041px) {
  .mobile-submenu {
    display: none !important;
  }
}

@media (max-width: 1040px) {
  .service-page .services-connect-section {
    display: none !important;
  }

  :root {
    --responsive-gutter: 24px;
    --responsive-section: 76px;
    --responsive-section-compact: 58px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  body {
    font-size: 15px;
    line-height: 1.65;
  }

  img,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
  }

  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  .wrap,
  .wrap-narrow {
    width: 100%;
    max-width: 100%;
    padding-left: var(--responsive-gutter) !important;
    padding-right: var(--responsive-gutter) !important;
  }

  .section-pad {
    padding-top: var(--responsive-section) !important;
    padding-bottom: var(--responsive-section) !important;
  }

  /* Contact has no image hero, so its opening section needs a real header
     clearance instead of the generic section rhythm. */
  .contact-page > .section-pad:first-of-type {
    padding-top: calc(var(--site-header-height) + 58px) !important;
  }

  .section-head {
    width: 100%;
    max-width: 720px;
    margin-bottom: 42px;
  }

  .section-head.center {
    margin-left: auto;
    margin-right: auto;
  }

  .section-head h2,
  .about-philosophy-copy h2,
  .project-browser-head h2,
  .tool-copy h2 {
    font-size: clamp(34px, 5.8vw, 46px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
  }

  .section-head p,
  .who-copy p,
  .about-who-grid p,
  .contact-info p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-wrap: pretty;
  }

  .eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
  }

  /* The navigation surface itself expands to the viewport. Submenus remain
     inside that surface instead of appearing as a detached mega-menu strip. */
  header,
  header.scrolled,
  header.menu-open,
  header.scrolled.menu-open {
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: var(--site-header-height);
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.11);
    border-radius: 0;
    background: var(--header-bg);
    box-shadow: 0 10px 30px rgba(5,14,27,.24);
    overflow: hidden;
  }

  header.mobile-open,
  header.scrolled.mobile-open,
  header.menu-open.mobile-open,
  header.scrolled.menu-open.mobile-open {
    height: 100dvh !important;
    min-height: 100dvh;
    border-bottom: 0;
    background: #14233b;
  }

  .nav,
  header.scrolled .nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--site-header-height);
    padding: 6px var(--responsive-gutter);
    gap: 12px;
  }

  .brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .brand img.logo-full {
    width: auto;
    height: 60px;
    max-width: 148px;
    object-fit: contain;
  }

  .nav-cta {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .menu-toggle {
    display: flex;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0;
    padding: 8px;
    align-items: center;
    justify-content: center;
  }

  .menu-toggle span {
    width: 26px;
  }

  .nav-links.mobile-open {
    position: absolute;
    top: var(--site-header-height);
    left: 0;
    right: 0;
    display: block !important;
    width: 100%;
    height: calc(100dvh - var(--site-header-height));
    max-height: none;
    padding: 8px var(--responsive-gutter) calc(28px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #14233b;
    border: 0;
    box-shadow: none;
  }

  .nav-links.mobile-open > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }

  .nav-links.mobile-open > li:last-child {
    border-bottom: 0;
  }

  .nav-links.mobile-open a.top-link {
    width: 100%;
    min-height: 50px;
    padding: 14px 2px;
    border: 0;
    color: rgba(255,255,255,.76);
    white-space: normal;
  }

  .nav-links.mobile-open a.top-link::after {
    left: 2px;
    right: auto;
    bottom: 8px;
  }

  .nav-links.mobile-open .has-dropdown > a.top-link {
    cursor: pointer;
  }

  .nav-links.mobile-open .has-dropdown.mobile-submenu-open > a.top-link {
    color: #fff;
  }

  .nav-links.mobile-open .has-dropdown.mobile-submenu-open > a.top-link::after {
    width: 44px;
  }

  .nav-links.mobile-open .caret {
    margin-left: auto;
    transform: rotate(45deg);
  }

  .nav-links.mobile-open .mobile-submenu-open .caret {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  .mobile-submenu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0 0 0 14px;
    overflow: hidden;
    transition: grid-template-rows .4s var(--ease), opacity .25s ease, visibility .25s ease;
  }

  .mobile-submenu-inner {
    min-height: 0;
    overflow: hidden;
  }

  .mobile-submenu-open > .mobile-submenu {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    padding-bottom: 12px;
  }

  .mobile-submenu a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border-left: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.62);
    font: 600 12.5px/1.45 'Manrope', sans-serif;
  }

  .mobile-submenu a:hover,
  .mobile-submenu a:focus-visible,
  .mobile-submenu a.is-current {
    color: #fff;
    border-left-color: var(--orange);
    background: rgba(255,255,255,.045);
  }

  .mobile-submenu .mobile-overview-link {
    color: #ff9d84;
    font-weight: 800;
  }

  .mobile-submenu .mobile-core-link {
    min-height: 48px;
    margin-top: 12px;
    padding: 14px 12px;
    border-left-color: rgba(255,157,132,.72);
    color: #fff;
    background: rgba(255,255,255,.035);
    font: 800 13.5px/1.35 'Manrope', sans-serif;
    letter-spacing: -.01em;
  }

  .mobile-submenu .mobile-overview-link + .mobile-core-link {
    margin-top: 6px;
  }

  .mobile-submenu .mobile-sub-link {
    padding-left: 26px;
    border-left-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.62);
    font-weight: 600;
  }

  .mega-wrap {
    display: none !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
    touch-action: pan-y pinch-zoom;
  }

  /* One consistent hero frame for every internal route. */
  .page-hero,
  .work-hero,
  .tool-page .tool-hero {
    box-sizing: border-box;
    height: var(--page-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: var(--site-header-height) !important;
    padding: 0 !important;
  }

  .page-hero > .wrap,
  .work-hero > .wrap,
  .tool-page .tool-hero > .wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-hero .hero-content,
  .centered-work-hero .work-hero-content,
  .tool-hero-grid > div:first-child {
    width: 100%;
    max-width: 820px !important;
    margin: 0 auto;
    text-align: center !important;
  }

  .page-hero h1,
  .centered-work-hero .work-hero-content > h1,
  .tool-page .tool-hero h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 820px !important;
    min-height: 0 !important;
    margin: 0 auto 16px !important;
    font-size: var(--page-hero-title-size) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
    text-wrap: balance;
  }

  .page-hero p.lead,
  .centered-work-hero .work-hero-content > .lead,
  .tool-page .tool-hero p {
    max-width: 650px !important;
    margin: 0 auto 26px !important;
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    text-wrap: pretty;
  }

  .centered-work-hero .work-hero-content > .hero-actions,
  .tool-hero .hero-actions {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-hero .hero-bg img {
    object-position: center;
  }

  .service-page .page-hero + .section-pad,
  .industry-detail-page .page-hero + .section-pad,
  .about-who-section {
    padding-top: var(--responsive-section-compact) !important;
  }

  /* Remove desktop height assumptions from reusable cards. */
  .cap-card,
  .service-tile,
  .wide-card,
  .decision-card,
  .project-card,
  .case-study-card,
  .founder-card,
  .role-card,
  .work-projects .work-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .cap-grid,
  .cap-grid-3,
  .service-tile-grid,
  .all-capabilities-grid,
  .about-values-grid,
  .decision-grid,
  .work-grid,
  .project-grid,
  .founders-grid,
  .builder-result-grid {
    gap: 18px !important;
  }

  .cap-card {
    padding: 26px 22px;
  }

  .service-tile,
  .wide-card {
    padding: 24px 22px;
  }

  .decision-card,
  .project-card,
  .case-study-card,
  .founder-card {
    padding: 26px 22px !important;
  }

  .capability-block,
  .capability-block .cb-inner {
    min-height: 420px !important;
  }

  .capability-stack {
    gap: 16px;
    margin-top: 38px;
    padding: 0 var(--responsive-gutter);
  }

  .cb-inner {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .why-block,
  .cta-band,
  .discovery-band,
  .assessment-shell,
  .interactive-tool,
  .builder-result {
    border-radius: 28px;
  }

  .why-block,
  .cta-band,
  .discovery-band {
    padding: 40px 34px;
  }

  .flow-wrap {
    width: 100%;
    padding-top: 10px;
  }

  .ind-morph {
    border-radius: 28px;
  }

  .ind-tabs {
    scrollbar-width: none;
  }

  .ind-tabs::-webkit-scrollbar,
  .project-filters::-webkit-scrollbar,
  .work-tabs::-webkit-scrollbar {
    display: none;
  }

  .ind-tab {
    flex: 0 0 auto;
    min-height: 48px;
  }

  .ind-scene-panel.active {
    height: auto;
  }

  .ind-scene-body {
    padding: 30px;
  }

  .project-terminal,
  .project-detail-terminal {
    border-radius: 20px;
  }

  .project-card-top {
    margin-bottom: 24px;
  }

  .project-card.is-open {
    padding: 26px 22px !important;
  }

  .project-detail-inner {
    gap: 18px;
  }

  .work-projects > .wrap {
    padding-left: var(--responsive-gutter) !important;
    padding-right: var(--responsive-gutter) !important;
  }

  .work-projects .work-card summary {
    grid-template-columns: 44px minmax(0,1fr) 26px;
    gap: 15px;
    padding: 22px;
  }

  .work-projects .work-card .work-card-index {
    width: 44px;
    height: 44px;
  }

  .work-projects .work-card summary strong {
    font-size: 19px;
    overflow-wrap: anywhere;
  }

  .work-projects .work-card-detail {
    padding: 0 22px 24px;
  }

  .work-projects .work-card-detail p {
    margin: 20px 0;
    font-size: 14px;
  }

  .work-projects .work-card[open],
  .project-card.is-open {
    grid-column: 1 / -1;
  }

  .project-filters,
  .work-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .project-filter,
  .work-tab {
    flex: 0 0 auto;
    min-height: 44px;
    scroll-snap-align: start;
  }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .builder-form select,
  .assistant-form input {
    font-size: 16px !important;
  }

  .form-field,
  .builder-form select {
    min-height: 50px;
  }

  /* The assistant becomes a small safe-area control and docks near the header
     while a form or assessment is in view, keeping all inputs unobstructed. */
  .site-assistant {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transition: top .3s var(--ease), bottom .3s var(--ease), transform .3s var(--ease);
  }

  .site-assistant.is-content-safe:not(.is-open) {
    top: calc(var(--site-header-height) + 10px);
    bottom: auto;
  }

  .assistant-panel {
    width: min(420px, calc(100vw - 28px));
    height: min(650px, calc(100dvh - var(--site-header-height) - 28px));
  }

  footer {
    padding-top: 60px;
    border-radius: 32px 32px 0 0;
  }

  .footer-top {
    gap: 30px;
    padding-bottom: 36px;
  }
}

/* Touch devices receive explicit tap states and do not depend on hover. */
@media (max-width: 1040px) and (hover: none),
       (max-width: 1040px) and (pointer: coarse) {
  /* Touch cards use the same 3D reveal as desktop, with the state controlled
     by a deliberate tap instead of relying on hover. */
  .flip-card .flip-inner {
    min-height: 220px;
    transform: none !important;
  }

  .flip-front,
  .flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .flip-card.is-flipped .flip-inner {
    transform: rotateY(180deg) !important;
  }

  .flip-back {
    justify-content:center;
    padding:26px 22px;
  }

  .flip-card {
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .flip-card:focus-visible {
    outline:2px solid rgba(255,174,151,.9);
    outline-offset:4px;
  }

  .cap-card:hover,
  .service-tile:hover,
  .wide-card:hover,
  .industry-card:hover,
  .im-card:hover,
  .work-card:hover,
  .project-card:hover,
  .founder-card:hover,
  .role-card:hover,
  .decision-card:hover,
  .btn:hover {
    transform: none !important;
  }

  .btn:active,
  .project-filter:active,
  .solution-options button:active,
  .mobile-submenu a:active {
    transform: scale(.98) !important;
  }
}

/* Tablet: maintain useful two-column density without desktop-sized cards. */
@media (min-width: 768px) and (max-width: 1040px) {
  :root {
    --site-header-height: 76px;
    --page-hero-height: clamp(480px, 62svh, 540px);
    --page-hero-title-size: clamp(42px, 5.8vw, 56px);
  }

  .all-capabilities-grid,
  .about-values-grid,
  .cap-grid,
  .cap-grid-3,
  .service-tile-grid,
  .decision-grid,
  .work-grid,
  .project-grid,
  .builder-result-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .founders-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-wrap,
  .about-who-grid,
  .who-split,
  .testimonial-split {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }

  .centered-work-hero .work-hero-content > .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    gap: 14px !important;
  }

  .centered-work-hero .work-hero-content > .hero-actions .btn {
    width: auto !important;
    min-width: 220px !important;
  }

  /* Fold inner screens/tablets: center the home hero copy while retaining
     the desktop two-column behavior above this breakpoint. */
  .home-page .hc-copy {
    text-align: center;
  }

  .home-page .hc-copy .hero-rotator {
    margin-left: auto;
    margin-right: auto;
  }

  .home-page .hc-copy h1,
  .home-page .hc-copy p.lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .home-page .hc-copy p.lead {
    max-width: 720px;
  }

  .home-page .hc-copy .hero-actions {
    align-items: center;
    justify-content: center;
  }

  .home-page .hc-copy .hero-dots {
    justify-content: center;
  }

  .solution-finder {
    grid-template-columns: minmax(270px,.72fr) minmax(0,1fr) !important;
    min-height: 480px;
    border-radius: 30px;
  }

  .solution-finder-intro {
    padding: 44px 32px 34px;
    border-right: 1px solid rgba(159,191,232,.22);
    border-bottom: 0;
  }

  .solution-finder-intro h2 {
    margin-bottom: 18px;
    font-size: clamp(40px,5vw,50px);
  }

  .solution-finder-intro p {
    font-size: 14px;
  }

  .solution-progress {
    margin-top: 28px;
  }

  .solution-progress-label {
    margin-top: 15px;
  }

  .solution-finder-form {
    padding: 74px 32px 38px;
  }

  .solution-finder-form-head {
    top: 28px;
    left: 32px;
    right: 32px;
  }

  .solution-step h3,
  .solution-result h3 {
    margin-bottom: 22px;
    font-size: 27px;
  }

  .solution-options {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }

  .solution-options button {
    min-height: 58px;
    padding: 13px 38px 13px 15px;
    border-radius: 16px;
    font-size: 12.5px;
  }

  .tool-page .tool-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(210px,.62fr) !important;
    gap: 34px !important;
    align-items: center;
  }

  .tool-hero-visual {
    order: 0 !important;
  }

  .maturity-rings,
  .orbital-core {
    width: min(225px, 28vw) !important;
  }

  .assessment-shell,
  .interactive-tool {
    padding: 38px 34px;
  }

  .footer-top {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .home-page .hc-panel {
    height:360px !important;
  }
}

/* A portrait tablet is too narrow for the contact copy and form to share a
   row comfortably. Wider tablets retain the compact two-column treatment. */
@media (min-width: 768px) and (max-width: 820px) {
  .contact-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* Phone and small tablet portrait. */
@media (max-width: 767px) {
  :root {
    --site-header-height: 64px;
    --page-hero-height: clamp(430px, 66svh, 500px);
    --page-hero-title-size: clamp(34px, 9.6vw, 44px);
    --responsive-gutter: 18px;
    --responsive-section: 58px;
    --responsive-section-compact: 48px;
  }

  body {
    font-size: 14.5px;
    line-height: 1.65;
  }

  .nav,
  header.scrolled .nav {
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 8px;
  }

  .brand img.logo-full {
    height: 49px;
    max-width: 116px;
  }

  .nav-cta .btn-sm {
    min-height: 42px;
    padding: 10px 13px;
    font-size: 11px;
  }

  .nav-links.mobile-open {
    padding-top: 6px;
  }

  .page-hero,
  .work-hero,
  .tool-page .tool-hero {
    height: var(--page-hero-height) !important;
  }

  .page-hero h1,
  .centered-work-hero .work-hero-content > h1,
  .tool-page .tool-hero h1 {
    margin-bottom: 14px !important;
    font-size: var(--page-hero-title-size) !important;
  }

  .page-hero p.lead,
  .centered-work-hero .work-hero-content > .lead,
  .tool-page .tool-hero p {
    max-width: 34rem !important;
    margin-bottom: 22px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .page-hero .hero-actions,
  .centered-work-hero .work-hero-content > .hero-actions,
  .tool-hero .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(100%, 340px) !important;
    gap: 10px !important;
  }

  .page-hero .hero-actions .btn,
  .centered-work-hero .work-hero-content > .hero-actions .btn,
  .tool-hero .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px;
    justify-content: center;
  }

  .work-hero-title {
    min-height: 0 !important;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .section-head h2,
  .about-philosophy-copy h2,
  .project-browser-head h2,
  .tool-copy h2 {
    font-size: clamp(29px, 8.5vw, 38px) !important;
    line-height: 1.15 !important;
  }

  .section-head p,
  .who-copy p,
  .about-who-grid p,
  .contact-info p {
    font-size: 14px !important;
  }

  .all-capabilities-grid,
  .about-values-grid,
  .cap-grid,
  .cap-grid-3,
  .service-tile-grid,
  .decision-grid,
  .work-grid,
  .project-grid,
  .founders-grid,
  .builder-result-grid,
  .contact-wrap,
  .about-who-grid,
  .who-split,
  .testimonial-split,
  .wide-card-stack,
  .project-detail-inner,
  .tool-hero-grid,
  .interactive-tool {
    grid-template-columns: 1fr !important;
  }

  .cap-grid,
  .cap-grid-3,
  .service-tile-grid,
  .all-capabilities-grid,
  .about-values-grid,
  .decision-grid,
  .work-grid,
  .project-grid,
  .founders-grid {
    gap: 14px !important;
  }

  .cap-card,
  .service-tile,
  .wide-card,
  .decision-card,
  .project-card,
  .case-study-card,
  .founder-card,
  .role-card {
    padding: 22px 19px !important;
    border-radius: 22px !important;
  }

  .cap-card .cap-icon,
  .service-tile .tile-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
  }

  .service-tile {
    flex-direction: row;
    gap: 15px;
  }

  .service-tile p {
    max-width: 100%;
  }

  .wide-card {
    gap: 14px;
    align-items: flex-start;
  }

  .wide-card .wc-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .capability-block,
  .capability-block .cb-inner {
    min-height: 370px !important;
  }

  .capability-stack {
    padding: 0 12px;
  }

  .capability-block {
    border-radius: 24px;
  }

  .capability-block h3 {
    font-size: clamp(25px,7.8vw,32px);
  }

  .capability-block p {
    font-size: 14px;
  }

  .why-block,
  .cta-band,
  .discovery-band {
    padding: 30px 22px;
    border-radius: 24px;
  }

  .cta-band {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .cta-band h3 {
    font-size: 24px;
  }

  .cta-band .btn,
  .role-card > .btn,
  #submit-btn {
    width: 100%;
    justify-content: center;
  }

  .role-card {
    align-items: flex-start;
  }

  .about-philosophy-copy {
    margin-bottom: 34px;
  }

  .about-philosophy-pills {
    gap: 8px;
    margin-top: 20px;
  }

  .about-philosophy-pills span {
    padding: 8px 13px !important;
    font-size: 11.5px !important;
  }

  .founder-top {
    gap: 13px;
  }

  .founder-photo {
    width: 60px;
    height: 60px;
  }

  .founder-card .quote {
    font-size: 15px;
  }

  .career-empty-state {
    margin-top: 24px !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  .flow-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
    padding: 0;
  }

  .flow-step {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);
    align-items:start;
    gap: 4px 16px;
    padding:18px;
    text-align: left;
    border: 1px solid rgba(20,35,59,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.7);
  }

  .flow-num {
    grid-row: 1 / span 2;
    align-self:center;
    width:56px;
    height:56px;
    margin:0;
  }

  .flow-step h4,
  .flow-step p {
    grid-column: 2;
    min-width:0;
  }

  .flow-step h4 {margin:0;font-size:17px;line-height:1.2;}
  .flow-step p {margin:0;font-size:13.5px;line-height:1.5;}

  .flow-connector {
    display: none !important;
  }

  .pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  .pipeline span.node {
    width: 100%;
    text-align: center;
  }

  .pipeline span.arrow {
    position: relative;
    display: block;
    width: 18px;
    height: 22px;
    align-self: center;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transform: none;
  }

  .pipeline span.arrow::before {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 6px;
    left: 50%;
    width: 2px;
    border-radius: 999px;
    background: var(--orange);
    transform: translateX(-50%);
  }

  .pipeline span.arrow::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--orange);
    transform: translateX(-50%);
  }

  .ind-scene-img {
    height: 180px;
  }

  .ind-scene-body {
    padding: 24px 20px 26px;
  }

  .ind-scene-body h3 {
    font-size: 21px;
  }

  .ind-stat-row {
    gap: 18px;
  }

  .im-card {
    width: min(76vw, 238px);
    height: 282px;
    padding: 18px;
    border-radius: 22px;
  }

  .industry-marquee-track {
    gap: 14px;
    padding: 0 18px;
  }

  .testimonial-track {
    height: auto !important;
  }

  .testimonial-slide {
    position: absolute;
    min-height: 0;
    padding: 26px 20px 76px;
    border-radius: 24px;
  }

  .testimonial-slide.fan-active {
    position: relative;
  }

  .testimonial-slide .quote {
    font-size: 15px;
    line-height: 1.55;
  }

  .testimonial-slider .slider-controls {
    right: 18px;
    bottom: 18px;
  }

  .project-browser {
    padding-top: 44px !important;
  }

  .project-browser-head {
    gap: 12px;
    margin-bottom: 22px;
  }

  .project-filters {
    width: calc(100% + 18px);
    margin-right: -18px;
    padding: 0 18px 8px 0;
  }

  .project-filter {
    padding: 9px 13px;
    font-size: 10px;
  }

  .project-card-top {
    margin-bottom: 20px;
  }

  .project-card h3 {
    font-size: 22px;
  }

  .project-card > p {
    margin-bottom: 18px;
  }

  .project-detail-copy h4 {
    font-size: 22px;
  }

  .project-detail-terminal {
    min-height: 0;
  }

  .project-detail-terminal-screen {
    height: 220px;
    padding: 18px;
    font-size: 10.5px;
  }

  .project-terminal-screen {
    min-height: 150px;
    padding: 14px;
    font-size: 10.5px;
    line-height: 1.8;
  }

  .work-tabs {
    width: calc(100% + 18px);
    margin: -10px -18px 24px 0;
    padding: 5px 18px 5px 5px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .work-tab {
    min-width: 116px;
    padding: 9px 14px;
  }

  .work-projects .work-card summary {
    grid-template-columns: 40px minmax(0,1fr) 22px;
    gap: 12px;
    padding: 19px 17px;
  }

  .work-projects .work-card .work-card-index {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .work-projects .work-card summary strong {
    font-size: 16px;
  }

  .work-projects .work-card-detail {
    padding: 0 17px 20px;
  }

  .case-study-top {
    margin-bottom: 16px;
  }

  .case-study-card h3 {
    font-size: 20px;
  }

  .case-study-detail-grid {
    grid-template-columns: 1fr;
  }

  .case-study-card.is-expanded .case-study-detail {
    max-height: 900px;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .contact-wrap {
    gap: 34px !important;
  }

  .contact-detail {
    margin-bottom: 16px;
  }

  .assessment-shell,
  .interactive-tool {
    padding: 24px 18px !important;
  }

  .tool-page .tool-hero-grid {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 0 !important;
  }

  .tool-hero-visual {
    display: none;
  }

  .tool-page .section-pad:not(.tool-hero) {
    padding-top: var(--responsive-section) !important;
    padding-bottom: var(--responsive-section) !important;
  }

  .maturity-q {
    padding: 17px;
  }

  .maturity-q > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .maturity-q button {
    min-height: 46px;
    text-align: left;
  }

  .builder-form {
    grid-template-columns: 1fr;
  }

  .builder-form .btn {
    grid-column: auto;
    width: 100%;
    justify-content: center;
  }

  .builder-result {
    padding: 24px 18px;
  }

  .architecture-chain {
    align-items: stretch;
    flex-direction: column;
  }

  .architecture-chain .architecture-arrow {
    width: 18px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-col h5 {
    margin-bottom: 12px;
  }

  .footer-col ul {
    gap: 9px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 22px;
  }

  .footer-bottom .legal-links {
    flex-wrap: wrap;
  }

  /* Home hero: natural page flow, clear copy, and a bounded touch-safe plot. */
  .home-page .hero-console {
    min-height: 0 !important;
    padding: calc(var(--site-header-height) + 26px) 0 38px !important;
    align-items: flex-start;
  }

  .home-page .hero-console-grid {
    gap: 18px !important;
  }

  .home-page .hc-copy .hero-rotator {
    min-height: 228px;
  }

  .home-page .hc-copy h1 {
    max-width: 15ch;
    margin: 0 0 11px;
    font-size: clamp(31px, 9vw, 39px);
    line-height: 1.08;
  }

  .home-page .hc-copy p.lead {
    max-width: 38rem;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.52;
  }

  .home-page .hc-copy .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px;
  }

  .home-page .hc-copy .hero-actions .btn {
    width: 100% !important;
    min-width: 0;
    min-height: 46px;
    padding: 11px 10px;
    justify-content: center;
    font-size: 11px;
    white-space: normal;
    text-align: center;
  }

  .home-page .hc-copy .hero-dots {
    margin-top: 18px;
  }

  .home-page .hc-right {
    gap: 12px;
  }

  .home-page .hc-panel {
    height: clamp(276px, 72vw, 320px) !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: rgba(7,20,37,.24);
  }

  .home-page .hc-panel::before {
    inset: -20px;
  }

  .home-page .hc-panel canvas {
    cursor: pointer;
    touch-action: pan-y !important;
  }

  .home-page .hc-node-detail {
    margin: 0;
    padding: 14px;
    border-radius: 16px;
  }

  .home-page .hc-node-detail-top {
    align-items: flex-start;
    gap: 8px;
  }

  .home-page .hc-node-detail-status {
    font-size: 8px;
  }

  .home-page .hc-node-detail p {
    font-size: 11.5px;
    line-height: 1.48;
  }

  .home-page .hc-node-trace {
    gap: 5px;
    margin-top: 10px;
  }

  .home-page .hc-node-trace span {
    padding: 5px 7px;
    font-size: 8.5px;
  }

  /* Compact Solution Finder: the question and choices appear much sooner. */
  .solution-finder-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .solution-finder {
    grid-template-columns: 1fr !important;
    min-height: 0;
    border-radius: 24px;
  }

  .solution-finder-intro {
    padding: 26px 22px 22px !important;
    border-right: 0;
    border-bottom: 1px solid rgba(159,191,232,.22);
  }

  .solution-finder-status {
    margin-bottom: 12px;
    font-size: 8.5px;
  }

  .solution-finder-intro .eyebrow {
    margin-bottom: 12px;
  }

  .solution-finder-intro h2 {
    max-width: 100%;
    margin-bottom: 13px;
    font-size: clamp(33px, 9.5vw, 40px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  .solution-finder-intro h2 br {
    display: none;
  }

  .solution-finder-intro p {
    max-width: 38rem;
    font-size: 13.5px;
    line-height: 1.55;
  }

  .solution-progress {
    margin-top: 20px;
  }

  .solution-progress-label {
    margin-top: 12px;
    font-size: 9.5px;
  }

  .solution-finder-form {
    min-height: 0;
    padding: 58px 22px 26px !important;
    align-items: flex-start;
  }

  .solution-finder-form-head {
    top: 22px;
    left: 22px;
    right: 22px;
    font-size: 8.5px;
  }

  .solution-step h3,
  .solution-result h3 {
    margin-bottom: 17px;
    font-size: clamp(23px, 6.6vw, 28px) !important;
    line-height: 1.18;
  }

  .solution-options {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }

  .solution-options button {
    min-height: 54px;
    padding: 11px 31px 11px 12px;
    border-radius: 15px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .solution-options button::after {
    right: 12px;
    width: 18px;
    height: 18px;
    background-size: 15px 15px;
  }

  .solution-back {
    min-height: 40px;
    margin-top: 14px;
  }

  .solution-result p {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .solution-result-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .solution-result-actions .btn,
  .solution-restart {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Compact lower-right launcher; the open panel remains clear of content. */
  .site-assistant,
  .site-assistant.is-content-safe:not(.is-open) {
    top:auto;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:221;
    transition:opacity .2s ease,transform .2s ease;
  }

  .assistant-launcher {
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:2px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(10,20,38,.22);
  }

  .assistant-launcher-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    box-shadow:none;
  }

  .assistant-launcher-copy,
  .assistant-launcher-arrow {display:none;}

  .assistant-panel {
    position:fixed;
    top:auto;
    left:50%;
    right:auto;
    bottom:66px;
    width:min(420px,calc(100vw - 56px));
    height:calc(100dvh - 86px);
    max-height:650px;
    border-radius:22px;
    transform:translateX(-50%) translateY(14px) scale(.97);
    transform-origin:bottom center;
  }

  .site-assistant.is-open .assistant-panel {
    transform:translateX(-50%);
  }

  body.mobile-nav-open .site-assistant {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
  }

  .home-page .hc-panel {
    height:clamp(300px,80vw,332px) !important;
    background:#10213a !important;
    border-color:rgba(255,255,255,.14) !important;
  }

  .home-page .hc-panel-label {display:none;}
  .home-page .hc-panel canvas {touch-action:pan-y !important;}
}

@media (max-width: 430px) {
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .home-page .hc-copy .hero-rotator {
    min-height: 238px;
  }

  .solution-finder::before {
    opacity: .45;
  }

  .assistant-panel {
    height: calc(100dvh - var(--site-header-height) - 20px);
  }
}

@media (max-width: 379px) {
  :root {
    --responsive-gutter: 15px;
    --page-hero-title-size: clamp(31px, 9.5vw, 37px);
  }

  .home-page .hc-copy .hero-actions,
  .solution-options {
    grid-template-columns: 1fr;
  }

  .home-page .hc-copy .hero-rotator {
    min-height: 284px;
  }

  .solution-options button {
    min-height: 50px;
    font-size: 12px;
  }

  .service-tile {
    flex-direction: column;
  }

  .testimonial-meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .nav,
  header.scrolled .nav {
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand img.logo-full {
    max-width: 108px;
  }

  .btn {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
  }

  .home-page .hc-panel {
    height:300px !important;
  }
}

/* The interactive system canvas is a desktop-only experience. On tablets and
   phones, keep the hero focused and compact rather than squeezing node labels
   and connectors into a touch-sized space. */
@media (max-width: 1079px) {
  .home-page .hc-right {
    display: none !important;
  }

  .home-page .hero-console {
    min-height: calc(var(--page-hero-height) + 96px) !important;
    padding-bottom: 42px !important;
  }

  .home-page .hero-console-grid {
    display: block !important;
  }

  .home-page .hc-copy {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }

  .home-page .hc-copy .hero-rotator,
  .home-page .hc-copy h1,
  .home-page .hc-copy p.lead {
    text-align: center;
  }

  .home-page .hc-copy h1 {
    margin-left: auto;
    margin-right: auto;
  }

  .home-page .hc-copy p.lead {
    margin-left: auto;
    margin-right: auto;
  }

  .home-page .hc-copy .hero-actions,
  .home-page .hc-copy .hero-dots {
    align-items: center;
    justify-content: center;
  }
}

/* Keep the Home value card compact on smaller screens without changing desktop. */
@media (max-width: 1040px) {
  .home-page .why-block {
    padding: 30px 24px;
    border-radius: 24px;
  }

  .home-page .why-block h2 {
    max-width: 620px;
    font-size: clamp(25px, 4.6vw, 32px);
    line-height: 1.12;
    margin-bottom: 12px;
  }

  .home-page .why-block p.lead-p {
    max-width: 620px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .home-page .why-block .flow-line {
    margin: 22px auto !important;
  }

  .home-page .why-block .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-page .why-block .stat-item {
    padding: 20px 14px;
  }

  .home-page .why-block .stat-item .num {
    font-size: 32px;
    margin-bottom: 5px;
  }

  .home-page .why-block .stat-item .lbl {
    font-size: 11px;
    line-height: 1.35;
  }
}

@media (max-width: 760px) {
  .home-page .why-block {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .home-page .why-block h2 {
    font-size: clamp(24px, 7.5vw, 30px);
    margin-bottom: 10px;
  }

  .home-page .why-block p.lead-p {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
  }

  .home-page .why-block .flow-line {
    margin: 16px auto !important;
  }

  .home-page .why-block .stats-bar {
    gap: 8px;
  }

  .home-page .why-block .stat-item {
    padding: 14px 10px;
    border-radius: 14px;
  }

  .home-page .why-block .stat-item .num {
    font-size: 28px;
  }

  .home-page .why-block .stat-item .lbl {
    font-size: 10px;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
  :root {
    --site-header-height: 60px;
    --page-hero-height: 390px;
  }

  .page-hero,
  .work-hero,
  .tool-page .tool-hero {
    height: 390px !important;
  }

  .nav-links.mobile-open {
    columns: 2;
    column-gap: 30px;
  }

  .nav-links.mobile-open > li {
    break-inside: avoid;
  }

  .home-page .hero-console {
    padding-top: calc(var(--site-header-height) + 20px) !important;
  }
}

@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
  .mobile-submenu,
  .site-assistant {
    transition: none !important;
  }
}

/* Keep the Projects / Case Studies switcher centered and symmetrical on
   phones, Fold inner screens, and tablets. */
@media (max-width: 1040px) {
  .work-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 420px);
    min-width: 0;
    margin: -10px auto 26px;
    padding: 5px;
    gap: 6px;
    overflow: visible;
  }

  .work-tab {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    text-align: center;
    white-space: nowrap;
    scroll-snap-align: none;
  }

  .work-tabs {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .work-tabs::before {
    display: none;
  }
}

/* Projects page stability: keep content and surfaces steady instead of
   stacking several blur, glow, and delayed reveal animations at once. */
/* Pause decoration only. Cancelling every UI transition on every zoom event
   made the header, open cards, and assistant snap to their end states. */
body.motion-paused :is(.blob, .hc-bg, .hc-blob, .orange-ambient-glow,
  .orange-ambient-flow, .orange-ambient-ring, .orange-ambient-sparkles,
  .marquee-track, .footer-watermark, .trace-caret),
body.motion-paused .hero-bg img,
body.motion-paused :is(.flow-line, .cta-band, .work-tabs)::before,
body.motion-paused :is(.project-terminal, .project-detail-terminal)::after {
  animation-play-state: paused !important;
}

/* Animation may pause off-screen; UI transitions and focus remain available. */
.motion-region.motion-offscreen,
.motion-region.motion-offscreen *,
.motion-region.motion-offscreen::before,
.motion-region.motion-offscreen::after,
.motion-region.motion-offscreen *::before,
.motion-region.motion-offscreen *::after,
body.motion-paused .motion-region,
body.motion-paused .motion-region *,
body.motion-paused .motion-region::before,
body.motion-paused .motion-region::after,
body.motion-paused .motion-region *::before,
body.motion-paused .motion-region *::after {
  animation-play-state: paused !important;
}

/* Avoid scaling/rasterizing an entire large image behind the Work pages. */
.work-hero .hc-bg { animation: none; }
.project-page .blob, .project-page .hc-blob { will-change: auto; }
.project-page .project-detail-terminal-top > span { overflow-wrap: anywhere; }

@media (min-width: 1080px) {
  /* All desktop headlines share a natural-height grid cell. Autoplay no
     longer changes the hero height and shifts the sections below it. */
  .home-page .hc-copy .hero-rotator { display: grid; }
  .home-page .hc-copy .hero-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    visibility: hidden;
  }
  .home-page .hc-copy .hero-slide.active { visibility: visible; }
}

@media (max-width: 1079px), (hover: none), (pointer: coarse) {
  .liquid-bg .blob, .hc-blob {
    animation: none !important;
    filter: none !important;
    will-change: auto;
  }
  .hero-media .hero-bg img { animation: none; }
  .cap-card, .service-tile, .wide-card, .founder-card, .why-block,
  .flow-num, .btn-outline, .btn-outline-light {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .industry-marquee-wrap, .tech-marquee { touch-action: pan-y pinch-zoom !important; }
}

@media (max-width: 1079px) {
  /* Mobile uses the existing dots for deliberate headline changes. */
  .home-page .hc-copy .hero-slide:not(.active) { display: none; }
}

@media (max-width: 1040px) and (hover: none), (max-width: 1040px) and (pointer: coarse) {
  /* Flat, same-size faces avoid Safari's 3D backface flashes during pinch. */
  .flip-card { perspective: none; -webkit-perspective: none; }
  .flip-card .flip-inner, .flip-card.is-flipped .flip-inner {
    display: grid;
    min-height: 0;
    transform: none !important;
    transform-style: flat;
    -webkit-transform-style: flat;
    transition: none;
  }
  .flip-card .flip-front, .flip-card .flip-back {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-width: 0;
    transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .flip-card .flip-back { padding: 0; visibility: hidden; pointer-events: none; }
  .flip-card.is-flipped .flip-front { visibility: hidden; pointer-events: none; }
  .flip-card.is-flipped .flip-back { visibility: visible; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-region, .motion-region *, .motion-region::before,
  .motion-region::after, .motion-region *::before, .motion-region *::after {
    animation: none !important;
  }
  .reveal, .reveal-scale, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

.project-page .project-browser,
.project-page .project-grid,
.project-page .project-card,
.project-page .project-card * {
  box-sizing: border-box;
  min-width: 0;
}

.project-page .reveal,
.project-page .project-terminal-line {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.project-page .blob,
.project-page .project-browser::before,
.project-page .project-card,
.project-page .project-card-status,
.project-page .project-terminal-head b,
.project-page .project-terminal::after,
.project-page .btn-primary {
  animation: none !important;
}

.project-page .project-card::before {
  display: none;
}

@media (max-width: 1079px) {
  .project-page .project-grid,
  .project-page .project-card {
    width: 100%;
  }

  .project-page .project-card h3,
  .project-page .project-card p,
  .project-page .project-card li,
  .project-page .project-card a,
  .project-page .project-card span {
    overflow-wrap: anywhere;
  }

  .project-page .project-card {
    transform: none !important;
    transition: none !important;
  }

  .project-page .project-detail-panel {
    display: none;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    transition: none;
  }

  .project-page .project-card.is-open .project-detail-panel {
    display: block;
    max-height: none;
  }

  .project-page .project-card.is-open:hover {
    transform: none;
  }

  .project-page .hc-blob,
  .project-page .project-detail-terminal::after,
  .project-page .trace-caret {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .project-page .project-filters {
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
  }

  .project-page .project-card,
  .project-page .project-card.is-open {
    grid-column: 1;
    width: 100%;
    overflow: hidden;
  }

  .project-page .project-detail-inner {
    width: 100%;
  }

  .project-page .project-detail-terminal-screen {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767px) {
  .home-page .hero-console {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 32px !important;
  }
}

@media (max-width: 1079px) {
  /* The touch hero should end after its actual copy and controls. Do not
     reserve a viewport-sized panel when the interactive graph is hidden. */
  .home-page .hero-console {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 32px !important;
  }

  .home-page .hc-copy .hero-rotator {
    min-height: 0 !important;
    height: auto !important;
  }

  .home-page .hc-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .home-page .hc-copy .hero-rotator {
    width: 100%;
    max-width: 720px;
  }

  .home-page .hc-copy .hero-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .home-page .hc-copy h1,
  .home-page .hc-copy p.lead {
    width: 100%;
  }

  .home-page .hc-copy .hero-actions {
    margin-left: auto;
    margin-right: auto;
  }

  .home-page .hc-copy .hero-dots {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  /* Match the compact Work hero's mobile presence without fixing the Home
     hero to a viewport height. The active slide still determines the frame. */
  .home-page .hero-console {
    padding-top: calc(var(--site-header-height) + 32px) !important;
    padding-bottom: 54px !important;
  }

  .home-page .hc-copy h1 {
    max-width: 15ch;
    font-size: clamp(34px, 9.6vw, 42px) !important;
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .home-page .hc-copy p.lead {
    max-width: 36rem;
    font-size: 14.5px;
    line-height: 1.55;
  }

  .home-page .hc-copy .hero-dots {
    margin-top: 22px;
  }

  /* On phones, full-width stacked actions match the reference and let the
     hero height follow the active slide instead of reserving empty columns. */
  .home-page .hc-copy .hero-actions {
    grid-template-columns: 1fr !important;
    width: min(100%, 364px) !important;
    gap: 10px !important;
  }

  .home-page .hc-copy .hero-actions .btn {
    width: 100% !important;
    min-height: 52px;
    font-size: 12px;
  }
}

/* Tool pages: let the maturity graphic and long assessment copy fit on phones
   instead of centering the combined stack inside a fixed, clipped hero. */
@media (max-width: 767px) {
  .tool-page .tool-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .tool-page .tool-hero > .wrap {
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    padding-top: 42px !important;
    padding-bottom: 56px !important;
  }

  .tool-page .tool-hero-grid {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 30px !important;
  }

  .tool-page .tool-hero-grid > div:first-child {
    flex: 0 0 auto;
  }

  .tool-page .maturity-rings {
    width: min(260px, 70vw) !important;
    margin: 0 auto !important;
  }
}

/*
  Touch stability fallback.
  Mobile browsers can repaint fixed, filtered, translucent layers while the
  visual viewport moves under the browser chrome. Keep the colour and layout,
  but make those layers ordinary page paint and stop decorative invalidations.
  Desktop retains the full liquid-glass treatment.
*/
@media (max-width: 1040px), (hover: none), (pointer: coarse) {
  body::before,
  body::after,
  #dot-spotlight {
    position: absolute;
  }

  #dot-spotlight {
    display: none !important;
  }

  .liquid-bg {
    position: absolute;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
  }

  .liquid-bg .blob,
  .hc-blob {
    filter: none !important;
    will-change: transform !important;
  }

  /*
    Backdrop blur is the most common mobile scroll-flicker trigger in this
    design. Solid/translucent surfaces keep their colours without forcing a
    full-screen backdrop recomposite on every viewport tick.
  */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    filter: none !important;
  }

  .orange-ambient-canvas {
    contain: strict;
    transform: translateZ(0);
    will-change: contents;
  }

  .home-page .orange-ambient-glow,
  .home-page .orange-ambient-flow,
  .home-page .orange-ambient-ring,
  .home-page .orange-ambient-sparkles,
  .liquid-bg .blob,
  .hc-blob,
  .hero-media .hero-bg img,
  .work-hero .hc-bg {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
  }

  .home-page .orange-ambient-glow-one {
    display: block;
    animation: mobileAmbientDriftOne 18s ease-in-out infinite alternate !important;
  }

  .home-page .orange-ambient-glow-two {
    display: block;
    animation: mobileAmbientDriftTwo 22s ease-in-out infinite alternate !important;
  }

  .home-page .orange-ambient-glow-three {
    display: block;
    animation: mobileAmbientBreathe 14s ease-in-out infinite alternate !important;
  }

  .home-page .orange-ambient-flow {
    display: block;
    filter: none;
    animation: mobileAmbientFlow 24s ease-in-out infinite alternate !important;
  }

  .home-page .orange-ambient-ring {
    animation: orangeRotate 36s linear infinite !important;
  }

  .home-page .orange-ambient-sparkles {
    animation: mobileAmbientSparkle 8s ease-in-out infinite alternate !important;
  }

  .liquid-bg .blob-1 {
    animation: mobileBlobDriftOne 28s ease-in-out infinite alternate !important;
  }

  .liquid-bg .blob-2 {
    animation: mobileBlobDriftTwo 34s ease-in-out infinite alternate !important;
  }

  .liquid-bg .blob-3 {
    animation: mobileBlobDriftThree 30s ease-in-out infinite alternate !important;
  }

  .hc-blob-a {
    animation: mobileBlobDriftOne 26s ease-in-out infinite alternate !important;
  }

  .hc-blob-b {
    animation: mobileBlobDriftTwo 30s ease-in-out infinite alternate !important;
  }

  .hero-media .hero-bg img,
  .work-hero .hc-bg {
    animation: mobileHeroDrift 28s ease-in-out infinite alternate !important;
  }
}

@keyframes mobileAmbientDriftOne {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8vw, 5vh, 0) scale(1.08); }
}

@keyframes mobileAmbientDriftTwo {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-7vw, -5vh, 0) scale(1.1); }
}

@keyframes mobileAmbientBreathe {
  from { transform: translate3d(0, 0, 0) scale(.96); opacity: .1; }
  to { transform: translate3d(2vw, -2vh, 0) scale(1.12); opacity: .2; }
}

@keyframes mobileAmbientFlow {
  from { transform: translate3d(-3%, -1%, 0) rotate(-7deg) scale(1); }
  to { transform: translate3d(3%, 2%, 0) rotate(-4deg) scale(1.04); }
}

@keyframes mobileAmbientSparkle {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .12; }
  to { transform: translate3d(1%, -1%, 0) scale(1.025); opacity: .22; }
}

@keyframes mobileBlobDriftOne {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(30px, 22px, 0) scale(1.05); }
}

@keyframes mobileBlobDriftTwo {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-24px, 28px, 0) scale(1.06); }
}

@keyframes mobileBlobDriftThree {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-20px, -22px, 0) scale(1.04); }
}

@keyframes mobileHeroDrift {
  from { transform: translate3d(0, 0, 0) scale(1.01); }
  to { transform: translate3d(-1.5%, 1%, 0) scale(1.045); }
}