/*
 * Phone landscape / low-height safety layer
 * Keeps the established visual direction while preventing desktop-height
 * compositions from being applied to wide-but-short phone viewports.
 */
/*
 * Works page intrinsic-width guard.
 * Large source screenshots must never become the minimum width of their
 * grid column around tablet / small-desktop breakpoints.
 */
.works-page .works-hero__visual,
.works-page .works-hero__screens,
.works-page .works-hero__screen,
.works-page .works-overview,
.works-page .works-grid,
.works-page .work-card-shell,
.works-page .work-card,
.works-page .work-card__media {
  min-width: 0;
  max-width: 100%;
}

.works-page .work-card {
  width: 100%;
}

.works-page .works-hero__screen,
.works-page .work-card__media {
  overflow: hidden;
}

.works-page .works-hero__screen img,
.works-page .work-card__media img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 620px) {
  :root {
    --landscape-header: 64px;
    --landscape-gutter: clamp(16px, 3vw, 28px);
  }

  html {
    scroll-padding-top: calc(var(--landscape-header) + 12px);
  }

  body {
    overflow-x: clip !important;
  }

  main,
  main > *,
  section,
  article,
  figure,
  div {
    min-width: 0;
  }

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

  .noise,
  .b-ruler,
  .b-stamp,
  .scroll-note,
  .bp-mobile-cta,
  .scene-proof,
  .symbol-notes,
  .service-hero__rail,
  .works-hero__rail,
  .recruit-scroll {
    display: none !important;
  }

  /* Header: retain the identity, remove the 106px vertical tax. */
  .site-header,
  body:has(.concept-b) .site-header,
  .service .site-header {
    min-height: var(--landscape-header) !important;
    height: var(--landscape-header) !important;
    padding: 8px var(--landscape-gutter) !important;
  }

  .site-header .brand,
  body:has(.concept-b) .site-header .brand,
  .service .site-header .brand {
    width: 190px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px 0 47px !important;
  }

  .site-header .brand::before,
  body:has(.concept-b) .site-header .brand::before,
  .service .site-header .brand::before {
    width: 38px !important;
    height: 38px !important;
  }

  .site-header .brand::after,
  body:has(.concept-b) .site-header .brand::after,
  .service .site-header .brand::after {
    font-size: 14px !important;
  }

  .brand-company,
  .header-consult {
    display: none !important;
  }

  .menu-toggle,
  body:has(.concept-b) .menu-toggle,
  .service .menu-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  /* Open navigation: two compact columns and its own scroll area. */
  .site-header .nav,
  .site-header .nav.is-open,
  body:has(.concept-b) .nav,
  body:has(.concept-b) .nav.is-open,
  .service .nav,
  .service .nav.is-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .site-header .nav.is-open,
  body:has(.concept-b) .nav.is-open,
  .service .nav.is-open {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 0 !important;
    padding: calc(var(--landscape-header) + 6px) 14px 14px !important;
  }

  .site-header .nav.is-open a,
  body:has(.concept-b) .site-header .nav.is-open a,
  .service .site-header .nav.is-open a {
    min-height: 68px !important;
    padding: 10px 12px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
  }

  .site-header .nav.is-open span,
  body:has(.concept-b) .nav.is-open span,
  .service .nav.is-open span {
    font-size: clamp(24px, 5vw, 38px) !important;
    line-height: .9 !important;
  }

  .site-header .nav.is-open b {
    margin-top: 6px !important;
  }

  /* TOP portal */
  .portal,
  .scene-stage,
  .scene {
    max-width: 100vw;
  }

  .scene,
  .concept-b .scene {
    padding: calc(var(--landscape-header) + 8px) var(--landscape-gutter) 18px !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    align-items: center !important;
  }

  .scene--brand,
  .concept-b .scene--brand {
    grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr) !important;
  }

  .scene--brand .brand-stage,
  .concept-b .scene--brand .brand-stage {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .scene--brand .logo-assembly,
  .concept-b .scene--brand .logo-assembly {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(27vw, 210px) !important;
    height: min(64svh, 250px) !important;
    transform: translate(-50%, -50%) !important;
  }

  .scene--brand .wordmark-build,
  .concept-b .scene--brand .wordmark-build {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 2px !important;
    width: auto !important;
  }

  .scene--brand .wordmark-nos,
  .concept-b .scene--brand .wordmark-nos {
    font-size: clamp(42px, 9vw, 70px) !important;
  }

  .scene--brand .wordmark-tech,
  .concept-b .scene--brand .wordmark-tech {
    font-size: clamp(22px, 4.4vw, 36px) !important;
  }

  .scene--brand .wordmark-tagline,
  .scene--brand .wordmark-meta,
  .scene--brand .wordmark-statement,
  .concept-b .scene--brand .wordmark-tagline,
  .concept-b .scene--brand .wordmark-meta,
  .concept-b .scene--brand .wordmark-statement {
    display: none !important;
  }

  /* Current production TOP hero uses the higher-specificity living-seam layer. */
  .concept-b .scene--brand.hero-refinement-c .brand-stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .concept-b .scene--brand.hero-refinement-c .logo-assembly {
    left: 4vw !important;
    right: auto !important;
    top: 50% !important;
    width: min(34vw, 66svh, 255px) !important;
    height: auto !important;
    transform: translateY(-50%) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build {
    display: flex !important;
    left: 58% !important;
    right: 3% !important;
    top: 42% !important;
    bottom: auto !important;
    width: auto !important;
    transform: translateY(-50%) !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-build::before,
  .concept-b .scene--brand.hero-refinement-c .wordmark-tagline {
    display: none !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-statement {
    display: block !important;
  }

  .concept-b .scene--brand.hero-refinement-c .wordmark-statement strong {
    font-size: min(5vw, 12vh) !important;
    line-height: .82 !important;
  }

  .hero-c-ghost,
  .hero-c-micro {
    display: none !important;
  }

  .hero-conversion {
    position: absolute !important;
    z-index: 9 !important;
    left: 58% !important;
    right: 3% !important;
    top: auto !important;
    bottom: 15px !important;
    display: grid !important;
    align-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-conversion__eyebrow {
    display: block !important;
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }

  .hero-conversion__copy {
    display: block !important;
    margin: 0 !important;
    max-width: 48ch !important;
    font-size: clamp(9px, 1.35vw, 11px) !important;
    line-height: 1.5 !important;
  }

  .hero-conversion__actions {
    display: flex !important;
    flex-flow: row wrap !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .hero-conversion__actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: 9px !important;
  }

  .hero-conversion > small {
    display: none !important;
  }

  .concept-b .scene--service .scene__copy {
    align-self: center !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .concept-b .scene--service h2 {
    max-width: 100% !important;
    margin: 5px 0 !important;
    font-size: clamp(42px, 11vh, 68px) !important;
    line-height: .86 !important;
  }

  .concept-b .scene--service h2 em {
    margin-top: 0 !important;
  }

  .concept-b .scene--service .scene-heading-art {
    display: none !important;
  }

  .concept-b .scene--service .scene__tag {
    margin: 8px 0 10px !important;
    font-size: clamp(11px, 1.8vw, 14px) !important;
    line-height: 1.45 !important;
  }

  .concept-b .scene--service .enter {
    min-width: 190px !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
  }

  .concept-b .scene--service .symbol-stage {
    grid-row: auto !important;
    width: 100% !important;
    height: min(68svh, 265px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .concept-b .scene--service .symbol {
    width: min(34vw, 250px) !important;
    max-height: 64svh !important;
  }

  .scene-progress {
    left: 50% !important;
    right: auto !important;
    bottom: 5px !important;
    transform: translateX(-50%) !important;
  }

  .portal-footer {
    display: none !important;
  }

  /* Three service pages */
  .service-hero,
  .service-hero--new {
    min-height: 100svh !important;
    height: auto !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(12px, 2.5vw, 28px) !important;
    padding: calc(var(--landscape-header) + 10px) var(--landscape-gutter) 16px !important;
  }

  .service-hero--new::before {
    width: 54vw !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .service-hero__copy {
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .service-hero__copy .eyebrow {
    margin: 0 0 4px !important;
    font-size: 8px !important;
  }

  .service-title-art {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .service-title-art img {
    width: min(37vw, 310px) !important;
    max-width: 100% !important;
    max-height: 34svh !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  .service-lead {
    max-width: 46ch !important;
    margin: 7px 0 9px !important;
    font-size: clamp(10px, 1.45vw, 13px) !important;
    line-height: 1.55 !important;
  }

  .hero-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .hero-actions .hero-cta,
  .hero-actions .text-link {
    min-height: 42px !important;
  }

  .hero-actions .hero-cta {
    min-width: 0 !important;
    padding: 11px 13px !important;
    font-size: 9px !important;
  }

  .hero-actions .text-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 2px !important;
    font-size: 10px !important;
  }

  .service-hero--new .hero-visual {
    grid-row: auto !important;
    width: 100% !important;
    height: min(70svh, 270px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .service-hero--new .service-hero-art {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  .service-hero--new .hero-symbol {
    width: min(30vw, 220px) !important;
  }

  .service .section,
  .service .contact {
    padding-top: clamp(34px, 9vh, 54px) !important;
    padding-bottom: clamp(34px, 9vh, 54px) !important;
  }

  .service .contact {
    min-height: auto !important;
  }

  .estimate-summary,
  .contact-aside,
  .recruit-fit__title,
  .recruit-entry__intro {
    position: static !important;
    top: auto !important;
  }

  /* Estimate, contact, company and legal pages */
  .standard-page .page-hero {
    min-height: auto !important;
    padding: calc(var(--landscape-header) + 18px) var(--landscape-gutter) 28px !important;
  }

  .standard-page .page-hero > p:first-child {
    margin-bottom: 8px !important;
    font-size: 8px !important;
  }

  .standard-page .page-hero h1 {
    max-width: 12ch !important;
    margin: 0 0 10px !important;
    font-size: clamp(40px, 8vw, 62px) !important;
    line-height: .92 !important;
  }

  .standard-page .page-hero > p:last-of-type {
    max-width: 58ch !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  .trust-pills {
    margin-top: 12px !important;
    gap: 6px !important;
  }

  .trust-pills span {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 8px !important;
  }

  .estimator,
  .contact-layout {
    align-items: start !important;
  }

  /* Works */
  .works-hero,
  .works-hero--new {
    min-height: 100svh !important;
    height: auto !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(12px, 2.5vw, 28px) !important;
    padding: calc(var(--landscape-header) + 10px) var(--landscape-gutter) 16px !important;
  }

  .works-hero__copy {
    padding: 0 !important;
  }

  .works-hero__copy .eyebrow {
    margin: 0 0 5px !important;
    font-size: 8px !important;
  }

  .works-hero__copy h1 {
    margin: 0 !important;
    font-size: clamp(42px, 9vw, 68px) !important;
    line-height: .84 !important;
  }

  .works-hero__copy h1 em {
    margin-top: 6px !important;
    font-size: .3em !important;
    line-height: 1.1 !important;
  }

  .works-hero__visual {
    width: 100% !important;
    height: min(68svh, 265px) !important;
    min-height: 0 !important;
  }

  .works-hero__screens {
    inset: 7% 4% 8% !important;
  }

  .work-detail {
    max-height: calc(100svh - 10px) !important;
    overflow: auto !important;
  }

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

  /* Recruit */
  .recruit-hero {
    min-height: 100svh !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: calc(var(--landscape-header) + 8px) var(--landscape-gutter) 14px !important;
  }

  .recruit-hero__copy {
    padding: 0 !important;
  }

  .recruit-kicker {
    margin: 0 0 5px !important;
    font-size: 8px !important;
  }

  .recruit-hero h1 {
    margin: 0 0 7px !important;
    font-size: clamp(34px, 6vw, 52px) !important;
    line-height: .92 !important;
  }

  .recruit-hero__statement {
    max-width: 50ch !important;
    margin: 0 0 8px !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
  }

  .recruit-hero__actions {
    gap: 7px !important;
    margin: 0 !important;
  }

  .recruit-primary,
  .recruit-secondary {
    min-height: 42px !important;
    padding: 10px 13px !important;
    font-size: 9px !important;
  }

  .recruit-tags {
    display: none !important;
  }

  .recruit-hero__visual {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: min(68svh, 260px) !important;
    transform: none !important;
  }

  .recruit-hero__rail {
    display: none !important;
  }

  /* 404 */
  .not-found main {
    min-height: 100svh !important;
    padding: 20px var(--landscape-gutter) !important;
  }

  .not-found h1 {
    margin: 8px 0 !important;
    font-size: clamp(40px, 8vw, 64px) !important;
  }
}