/* Approved responsive contract. Desktop designs and Relax remain independent.
 * Landscape tablets from 1051 CSS px retain text + visual in the first screen.
 * Below that width (and on portrait tablets), content flows without collisions.
 */
body:not(.relax) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) > * {
  min-width: 0;
}

/* Both external depth-ruler families need clear air beside the hero visual.
 * At 1366px the closest family has only 24px left, including its tick marks.
 * Hide before contact; internal instruments (e.g. .lost-depth) stay intact. */
@media (max-width: 1366px) {
  body:not(.relax) :is(.hero, .dev-hero, .portfolio-hero) > :is(.depth-scale, .portfolio-depth) {
    display: none !important;
  }
}

@media (max-width: 1050px), (orientation: portrait) and (max-width: 1100px) {
  body:not(.relax) :is(.hero, .portfolio-hero, .contacts-hero, .about-hero, .trademark-hero) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
    align-items: start !important;
  }
  /* Match copy classes as tokens: additional page classes (e.g. not-found-copy)
   * must never make the text block inherit the visual's centred 720px slot. */
  body:not(.relax) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) > :not(:is(.hero-copy, .portfolio-hero-copy, .contacts-hero-copy, .about-hero-copy, .trademark-hero-copy)) {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }
  body:not(.relax) .dev-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 88px !important;
  }
  body:not(.relax) .dev-hero .dev-proof {
    position: relative !important;
    inset: auto !important;
    margin: 48px auto 0 !important;
    transform: none !important;
  }
  body:not(.relax) .shell-typing-line { white-space: normal !important; }
}

@media (orientation: landscape) and (min-width: 1051px) and (max-width: 1366px) {
  body:not(.relax) :is(.hero, .portfolio-hero, .contacts-hero, .about-hero, .trademark-hero) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: center !important;
  }
  body:not(.relax) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) > :last-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    justify-self: end !important;
  }
  body:not(.relax) :is(.hero-copy, .portfolio-hero-copy, .contacts-hero-copy, .about-hero-copy, .trademark-hero-copy) h1 {
    font-size: clamp(44px, 4.8vw, 64px) !important;
  }
  body:not(.relax) .shell-typing-line { white-space: normal !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1050px) {
  body:not(.relax) :is(.hero, .portfolio-hero, .contacts-hero, .about-hero, .trademark-hero) {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 132px !important;
    padding-bottom: 76px !important;
  }
}

/* External background rings only; functional sonar/radar rings stay visible. */
@media (orientation: portrait) and (max-width: 1100px) {
  body:not(.relax) :is(.hero, .dev-hero, .portfolio-hero, .contacts-hero, .about-hero, .privacy-hero, .reviews-hero, .not-found-hero, .blog-hero)::before,
  body:not(.relax) :is(.portfolio-hero, .contacts-hero, .about-hero, .privacy-hero, .blog-hero)::after {
    display: none !important;
  }
}

/* Price/scope cards use full-width rows before their headings become cramped. */
@media (max-width: 1180px) {
  body .dev-price-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 32px !important;
  }
  body .dev-price-copy, body .price-points, body .price-points article { min-width: 0; }
  body .price-points { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  body .price-points article { height: auto; min-height: 0; padding: 24px; }
  body .price-points h3 { line-height: 1.35; overflow-wrap: anywhere; }
  body :is(.context-price-line, .social-price-line) { flex-wrap: wrap; column-gap: 5px; }
  body :is(.context-price-line, .social-price-line) strong { white-space: nowrap; }
  body .contact-form-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  body .contact-form { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  body .dev-price-panel { padding: 26px 20px !important; }
  body .price-points { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Complete, consistently fitted case previews. The shared device module owns
 * dimensions, so max-width cannot silently distort the capture's proportions.
 */
body .dev-case-shot :is(.device-desktop, .device-tablet, .device-phone) img {
  object-fit: contain !important;
  object-position: top center !important;
  background: transparent;
  transform-origin: center center !important;
}
@media (min-width: 1101px) {
  body .dev-case-shot > [data-case-frame-fitted] {
    box-sizing: border-box !important;
    width: var(--case-device-width) !important;
    height: var(--case-device-height) !important;
    min-width: 0 !important; min-height: 0 !important;
    max-width: none !important; max-height: none !important;
    aspect-ratio: auto !important;
  }
  body .dev-case-shot > [data-case-frame-fitted] img {
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    transform: scale(var(--case-capture-scale, 1)) !important;
  }
}
@media (max-width: 1100px) {
  body .dev-cases .case-viewport { --ddd-case-card-width: min(88vw, 960px); width: 100%; max-width: 100%; margin-inline: 0; border-radius: 0; }
  body .dev-cases .case-track { width: 100%; padding-inline: max(16px, calc((100vw - var(--ddd-case-card-width)) / 2)); scroll-padding-inline: max(16px, calc((100vw - var(--ddd-case-card-width)) / 2)); }
  body .dev-cases .dev-case-card {
    width: var(--ddd-case-card-width) !important; min-width: var(--ddd-case-card-width) !important; max-width: var(--ddd-case-card-width) !important;
    flex: 0 0 var(--ddd-case-card-width) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important; min-height: 0 !important;
  }
  body .dev-cases .dev-case-card > .dev-case-shot { grid-column: 1 !important; grid-row: 1 !important; }
  body .dev-cases .dev-case-card > .dev-case-info { grid-column: 1 !important; grid-row: 2 !important; min-width: 0; }
  body .dev-case-shot[data-service-devices-ready],
  body .project-grid.is-development .project-development .project-dev-gallery[data-service-devices-ready] {
    height: clamp(360px, 52vw, 520px) !important;
    min-height: 0 !important;
  }
  body .project-grid.is-development .project-development {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body .project-grid.is-development .project-development .project-dev-gallery {
    grid-column: 1 !important; grid-row: 1 !important;
  }
  body .project-grid.is-development .project-development .project-info {
    grid-column: 1 !important; grid-row: 2 !important;
  }
  body .dev-case-shot[data-service-devices-ready] > :is(.device-desktop, .device-tablet, .device-phone) {
    display: none !important;
  }
  body .dev-case-shot[data-service-devices-ready] > .is-case-screen-active {
    display: block !important;
    box-sizing: border-box !important;
    left: 50% !important; right: auto !important; top: 16px !important; bottom: auto !important;
    width: var(--case-device-width) !important;
    height: var(--case-device-height) !important;
    min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }
  body .dev-case-shot[data-service-devices-ready] .case-device-switcher {
    display: flex !important;
    bottom: 12px !important;
  }
  body .dev-case-shot[data-service-devices-ready] > .is-case-screen-active img {
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    transform: scale(var(--case-capture-scale, 1)) !important;
    margin: 0 !important; padding: 0 !important;
  }
}
@media (max-width: 760px) {
  body .dev-cases .case-viewport { --ddd-case-card-width: 80vw; }
  body .cases .case-controls { justify-content: flex-end; gap: 14px; padding-left: 0; }
  body .cases .case-controls button { width: 48px; height: 48px; }
  body .dev-case-shot[data-service-devices-ready],
  body .project-grid.is-development .project-development .project-dev-gallery[data-service-devices-ready] {
    height: clamp(260px, 78vw, 360px) !important;
  }
  body .case-device-button { padding-inline: 10px; }
}

/* The testimonial author must wrap, not force the journal beyond its track. */
body.reviews-page .review-journal, body.reviews-page .review-journal > * { min-width: 0; }
body.reviews-page .review-journal .review-card { box-sizing: border-box; min-width: 0; }
body.reviews-page .review-journal .review-content { min-width: 0; }
body.reviews-page .review-journal .review-meta > div { min-width: 0; }
body.reviews-page .review-journal .review-meta :is(strong, span) { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 761px) and (max-width: 1180px) {
  body.reviews-page .review-journal { grid-template-columns: minmax(0, 1fr); }
  body.reviews-page .review-journal-index { height: auto; }
  body.reviews-page .review-journal-list { display: flex; height: auto; overflow-x: auto; }
  body.reviews-page .review-journal-item { flex: 0 0 190px; }
  body.reviews-page .reviews-archive .review-journal .review-card {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
    height: auto; min-height: 520px;
  }
  body.reviews-page .reviews-archive .review-journal .review-content { padding: 30px; }
  body.reviews-page .review-journal .review-meta { flex-wrap: wrap; }
}

/* Enlarged captures retain the device outline and the same minimal edge bleed. */
.portfolio-gallery figure { width: min(1180px, 100%); max-width: 100%; min-width: 0; }
.portfolio-gallery-stage {
  display: grid; place-items: center; min-width: 0; min-height: 0;
  padding: 20px; overflow: hidden;
  background: radial-gradient(ellipse at center, #b8dbe3, #eaf3f5);
}
.portfolio-gallery-device {
  box-sizing: border-box; overflow: hidden;
  border: 10px solid #0b2b3f; border-top-width: 24px; border-radius: 18px;
  background: #0b2b3f; box-shadow: 0 24px 45px rgba(4, 37, 55, .24);
}
.portfolio-gallery-device.gallery-device-tablet { border-width: 10px; border-radius: 22px; }
.portfolio-gallery-device.gallery-device-phone { border-width: 8px; border-radius: 26px; }
.portfolio-gallery-device img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center;
  transform-origin: center center; transform: scale(var(--case-capture-scale, 1));
}

/* Mobile-only, full-resolution inspection for website captures. */
.case-capture-gallery[hidden] { display: none; }
.case-capture-gallery {
  position: fixed; z-index: 2147483644; inset: 0; display: grid; place-items: center;
  padding: calc(68px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(1, 12, 26, .92); backdrop-filter: blur(12px);
}
.case-capture-gallery figure {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  width: min(560px, 100%); height: 100%; max-height: 850px; min-height: 0;
  margin: 0; overflow: hidden; border: 1px solid rgba(95, 228, 240, .36);
  border-radius: 20px; background: #061c31;
}
.case-capture-stage {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0;
  overflow: hidden; background: radial-gradient(ellipse at center, #b8dbe3, #eaf3f5);
}
.case-capture-device {
  box-sizing: border-box; overflow: hidden; flex: none;
  border: 8px solid #0b2b3f; border-top-width: 20px; border-radius: 16px;
  background: #0b2b3f; box-shadow: 0 16px 34px rgba(4, 37, 55, .24);
  transform-origin: center center;
}
.case-capture-device.gallery-device-tablet { border-width: 8px; border-radius: 20px; }
.case-capture-device.gallery-device-phone { border-width: 7px; border-radius: 24px; }
.case-capture-device img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transform: scale(var(--case-capture-scale, 1)); transform-origin: center center;
}
.case-capture-gallery figcaption {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 38px;
  gap: 8px; align-items: center; min-height: 70px; padding: 10px 12px;
  color: #fff; background: #08243d;
}
.case-capture-gallery figcaption strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.case-capture-gallery figcaption span { color: #69e4ee; font-size: 12px; font-weight: 800; white-space: nowrap; }
.case-capture-gallery button { display: grid; place-items: center; padding: 0; border: 1px solid rgba(104,229,240,.5); border-radius: 50%; color: #fff; background: #092b45; cursor: pointer; }
.case-capture-gallery figcaption button { width: 38px; height: 38px; font-size: 21px; }
.case-capture-gallery button[hidden] { visibility: hidden; }
.case-capture-close { position: absolute; z-index: 2; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; }
.case-capture-close::before,.case-capture-close::after { content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.case-capture-close::before { transform: rotate(45deg); }
.case-capture-close::after { transform: rotate(-45deg); }
.case-capture-gallery-open { overflow: hidden; }
body:is(.case-capture-gallery-open,.portfolio-gallery-open) #deepdive-ai-widget { display: none !important; }
.capture-zoom-hint { display: none; }
@media (max-width: 760px) {
  .portfolio-gallery { z-index: 2147483644; }
  .case-capture-stage,.portfolio-gallery-stage { touch-action: none; }
  .case-capture-device,.portfolio-gallery-device { will-change: auto; }
  .capture-zoom-hint {
    position: absolute; z-index: 1; left: 50%; bottom: 12px; display: block;
    width: max-content; max-width: calc(100% - 24px); padding: 6px 10px;
    border-radius: 999px; color: #e6faff; background: rgba(6, 35, 54, .8);
    font-size: 11px; line-height: 1.25; text-align: center; pointer-events: none;
    transform: translateX(-50%);
  }
  .is-zoomed > .capture-zoom-hint { opacity: 0; }
}

/* Page-specific optical fixes; no new typography system. */
body .services-map-point small { font-size: 12px; }
body .privacy-eyebrow { padding-left: 9px; }
body .privacy-eyebrow > span { flex: 0 0 10px; }
@media (max-width: 1100px) {
  body .social-studio .social-studio-screen {
    height: auto !important; min-height: 0; aspect-ratio: auto !important;
    padding-bottom: 18px !important;
    grid-template-rows: auto auto;
  }
  body .social-studio .social-flow {
    position: relative !important; inset: auto !important;
    grid-column: 1 / -1; height: auto !important; min-height: 38px;
    padding: 10px 8px; gap: 5px;
  }
  body .social-studio .social-flow span { white-space: normal; }
  body .social-studio .social-editor, body .social-studio .social-pulse { min-height: 0; }
  body .ads-console .ads-core { box-sizing: border-box; width: clamp(108px, 30%, 184px); height: auto; aspect-ratio: 1; padding: 12px; }
  body .ads-console .ads-core strong { margin: 3px 0; font-size: clamp(12px, 1.7vw, 18px); line-height: 1.2; white-space: nowrap; }
  /* The badge must clear the inset rounded contour, not merely the outer core. */
  body .ads-console .ads-core > span { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 4px 5px; font-size: clamp(7px, .9vw, 9px); line-height: 1.2; white-space: nowrap; }
  body .ads-console .ads-core > span i { flex: 0 0 5px; margin: 0; }
  body .ads-console .ads-channel { width: 27%; min-height: 54px; padding: 8px; }
  body .ads-console .ads-channel-search, body .ads-console .ads-channel-media { top: 8%; }
  body .ads-console .ads-channel-social, body .ads-console .ads-channel-crm { bottom: 20%; }
  body .ads-console .build-bay-screen { width: 100%; max-width: 100%; min-height: 300px; }
  body .mobile-app-page .app-product-feature { min-height: 424px; aspect-ratio: 1.25; }
  body .mobile-app-page .app-links { inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 760px) {
  body .ads-console .build-bay-screen { aspect-ratio: auto; height: 300px; }
}
@media (max-width: 600px) {
  body .audit-levels .audit-level-options { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
  body.seo-page:not(.audit-service-page) .approach-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Keep the longest legal heading readable without splitting its word or
 * letting it disappear behind the hero's overflow boundary. */
@media (orientation: landscape) and (min-width: 1051px) and (max-width: 1366px) {
  body:not(.relax) .privacy-hero-copy h1 { font-size: clamp(44px, 4.8vw, 62px) !important; }
}
@media (max-width: 380px) {
  body:not(.relax) .privacy-hero-copy h1 { font-size: clamp(28px, 9.3vw, 36px) !important; }
}