/* Easmit responsive hardening — 2026-09-05
   Keeps the desktop composition intact while giving tablets, phones,
   short laptop windows, touch devices, and safe-area screens a natural layout. */

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.stage,
.site-view,
.cover,
.site-page {
  width: 100%;
  max-width: 100vw;
}

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

.cover-content > *,
.page-layout > *,
.service-row > *,
.mission-hero > *,
.mission-team-grid > *,
.mission-principles > *,
.scan-console-grid > * {
  min-width: 0;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

button,
.dock-item,
.outline-button,
.scan-cta,
.send-button,
.mission-primary,
.mission-secondary {
  min-height: 44px;
}

/* Prevent long copy or URLs from forcing a page wider than the viewport. */
.service-row-copy,
.project-summary,
.page-copy,
.mission-section,
.scan-console,
.contact-form,
.pricing-column {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Tablet / narrow-window layout
   -------------------------------------------------------------------------- */
@media (max-width: 1050px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .stage {
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .cover.is-active {
    position: relative;
    inset: auto;
  }

  .hero-video,
  .cinematic-shade,
  .scanlines {
    position: fixed;
    width: 100vw;
    height: 100svh;
  }

  /* The home page becomes one readable vertical flow instead of squeezing
     the headline and scanner into two narrow columns. */
  .cover {
    min-height: 100svh;
    height: auto;
    display: block;
    padding: 20px clamp(20px, 4vw, 38px) 42px;
  }

  .site-header {
    min-height: 62px;
  }

  .brand {
    width: clamp(180px, 28vw, 230px);
  }

  .cover-content {
    display: block;
    width: 100%;
    margin-top: clamp(28px, 5vh, 54px);
  }

  .hero-copy {
    width: min(100%, 760px);
    margin-top: 0;
    padding-left: clamp(14px, 2.5vw, 22px);
  }

  .hero-copy::before {
    height: 100%;
    min-height: 260px;
  }

  h1 .headline-primary {
    max-width: 760px;
    font-size: clamp(42px, 7.4vw, 66px);
    line-height: 1;
  }

  h1 .headline-accent {
    max-width: 740px;
    font-size: clamp(21px, 3.5vw, 30px);
  }

  .headline-support {
    max-width: 700px;
    font-size: clamp(14px, 1.8vw, 17px);
  }

  .service-manifest {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 720px);
    min-height: 0;
    margin: clamp(34px, 5vh, 52px) 0 0 clamp(14px, 2vw, 20px);
    padding: 26px clamp(22px, 3.5vw, 34px) 24px;
  }

  .scan-title {
    max-width: 620px;
    font-size: clamp(27px, 4.2vw, 36px);
  }

  .scan-description {
    max-width: 600px;
  }

  .scan-visual {
    height: clamp(220px, 34vw, 280px);
  }

  /* The home navigation joins normal document flow. This prevents it from
     covering the scanner on iPads and narrow browser windows. */
  .home-dock {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 900px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    margin: 34px auto 0;
  }

  .home-dock .dock-item {
    min-height: 84px;
    padding: 17px 18px 20px;
  }

  .home-dock .dock-label {
    font-size: clamp(17px, 2.4vw, 21px);
    white-space: normal;
  }

  /* Inner-page navigation remains reachable without consuming an excessive
     amount of screen space on tablets. */
  .page-dock {
    position: fixed !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .page-dock .dock-item {
    min-height: 66px !important;
    padding: 12px 10px 15px !important;
    border-radius: 17px !important;
  }

  .page-dock .dock-item::before { border-radius: 17px !important; }
  .page-dock .dock-item::after { inset: 7px !important; border-radius: 11px !important; }
  .page-dock .dock-label { font-size: clamp(12px, 1.8vw, 16px) !important; white-space: normal; }
  .page-dock .dock-pulse { left: 12px !important; right: 12px !important; bottom: 8px !important; }

  .page-layout {
    padding-bottom: 142px;
  }

  .services-panel,
  .project-panel {
    min-height: 0;
  }

  .service-row {
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 20px 10px;
  }

  .service-icon {
    width: 78px;
    height: 78px;
  }

  .service-icon::before { inset: -8px; }
  .service-icon::after { inset: -15px; }
  .service-icon svg { width: 40px; height: 40px; }

  .outline-button {
    min-width: 142px;
    padding: 13px 12px;
  }

  .contact-page {
    padding-bottom: 142px;
  }

  /* Sound belongs to the cinematic home experience. Hiding it on inner
     mobile/tablet pages avoids collision with the fixed navigation dock. */
  body:not([data-page="home"]) .sound-control {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Natural Mission scrolling on phones / compact tablets
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mission-page,
  .mission-page.is-active {
    position: relative !important;
    inset: auto !important;
    min-height: 100svh;
    overflow: visible;
  }

  .mission-scroll {
    position: relative;
    inset: auto;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior: auto;
  }

  .mission-section {
    width: 100%;
    height: auto;
    min-height: auto;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    padding: 116px clamp(22px, 5vw, 44px) 128px;
  }

  .mission-section::after {
    left: clamp(22px, 5vw, 44px);
    right: clamp(22px, 5vw, 44px);
  }

  .mission-hero {
    min-height: 100svh;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 42px;
  }

  .mission-team-grid,
  .mission-principles {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .mission-stage-cards {
    grid-template-columns: 1fr;
  }

  .mission-progress {
    display: none;
  }

  .mission-signal {
    width: min(72vw, 450px);
  }

  .mission-close {
    min-height: 82svh;
  }
}

/* --------------------------------------------------------------------------
   Phone layout
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --mobile-edge: clamp(16px, 5vw, 22px);
  }

  .cover {
    padding:
      max(16px, env(safe-area-inset-top))
      max(var(--mobile-edge), env(safe-area-inset-right))
      calc(30px + env(safe-area-inset-bottom))
      max(var(--mobile-edge), env(safe-area-inset-left));
  }

  .site-header {
    min-height: 54px;
  }

  .brand,
  .page-brand {
    width: clamp(160px, 49vw, 188px);
  }

  .cover-content {
    margin-top: clamp(24px, 4vh, 38px);
  }

  .hero-copy {
    padding-left: 14px;
  }

  h1 .headline-primary {
    max-width: 100%;
    font-size: clamp(36px, 10.8vw, 50px);
    line-height: 1.02;
    letter-spacing: -.047em;
  }

  h1 .headline-accent {
    max-width: 100%;
    margin-top: 17px;
    font-size: clamp(19px, 5.8vw, 27px);
    line-height: 1.18;
  }

  .headline-support {
    max-width: 100%;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.52;
  }

  .service-manifest {
    width: calc(100% - 12px);
    margin: 30px 0 0 12px;
    padding: 22px 18px 20px 23px;
    border-radius: 22px;
  }

  .service-manifest::after { border-radius: 22px; }
  .scan-watermark { font-size: clamp(72px, 25vw, 104px); }
  .scan-title { font-size: clamp(24px, 7.3vw, 31px); }
  .scan-description { font-size: 13px; line-height: 1.48; }
  .scan-visual { height: clamp(205px, 60vw, 238px); }
  .scan-center { width: clamp(106px, 31vw, 122px); height: clamp(106px, 31vw, 122px); }

  .home-dock {
    width: 100%;
    margin-top: 24px;
  }

  .home-dock .dock-item {
    min-height: 76px;
    padding: 14px 12px 17px;
  }

  .home-dock .dock-label {
    font-size: clamp(15px, 4.4vw, 19px);
  }

  /* Keep controls clear of iPhone/Android safe areas. */
  .page-brand {
    top: max(14px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
  }

  .page-layout {
    padding:
      calc(100px + env(safe-area-inset-top))
      max(15px, env(safe-area-inset-right))
      calc(176px + env(safe-area-inset-bottom))
      max(15px, env(safe-area-inset-left));
  }

  .page-copy {
    margin-bottom: 30px;
  }

  .page-copy h2 {
    font-size: clamp(44px, 13.5vw, 64px);
  }

  .page-lead {
    font-size: clamp(18px, 5.2vw, 21px);
  }

  .services-panel {
    padding: 12px;
    border-radius: 24px;
  }

  .white-tech-panel::after {
    inset: 9px;
    border-radius: 17px;
  }

  .service-row {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    padding: 21px 5px;
  }

  .service-icon {
    width: 62px;
    height: 62px;
  }

  .service-icon svg { width: 32px; height: 32px; }
  .service-icon::before { inset: -6px; }
  .service-icon::after { display: none; }

  .service-row-copy h3 {
    margin-top: 5px;
    font-size: clamp(19px, 5.3vw, 22px);
  }

  .service-row-copy p {
    font-size: 12.5px;
    line-height: 1.48;
  }

  .outline-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 50px;
    margin-top: 7px;
    font-size: 13px;
  }

  .project-panel {
    min-height: 0;
    padding: 16px 10px 20px;
    border-radius: 24px;
  }

  .project-stage {
    padding: 10px 0;
  }

  .project-browser {
    width: 100%;
  }

  .browser-screen {
    width: 100%;
    height: auto;
    min-height: 210px;
    aspect-ratio: 16 / 10;
  }

  .project-summary,
  .project-meta {
    padding-inline: 12px;
  }

  .project-meta {
    grid-template-columns: 1fr 1fr;
  }

  .contact-page {
    padding:
      calc(102px + env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      calc(176px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .contact-form {
    width: 100%;
    padding: 30px 17px 24px;
    border-radius: 24px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .scan-form input {
    font-size: 16px; /* prevents automatic zoom on iOS */
  }

  .form-success {
    position: fixed;
    inset: auto max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left));
    top: 50%;
    width: auto;
    padding: 42px 24px;
    transform: translateY(-50%) scale(.86);
  }

  .form-success.is-visible {
    transform: translateY(-50%) scale(1);
  }

  .form-success h2 { font-size: 34px; }

  .page-dock {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .page-dock .dock-item {
    min-height: 58px !important;
    padding: 10px 8px 13px !important;
    border-radius: 15px !important;
  }

  .page-dock .dock-label {
    font-size: clamp(12px, 3.9vw, 15px) !important;
    line-height: 1.1;
  }

  .mission-section {
    padding:
      calc(104px + env(safe-area-inset-top))
      max(19px, env(safe-area-inset-right))
      112px
      max(19px, env(safe-area-inset-left));
  }

  .mission-hero-copy {
    padding-left: 15px;
  }

  .mission-hero-copy h2 {
    font-size: clamp(40px, 11.5vw, 52px);
    line-height: .98;
  }

  .mission-hero-lead {
    margin-top: 22px;
    font-size: clamp(18px, 5.4vw, 23px);
  }

  .mission-hero-body,
  .mission-statement p,
  .mission-stage-heading p,
  .principles-intro p {
    font-size: 15px;
  }

  .mission-signal {
    width: min(86vw, 390px);
  }

  .mission-statement h2,
  .mission-stage-heading h2,
  .principles-intro h2,
  .mission-close-inner h2 {
    font-size: clamp(38px, 10.8vw, 48px);
  }

  .mission-stage-cards,
  .principles-list {
    gap: 14px;
  }

  .stage-card,
  .principle {
    min-height: 0;
    padding: 25px 22px;
  }

  .stage-card p {
    min-height: 0;
  }

  .mission-close-actions {
    width: 100%;
  }

  .mission-primary,
  .mission-secondary {
    width: min(100%, 340px);
    min-height: 50px;
  }

  /* Pricing and scanner dialogs use the full safe viewport and scroll
     internally, so the close button/results never disappear off-screen. */
  .pricing-overlay {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
  }

  .pricing-columns {
    height: auto;
    padding: 55px 10px 16px;
  }

  .pricing-column {
    padding: 22px 13px;
  }

  .scan-overlay {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .scan-console {
    min-height: calc(100svh - 16px);
    border-radius: 20px;
  }

  .scan-console-copy {
    padding: 56px 18px 24px;
  }

  .scan-console-stage {
    min-height: 570px;
  }

  .scan-idle,
  .scan-running,
  .scan-error,
  .scan-results {
    padding: 30px 18px;
  }

  .scan-result-head {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 13px;
  }

  .scan-grade {
    width: 78px;
    font-size: 48px;
  }

  .scan-score-grid {
    grid-template-columns: 1fr;
  }
}

/* Small phones: 320–430px class devices. */
@media (max-width: 430px) {
  .brand { width: 158px; }
  .skip-intro { top: 18px; right: 18px; font-size: 9px; }

  body.is-intro .intro-interface {
    left: 70px;
    right: 16px;
  }

  .intro-brand {
    display: none;
  }

  h1 .headline-primary {
    font-size: clamp(34px, 10.5vw, 44px);
  }

  h1 .headline-accent {
    font-size: clamp(18px, 5.6vw, 23px);
  }

  .service-manifest {
    width: calc(100% - 8px);
    margin-left: 8px;
    padding-left: 18px;
    padding-right: 14px;
  }

  .scan-visual {
    height: 198px;
  }

  .scan-node {
    padding: 6px 7px;
    font-size: 9px;
  }

  .scan-node--website { left: 3px; }
  .scan-node--search { right: 3px; }
  .scan-node--reputation { right: 1px; }
  .scan-node--conversion { right: 8px; }
  .scan-node--systems { left: 4px; }

  .home-dock .dock-item {
    min-height: 70px;
  }

  .home-dock .dock-label {
    font-size: 14px;
  }

  .service-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
  }

  .service-icon {
    width: 52px;
    height: 52px;
  }

  .service-icon svg {
    width: 27px;
    height: 27px;
  }

  .service-row-copy h3 {
    font-size: 18px;
  }

  .project-meta {
    grid-template-columns: 1fr;
  }

  .mission-signal-label {
    font-size: 9px;
  }

  .scan-result-head {
    grid-template-columns: 1fr;
  }
}

/* Very short landscape screens (phones turned sideways / small split-screen
   windows) must be scrollable rather than forcing a desktop-height composition. */
@media (max-width: 1000px) and (max-height: 600px) {
  body,
  .stage {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .cover {
    min-height: 100svh;
    height: auto;
    display: block;
    padding-bottom: 30px;
  }

  .cover-content {
    display: block;
    margin-top: 22px;
  }

  .service-manifest {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 720px);
    margin: 28px 0 0 12px;
  }

  .home-dock {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 24px auto 0;
  }

  .mission-page.is-active,
  .site-page.is-active {
    min-height: 100svh;
  }
}

/* Desktop/laptop windows with limited vertical height: reduce spacing before
   allowing any important content to collide with the dock. */
@media (min-width: 1051px) and (max-height: 820px) {
  .cover {
    padding-top: 20px;
  }

  .cover-content {
    margin-top: 24px;
  }

  .brand {
    width: clamp(180px, 14vw, 230px);
  }

  h1 .headline-primary {
    font-size: clamp(34px, 3.65vw, 56px);
  }

  h1 .headline-accent {
    margin-top: 14px;
    font-size: clamp(18px, 1.65vw, 25px);
  }

  .headline-support {
    margin-top: 13px;
    font-size: 13px;
  }

  .service-manifest {
    top: -48px;
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .scan-title {
    margin-top: 11px;
    font-size: clamp(23px, 1.85vw, 29px);
  }

  .scan-description {
    margin-top: 8px;
    font-size: 12px;
  }

  .scan-visual {
    height: 180px;
    margin-top: 10px;
  }

  .scan-cta {
    margin-top: 10px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .home-dock {
    bottom: 24px;
    min-height: 76px;
  }

  .home-dock .dock-item {
    min-height: 76px;
    padding-top: 14px;
    padding-bottom: 17px;
  }
}

/* Touch-first devices should not depend on hover-only affordances. */
@media (hover: none), (pointer: coarse) {
  .dock-item:hover,
  .service-row:hover,
  .principle:hover,
  .stage-card:hover,
  .outline-button:hover,
  .mission-primary:hover,
  .mission-secondary:hover {
    transform: none;
  }
}

/* ========================================================================== */
/* Mobile home-navigation reliability pass — iOS / tall phones               */
/* ========================================================================== */
/* On phones the four primary section tabs are navigation, not page content.
   Keep them pinned above the browser safe area so they can never end up below
   a long scanner card or outside Safari's reachable scroll range. */
@media (max-width: 760px) {
  html {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="home"] .stage {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  body[data-page="home"] .cover.site-view.is-active {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    /* Reserve enough document space for the two-row fixed dock plus the
       iPhone home indicator. This lets the scanner's CTA scroll completely
       above the dock instead of disappearing behind it. */
    padding-bottom: calc(158px + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="home"] .cover-content {
    position: relative;
    z-index: 1;
    overflow: visible;
  }

  body[data-page="home"] .service-manifest {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="home"] .home-dock {
    position: fixed !important;
    z-index: 60 !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  body[data-page="home"] .home-dock .dock-item {
    min-height: 56px !important;
    padding: 10px 8px 13px !important;
    border-radius: 15px !important;
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
  }

  body[data-page="home"] .home-dock .dock-item::before {
    border-radius: 15px !important;
  }

  body[data-page="home"] .home-dock .dock-item::after {
    inset: 7px !important;
    border-radius: 10px !important;
  }

  body[data-page="home"] .home-dock .dock-label {
    font-size: clamp(12px, 3.8vw, 15px) !important;
    line-height: 1.08;
    white-space: normal;
  }

  body[data-page="home"] .home-dock .dock-pulse {
    left: 14px !important;
    right: 14px !important;
    bottom: 8px !important;
  }

  /* The sound control used to occupy the same bottom-left area as the dock.
     Lift it above the navigation so every control remains tappable. */
  body[data-page="home"] .sound-control {
    left: max(14px, env(safe-area-inset-left)) !important;
    bottom: calc(134px + env(safe-area-inset-bottom)) !important;
    z-index: 61;
  }
}

/* Extra room for compact-height phones and landscape orientation. The earlier
   short-screen rule intentionally makes the dock flow with content; override
   that here so primary navigation remains reachable on touch devices. */
@media (max-width: 760px) and (max-height: 700px) {
  body[data-page="home"] .cover.site-view.is-active {
    padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="home"] .home-dock {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
}

/* Global mobile dock: use the navigation that lives outside the cover.
   This avoids iOS Safari treating a fixed child of a long/transitioning cover
   as part of that cover's scroll geometry. The global dock can always stay
   attached to the visual viewport. */
@media (max-width: 760px) {
  body[data-page="home"] .home-dock {
    display: none !important;
  }

  body[data-page="home"] .page-dock.is-visible {
    position: fixed !important;
    z-index: 80 !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    margin: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-page="home"] .page-dock.is-visible .dock-item {
    min-height: 56px !important;
    padding: 10px 8px 13px !important;
    border-radius: 15px !important;
  }

  body[data-page="home"] .page-dock.is-visible .dock-item::before {
    border-radius: 15px !important;
  }

  body[data-page="home"] .page-dock.is-visible .dock-item::after {
    inset: 7px !important;
    border-radius: 10px !important;
  }

  body[data-page="home"] .page-dock.is-visible .dock-label {
    font-size: clamp(12px, 3.8vw, 15px) !important;
    line-height: 1.08;
    white-space: normal;
  }

  body[data-page="home"] .page-dock.is-visible .dock-pulse {
    left: 14px !important;
    right: 14px !important;
    bottom: 8px !important;
  }
}

/* ========================================================================== */
/* Mobile scanner removal — iPhone / Android                                  */
/* ========================================================================== */
/* The desktop Digital Presence Scanner is intentionally omitted on phones.
   This is a mobile-only presentation change: tablet/desktop widths retain the
   original scanner and scan dialog. Removing the tall card keeps the four
   primary navigation tabs permanently reachable in the visual viewport. */
@media (max-width: 760px) {
  body[data-page="home"] .service-manifest,
  .scan-overlay {
    display: none !important;
  }

  body[data-page="home"] .cover-content {
    display: block !important;
    width: 100% !important;
    margin-top: clamp(22px, 4dvh, 38px) !important;
    padding-bottom: 0 !important;
  }

  body[data-page="home"] .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  body[data-page="home"] .cover.site-view.is-active {
    min-height: 100dvh !important;
    /* Space for the two-row fixed navigation dock. */
    padding-bottom: calc(154px + env(safe-area-inset-bottom)) !important;
  }

  /* Make the global dock the authoritative mobile navigation and keep it
     comfortably above Safari's home-indicator/browser chrome. */
  body.is-revealed[data-page="home"] .page-dock.is-visible {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* With the scanner removed there is no control that needs the old lifted
     sound-button position; keep audio unobtrusively above the nav dock. */
  body[data-page="home"] .sound-control {
    bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }
}

/* Phone landscape: an iPhone can exceed 760 CSS px when rotated. Keep the
   same mobile behavior on coarse-pointer, short-height devices so rotating a
   phone never brings the scanner back or strands the primary navigation. */
@media (hover: none) and (pointer: coarse) and (max-height: 600px) and (max-width: 1100px) {
  body[data-page="home"] .service-manifest,
  .scan-overlay {
    display: none !important;
  }

  body[data-page="home"] .home-dock {
    display: none !important;
  }

  body.is-revealed[data-page="home"] .page-dock.is-visible {
    display: grid !important;
    position: fixed !important;
    z-index: 80 !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body[data-page="home"] .cover.site-view.is-active {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

/* ========================================================================== */
/* Launch-critical phone experience — 2026-09-05                              */
/* ========================================================================== */
/* Phones use a deliberately simpler interaction model. Desktop/tablet visual
   behavior is untouched. The priority here is: every page opens immediately,
   every page scrolls naturally, and the four primary tabs are always tappable. */
@media (max-width: 760px) {
  html, body {
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }

  body {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }

  .stage {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Remove the cinematic intro on phones. Mobile Safari autoplay varies with
     power/data/accessibility state; the phone experience now opens reliably. */
  .hero-video,
  .intro-interface,
  .skip-intro,
  .sound-control {
    display: none !important;
  }

  .cinematic-shade,
  .scanlines {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    pointer-events: none !important;
  }

  /* Every inactive page is genuinely gone from layout/hit-testing. */
  .site-view:not(.is-active) {
    display: none !important;
  }

  .site-view.is-active,
  .site-page.is-active,
  .cover.site-view.is-active {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
  }

  /* The primary mobile navigation is permanent, compact, and always above
     content. It is the single navigation surface on every page. */
  .page-dock,
  .page-dock.is-visible,
  body.is-revealed .page-dock,
  body.is-revealed .page-dock.is-visible {
    display: grid !important;
    position: fixed !important;
    z-index: 10000 !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
  }

  .page-dock .dock-item {
    min-height: 50px !important;
    padding: 9px 7px 11px !important;
    border-radius: 13px !important;
  }

  .page-dock .dock-label {
    font-size: clamp(11px, 3.35vw, 14px) !important;
    line-height: 1.05 !important;
  }

  .page-dock .dock-item::before { border-radius: 13px !important; }
  .page-dock .dock-item::after { inset: 5px !important; border-radius: 9px !important; }
  .page-dock .dock-pulse { bottom: 6px !important; left: 12px !important; right: 12px !important; }

  /* HOME: scanner remains intentionally removed on phones. */
  body[data-page="home"] .service-manifest,
  .scan-overlay {
    display: none !important;
  }

  body[data-page="home"] .cover {
    padding-bottom: calc(138px + env(safe-area-inset-bottom)) !important;
  }

  /* MISSION: no reveal blur or scroll-snap effects on phones. Every section
     is ordinary readable document content; especially the final CTA page. */
  .mission-page.is-active,
  .mission-scroll {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .mission-section,
  .mission-close {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    padding: calc(96px + env(safe-area-inset-top)) 20px 92px !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
  }

  .mission-section:last-child {
    padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
  }

  .mission-reveal,
  .mission-reveal.is-in-view,
  .mission-close-inner,
  .mission-close-inner * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .mission-close-inner {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .mission-close-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .mission-primary,
  .mission-secondary {
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
  }

  /* SERVICES: turn the desktop panel into three clean, native-feeling cards.
     No dense side-by-side geometry and no clipped pricing experience. */
  .services-page.is-active .page-layout,
  .work-page.is-active .page-layout {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: calc(92px + env(safe-area-inset-top)) 16px calc(165px + env(safe-area-inset-bottom)) !important;
  }

  .services-page .page-copy,
  .work-page .page-copy {
    margin: 0 0 24px !important;
  }

  .services-panel {
    display: grid !important;
    gap: 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .services-panel::before,
  .services-panel::after {
    display: none !important;
  }

  .service-row {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(128,204,253,.22) !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, rgba(14,27,50,.96), rgba(5,14,31,.96)) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.24) !important;
  }

  .service-row + .service-row {
    border-top: 1px solid rgba(128,204,253,.22) !important;
  }

  .service-icon {
    width: 52px !important;
    height: 52px !important;
  }

  .service-row-copy h3,
  .service-row-copy h3 a {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  .service-row-copy p {
    color: rgba(236,246,255,.72) !important;
    font-size: 13.5px !important;
    line-height: 1.48 !important;
  }

  .service-number { color: var(--aqua) !important; }

  .outline-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 52px !important;
    margin-top: 5px !important;
    border-radius: 13px !important;
  }

  /* Pricing overlay is not part of the phone flow; mobile pricing buttons go
     directly to Contact with the matching service pre-selected. */
  .pricing-overlay {
    display: none !important;
  }

  /* WORK: make the project page an ordinary vertical page. */
  .work-page.is-active,
  .contact-page.is-active {
    display: block !important;
    position: relative !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  .project-panel {
    width: 100% !important;
    min-height: 0 !important;
    padding: 15px 10px 20px !important;
    overflow: hidden !important;
  }

  .browser-screen {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .project-meta {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* CONTACT: remove the full-page blur on phones and keep the form in normal
     flow. Inputs remain 16px to prevent iOS zoom. */
  .contact-page.is-active {
    padding: calc(92px + env(safe-area-inset-top)) 14px calc(165px + env(safe-area-inset-bottom)) !important;
  }

  .contact-page::before,
  .contact-blur {
    display: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .contact-form {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 27px 17px 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .contact-form textarea { min-height: 130px !important; }
  .send-button { width: 100% !important; min-height: 54px !important; }

  /* Never dim/disable the mobile navigation because an overlay was opened. */
  body.pricing-open .page-dock,
  body.scan-open .page-dock {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* ========================================================================== */
/* Dedicated iOS-safe primary navigation — 2026-09-06                        */
/* ========================================================================== */
/* This is a separate top-level control surface for phones. It deliberately
   avoids backdrop filters, masks, transforms and page-level stacking contexts,
   which can produce inconsistent hit testing in mobile Safari. */
.mobile-primary-nav {
  display: none;
}

@media (max-width: 760px) {
  /* The old inner-page dock remains available for desktop/tablet only. */
  body .page-dock,
  body.is-revealed .page-dock,
  body .page-dock.is-visible,
  body.is-revealed .page-dock.is-visible,
  body .home-dock,
  body.is-revealed .home-dock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-primary-nav {
    position: fixed !important;
    z-index: 2147483647 !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .mobile-primary-nav button {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 10px 8px 13px !important;
    overflow: hidden !important;
    border: 1px solid rgba(160,208,255,.24) !important;
    border-radius: 14px !important;
    outline: none !important;
    color: #eef5ff !important;
    background: #09152d !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07) !important;
    font: 680 clamp(12px, 3.55vw, 15px)/1.08 "Inter", Arial, sans-serif !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: rgba(128,204,253,.18) !important;
  }

  .mobile-primary-nav button::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border: 1px solid rgba(128,204,253,.08);
    border-radius: 9px;
    pointer-events: none;
  }

  .mobile-primary-nav button span,
  .mobile-primary-nav button i {
    pointer-events: none !important;
  }

  .mobile-primary-nav button i {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 1px;
    overflow: hidden;
    background: rgba(128,204,253,.18);
  }

  .mobile-primary-nav button i::after {
    content: "";
    display: block;
    width: 30%;
    height: 100%;
    background: #80ccfd;
    transform: translateX(-120%);
  }

  .mobile-primary-nav button.is-current {
    border-color: rgba(128,204,253,.58) !important;
    color: #fff !important;
    background: #10275a !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.38), 0 0 0 1px rgba(128,204,253,.14) !important;
  }

  .mobile-primary-nav button.is-current i::after {
    width: 100%;
    transform: none;
  }

  /* Keep the final content comfortably above the permanent two-row control. */
  .services-page.is-active .page-layout,
  .work-page.is-active .page-layout,
  .contact-page.is-active,
  .mission-section:last-child,
  body[data-page="home"] .cover.site-view.is-active {
    padding-bottom: calc(182px + env(safe-area-inset-bottom)) !important;
  }
}

/* Phone landscape can exceed 760 CSS pixels; keep the same dedicated nav. */
@media (hover: none) and (pointer: coarse) and (max-height: 600px) and (max-width: 1100px) {
  body .page-dock,
  body.is-revealed .page-dock,
  body .page-dock.is-visible,
  body.is-revealed .page-dock.is-visible,
  body .home-dock,
  body.is-revealed .home-dock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-primary-nav {
    position: fixed !important;
    z-index: 2147483647 !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .mobile-primary-nav button {
    min-height: 50px !important;
    padding: 9px 6px 12px !important;
    border: 1px solid rgba(160,208,255,.24) !important;
    border-radius: 13px !important;
    color: #eef5ff !important;
    background: #09152d !important;
    font: 680 clamp(10px, 1.6vw, 13px)/1.05 "Inter", Arial, sans-serif !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .mobile-primary-nav button span,
  .mobile-primary-nav button i { pointer-events: none !important; }
  .mobile-primary-nav button.is-current { background: #10275a !important; border-color: rgba(128,204,253,.58) !important; }
}

/* The legacy dock must also stay hidden on Home, where an earlier mobile rule
   has extra selector specificity. The dedicated mobile nav is the only phone
   navigation surface in this build. */
@media (max-width: 760px) {
  body.is-revealed[data-page="home"] .page-dock,
  body.is-revealed[data-page="home"] .page-dock.is-visible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}