/*
 * Phone landscape adaptation (2026-10-16).
 *
 * Mobile React layouts switch at 1000px, but much of the card CSS switches at
 * 680px. Rotated phones fall between those limits and inherited desktop grid,
 * image, font and header dimensions. Keep all approved portrait/tablet/desktop
 * layouts untouched: this block matches short, touch-screen LANDSCAPE only.
 */
@media screen and (orientation: landscape) and (pointer: coarse) and (max-height: 600px) and (max-width: 1100px) {
  :root {
    --md-header-height: 64px;
  }

  html body {
    padding-top: 0 !important;
  }

  html body > main {
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    min-width: 0 !important;
  }

  html body .md-global-header,
  html.md-global-header-compact body .md-global-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px)
      max(12px, env(safe-area-inset-right, 0px))
      0 max(12px, env(safe-area-inset-left, 0px)) !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    gap: 12px !important;
    align-items: center !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body .md-global-header::before,
  html body .md-global-header::after {
    content: none !important;
    display: none !important;
  }

  html body .md-global-header .md-global-logo,
  html.md-global-header-compact body .md-global-header .md-global-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
  }

  html body .md-global-header .md-global-logo-asset,
  html.md-global-header-compact body .md-global-header .md-global-logo-asset {
    width: 43px !important;
    height: 43px !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  html body .md-global-header .md-global-wordmark,
  html.md-global-header-compact body .md-global-header .md-global-wordmark {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 310px !important;
    height: 48px !important;
    min-height: 0 !important;
    justify-self: center !important;
    overflow: hidden !important;
  }

  html body .md-global-header .md-global-wordmark-asset {
    width: 100% !important;
    height: 45px !important;
    max-width: 100% !important;
    max-height: 45px !important;
    object-fit: contain !important;
  }

  html body .md-global-header .md-global-menu-toggle,
  html.md-global-header-compact body .md-global-header .md-global-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
  }

  html body .md-global-menu-head {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    padding: env(safe-area-inset-top, 0px)
      max(12px, env(safe-area-inset-right, 0px))
      0 max(12px, env(safe-area-inset-left, 0px)) !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    gap: 12px !important;
  }

  html body .md-global-menu-head .md-global-logo,
  html body .md-global-menu-head .md-global-logo-asset {
    width: 43px !important;
    height: 43px !important;
  }

  html body .md-global-menu-head .md-global-wordmark {
    width: 100% !important;
    max-width: 310px !important;
    height: 46px !important;
    min-height: 0 !important;
  }

  html body .md-global-menu-head .md-global-wordmark-asset {
    width: 100% !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  html body .md-global-menu-close {
    width: 44px !important;
    height: 44px !important;
  }

  html body .md-global-menu-links {
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
  }

  html body .md-global-menu-links a {
    min-height: 48px !important;
    font-size: 20px !important;
  }

  /* Constrain all sections to the *layout* viewport, not their descendants. */
  html body main.home-page,
  html body main.home-page > section,
  html body main.home-page > footer,
  html body main.home-page .container {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body main.home-page .container {
    width: auto !important;
    max-width: 1000px !important;
    margin-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)) !important;
  }

  html body main.home-page .section {
    padding-block: 34px !important;
  }

  html body main.home-page .section-heading {
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  html body main.home-page .section-heading h2,
  html body main.home-page .why-copy h2 {
    font-size: clamp(26px, 3.8vw, 34px) !important;
    line-height: 1.09 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Opening: one readable column, not a desktop rail or a 100svh splash. */
  html body main.home-page > section.hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 0 20px !important;
    align-items: initial !important;
  }

  html body main.home-page > section.hero > .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: auto !important;
    margin-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)) !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  html body main.home-page .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  html body main.home-page .hero h1 {
    max-width: 830px !important;
    margin: 10px 0 13px !important;
    font-size: clamp(33px, 4.45vw, 43px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body main.home-page .hero-lead {
    max-width: 780px !important;
    margin: 0 0 10px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  html body main.home-page .hero-sub {
    max-width: 790px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  html body main.home-page .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  html body main.home-page .hero-actions > a {
    width: auto !important;
    min-height: 43px !important;
    padding-inline: 17px !important;
    font-size: 13px !important;
  }

  /* Four compact benefits: the large desktop illustration cannot escape. */
  html body main.home-page > section#value-strip {
    display: block !important;
    padding: 12px 0 22px !important;
    min-height: 0 !important;
  }

  html body main.home-page #value-strip .services-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    touch-action: auto !important;
  }

  html body main.home-page #value-strip .services-list > .service-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 94px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    border: 1px solid rgba(212,175,90,.18) !important;
    border-radius: 16px !important;
    background: rgba(7,17,31,.40) !important;
    overflow: hidden !important;
  }

  html body main.home-page #value-strip .value-service-row {
    display: grid !important;
    grid-template-columns: 18px 62px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 94px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
  }

  html body main.home-page #value-strip .service-index {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 3px !important;
    font-size: 11px !important;
  }

  html body main.home-page #value-strip img.value-illustration,
  html body main.home-page #value-strip img.value-illustration-position,
  html body main.home-page #value-strip img.value-illustration-documents {
    position: static !important;
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    place-self: center !important;
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html body main.home-page #value-strip .value-card-copy {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body main.home-page #value-strip .value-card-copy > strong {
    display: block !important;
    font-size: clamp(17px, 2.2vw, 20px) !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    color: #f3f0ea !important;
  }

  html body main.home-page #value-strip .value-card-copy > small {
    display: block !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.34 !important;
    color: rgba(243,240,234,.70) !important;
  }

  /* Featured services and the 03-13 list stay legible and fully clickable. */
  html body main.home-page #services .featured-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body main.home-page #services .featured-card {
    min-width: 0 !important;
    min-height: 215px !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  html body main.home-page #services .featured-card h3 {
    font-size: clamp(23px, 2.9vw, 28px) !important;
    line-height: 1.06 !important;
  }

  html body main.home-page #services .featured-card p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html body main.home-page #services .services-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 16px !important;
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    touch-action: auto !important;
  }

  html body main.home-page #services .services-list > .service-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    opacity: 1 !important;
    transform: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(212,175,90,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  html body main.home-page #services .service-item .service-row {
    display: grid !important;
    grid-template-columns: 22px 58px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 82px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: none !important;
  }

  html body main.home-page #services .service-card-art {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 58px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body main.home-page #services .service-row .service-premium-illustration {
    position: static !important;
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html body main.home-page #services .service-card-copy {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    color: #f3f0ea !important;
    text-decoration: none !important;
  }

  html body main.home-page #services .service-card-title {
    display: block !important;
    font: 400 clamp(17px, 2.1vw, 21px)/1.12 Georgia, "Times New Roman", serif !important;
    color: #f3f0ea !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-decoration: none !important;
  }

  html body main.home-page #services .service-card-description {
    display: none !important;
  }

  /* Mobile about/team DOM at widths 681-1000 needs its own layout, not a
     desktop two-column team-card with an empty second column. */
  html body main.home-page #why .why-grid {
    display: grid !important;
    grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr) !important;
    gap: 24px !important;
    align-items: center !important;
  }

  html body main.home-page #why .experience {
    min-height: 160px !important;
    padding: 22px !important;
  }

  html body main.home-page #why .experience-number {
    font-size: 27px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  html body main.home-page #why .experience p {
    margin-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body main.home-page #why .why-copy,
  html body main.home-page #why .why-copy h2,
  html body main.home-page #why .why-copy p {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main.home-page #process .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body main.home-page #process .process-grid > .process-card {
    min-width: 0 !important;
    min-height: 132px !important;
    grid-template-columns: 24px 78px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 13px !important;
  }

  html body main.home-page #process .process-grid > .process-card .process-card-art {
    width: 76px !important;
    height: 76px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body main.home-page #process .process-grid > .process-card .process-illustration {
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
  }

  html body main.home-page #process .process-grid > .process-card .process-card-copy > h3 {
    margin: 0 0 5px !important;
    font-size: 19px !important;
    line-height: 1.1 !important;
  }

  html body main.home-page #process .process-grid > .process-card .process-card-copy > p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html body main.home-page #team .team-carousel.services-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 280px)) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  html body main.home-page #team .team-carousel > .team-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #111820 !important;
  }

  html body main.home-page #team .team-card > .team-portrait {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
    border-radius: inherit !important;
  }

  html body main.home-page #team .team-portrait :is(.responsive-portrait-picture, .team-portrait-image) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }

  html body main.home-page #team .team-carousel-overlay {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 55px 14px 15px !important;
    background: linear-gradient(transparent,rgba(5,10,17,.92)) !important;
  }

  html body main.home-page #team .team-carousel-overlay h3 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  html body main.home-page #team .team-carousel-overlay .team-role {
    margin: 7px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  html body main.home-page #team .team-carousel-overlay .team-profile-link {
    display: inline-flex !important;
    margin: 9px 0 0 !important;
    font-size: 13px !important;
  }

  /* Editorial cards: finite height, readable overlays, no 100%-wide blow-up. */
  html body main.home-page #useful .articles-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html body main.home-page #useful .articles-grid > .article-card {
    min-width: 0 !important;
    min-height: 285px !important;
    padding: 15px !important;
    overflow: hidden !important;
  }

  html body main.home-page #useful .article-card h3 {
    margin: 0 0 8px !important;
    font-size: clamp(19px, 2.35vw, 23px) !important;
    line-height: 1.12 !important;
  }

  html body main.home-page #useful .article-card > p:not(.article-tag),
  html body main.home-page #useful .article-card:nth-child(3) > p:not(.article-tag)::after {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  html body main.home-page #useful .article-card .article-read-link {
    display: inline-flex !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Forms and footer remain inside the safe viewport without squeezing text. */
  html body main.home-page #contact .contact-shell {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)) !important;
    padding: 25px !important;
  }

  html body main.home-page #contact .fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body main.home-page .partnership-teaser-inner,
  html body main.home-page .footer-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* A few older, narrower landscape phones have too little room for three
 * editorial cards or two tall featured cards. Only the LANDSCAPE layout changes. */
@media screen and (orientation: landscape) and (pointer: coarse) and (max-height: 600px) and (max-width: 760px) {
  html body main.home-page #useful .articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body main.home-page #services .featured-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main.home-page #value-strip .value-service-row {
    grid-template-columns: 14px 48px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 11px !important;
  }

  html body main.home-page #value-strip img.value-illustration {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  html body main.home-page #why .why-grid {
    gap: 14px !important;
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr) !important;
  }

  html body main.home-page #process .process-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (orientation: landscape) and (pointer: coarse) and (max-height: 600px) and (max-width: 600px) {
  html body main.home-page #value-strip .services-list,
  html body main.home-page #services .services-list,
  html body main.home-page #useful .articles-grid,
  html body main.home-page #contact .fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main.home-page #why .why-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main.home-page #team .team-carousel.services-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}