/* Mobile Landscape */
/* © 2022 EX3 Inc. All Rights Reserved. */

/*
  Breakpoints use Media Queries Level 4 viewport features (width / height /
  orientation / range syntax) instead of the deprecated device-width and
  -webkit-device-pixel-ratio queries.

  A phone on its side is identified by a short viewport, not by its width:
  landscape phones run from 568px (iPhone SE 1st gen) to 932px (Pro Max) wide,
  which overlaps small laptops, but they are all under 500px tall.

  Phone landscape ....... (orientation: landscape) and (height < 500px)
    Short phones ........ + (height < 380px)   e.g. iPhone SE / mini / 5
    Narrow phones ....... + (width < 700px)
  Tablet landscape ...... (orientation: landscape) and (height >= 500px)
                          and (hover: none) and (pointer: coarse)
                          Touch-only, so small laptops keep the desktop behaviour.
*/

/******************GLOBAL****************************/
@media (orientation: landscape) {

  :root {
    --p-font-size: 2vh;
    --p-line-height: 3.4vh;
    --h2-font-size:4vh;
    --button-font-size:5vh;
    --htwo-line-height:5.3vh;
    --four-font-size:4vh;
    --nav-header-font-size:4.6vh;
    --eighty-percent: 80%;
    --ninetysix-percent: 96%;
    --header-hide: none;
  }

}

/*ENDS GLOBAL LANDSCAPE STYLE*/
/*BEGINS DEVICE SPECIFIC LANDSCAPE STYLE*/

/* ----------- Phones: Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 500px) {

  :root {
    --l-text-left: 9%;             /* headline inset, clears the section dots */
    --l-footer-height: 30px;
    --l-banner-width: 90px;
    /* Same logo-box proportions as portrait (121 x 145 mockup), derived from width */
    --l-banner-height: calc(var(--l-banner-width) * 1.2);
    --l-contact-height: 40px;
  }

  /* Paragraph fade-in finishes brighter and without the desktop 5% indent */
  @keyframes moveInParagraph {
    0% {opacity: 0; left: -10%;}
    100% {opacity: 0.85; left: 0;}
  }

  /*************** CHROME: header, contact buttons, overlays ***************/

  /* Logo box stays a compact badge; the desktop full-height slide-out
     would cover the copy on a 390px-tall screen */
  header div.logo_banner {
    left: 4%;
    width: var(--l-banner-width);
    min-width: var(--l-banner-width);
    height: var(--l-banner-height);
    background-attachment: scroll;
    background-size: 110%;
    background-position: 50% calc(var(--l-banner-width) * 0.116);
    /* The JS awaits transitionend between the step classes, so each step
       still animates a (visually imperceptible) property. */
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
  }

  header div.logo_banner.step-1 {
    height: var(--l-banner-height) !important;
    background-color: rgb(1, 1, 1);
  }

  header div.logo_banner.step-2 {
    left: 4% !important;
    width: var(--l-banner-width);
    color: rgb(254, 254, 254);
  }

  header div.logo_banner::after {
    content: "a Hybrid Intelligence Firm";
    position: absolute;
    top: calc(var(--l-banner-width) * 0.48);
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Playfair Display';
    font-size: calc(var(--l-banner-width) * 0.0537);
    transform: scale(0.65);
    color: var(--light-grey);
  }

  header div.logo_banner a {
    height: 100%;
  }

  /* Contact buttons take the desktop button group's spot: a black block, top right */
  header div.logo_banner div.contact_buttons_holder {
    position: fixed;
    top: 0;
    right: 4%;
    width: auto;
    height: var(--l-contact-height);
    background: var(--black);
  }

  header div.logo_banner div.contact_buttons_holder button {
    height: 100%;
    padding: 0 18px;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    -webkit-tap-highlight-color: transparent;
  }

  header div.logo_banner div.contact_buttons_holder button span {
    font-size: 18px;
    color: var(--light-grey);
  }

  header div.logo_banner div.contact_buttons_holder button::after {
    font-family: 'Playfair Display';
    font-size: 11px;
    white-space: nowrap;
  }

  header div.logo_banner div.contact_buttons_holder button:first-of-type::after {
    content: "Quick Question Chat";
  }

  header div.logo_banner div.contact_buttons_holder button:last-of-type::after {
    content: "Speak with an Advisor";
  }

  /* Chat opens as a panel under the contact buttons */
  div.chat_holder {
    left: auto;
    right: 4%;
    bottom: calc(var(--l-footer-height) + 6px);
    width: 360px;
    max-width: 60%;
  }

  div.chat_holder.expand {
    height: calc(100% - var(--l-contact-height) - var(--l-footer-height) - 12px);
  }

  /* Enablement buttons: the "Measure" CTA lives in section four */
  div.button_group,
  aside {
    display: none;
  }

  /* Section dots: desktop position, scaled to the short screen */
  div.section_indicator {
    left: 8px;
    width: 26px;
  }

  div.section_indicator div {
    padding: 8px 0;
  }

  div.section_indicator span {
    font-size: 1.8em;
  }

  /* Slim footer keeps the copyright + policy link visible */
  footer {
    height: var(--l-footer-height);
    font-size: 1em;
  }

  footer span.scroll_indicator {
    width: auto;
    padding: 0 6% 0 0;
  }

  footer span.scroll_indicator svg {
    width: 10px;
  }

  footer span.label {
    font-size: 0.55em;
    margin: 0 20px 0 0;
  }

  /* Deeper bottom blur so copy stays legible over full-bleed photos */
  div.gradient_overlay,
  div.gradient_overlay.short {
    height: 60%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.85) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%);
    mask-image: linear-gradient(to bottom, transparent, black 30%);
  }

  /*************** SHARED SECTION TYPE ***************/

  section,
  section.sectionFadein {
    background-size: cover !important;
  }

  /* Full-bleed photos scroll with their section (iOS ignores fixed attachment;
     !important beats the more specific desktop fixed rules) */
  section::after {
    background-attachment: scroll !important;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
  }

  section div.title_area {
    left: 0;
    width: 58%;
    max-width: none;
    height: auto;
    top: auto;
    bottom: calc(var(--l-footer-height) + 22px);
    padding-left: var(--l-text-left);
    box-sizing: border-box;
    justify-content: flex-end;
  }

  h1 {
    left: 0;
    width: 100%;
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  p {
    left: 0;
    width: 100%;
    font-size: 13px;
    line-height: 1.4;
    color: var(--white);
    margin: 0 0 8px 0;
  }

  /*************** SECTION ONE ***************/

  section:nth-of-type(1)::after {
    background-position: center 30%;
  }

  section:nth-of-type(1) div.title_area {
    bottom: calc(var(--l-footer-height) + 58px);
  }

  section.one span {
    left: 0;
    font-size: 15px;
    line-height: 1.45 !important;
    margin-bottom: 12px;
  }

  section.one h1 {
    font-size: 28px;
    margin-bottom: 0;
  }

  /* The footer already says "scroll to learn more" */
  section.one div.title_area p {
    display: none;
  }

  /* One row: label, then eight logos */
  section:nth-of-type(1) div.clients {
    display: grid;
    grid-template-columns: auto repeat(8, 1fr);
    column-gap: 18px;
    align-items: center;
    justify-items: center;
    left: 0;
    width: 100%;
    height: 20px;
    bottom: calc(var(--l-footer-height) + 16px);
    padding: 0 4% 0 var(--l-text-left);
    box-sizing: border-box;
  }

  section:nth-of-type(1) div.clients::before {
    content: "Trusted by Leading Brands";
    position: static;
    width: auto;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
  }

  section:nth-of-type(1) div.clients img {
    height: 14px;
    width: 100%;
    object-fit: contain;
  }

  /*************** SECTION TWO ***************/

  section:nth-of-type(2)::after {
    background-position: center 45%;
  }

  section:nth-of-type(2) div.title_area {
    width: 64%;
  }

  section:nth-of-type(2) h1 {
    font-size: 26px;
  }

  section:nth-of-type(2) h1 span {
    font-size: 62%;
  }

  section:nth-of-type(2) p.two_column {
    column-gap: 24px;
    font-size: 12.5px;
  }

  div.video_control_play {
    bottom: 42%;
    right: 12%;
    width: 64px;
    height: 64px;
  }

  div.video_control_play img {
    opacity: 0.5;
  }

  div.video_control_play::after {
    font-size: 10px;
    bottom: -30px;
    left: auto;
    right: -50px;
    width: 164px;
  }

  div.video_holder video {
    background: var(--black);
    object-fit: contain;
  }

  div.video_holder button.video_close {
    top: 8px;
    right: 8px;
  }

  /*************** SECTION THREE ***************/

  /* Photos move from the section backdrop onto the tiles themselves, so each
     image is cropped to its own tile (cover) instead of a fixed viewport grid */
  section:nth-of-type(3)::after {
    content: none;
  }

  section:nth-of-type(3) div.title_area {
    width: 38%;
    bottom: calc(var(--l-footer-height) + 16px) !important;
  }

  section:nth-of-type(3) h1,
  section:nth-of-type(3) p {
    width: 100%;
  }

  section:nth-of-type(3) h1 {
    font-size: 22px;
  }

  section:nth-of-type(3) p {
    font-size: 12px;
  }

  section:nth-of-type(3) div.enterprise_areas {
    left: 39%;
    width: 61%;
    row-gap: 6px;
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels {
    column-gap: 6px;
  }

  /* Wider small tiles than desktop (47.5 / 29.5 / 21.5) so labels fit a phone */
  section:nth-of-type(3) div.enterprise_areas div.three_levels a:has(div.division) {
    width: 38%;
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels a:has(div.department),
  section:nth-of-type(3) div.enterprise_areas div.three_levels a:has(div.individual) {
    width: 31%;
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise,
  section:nth-of-type(3) div.enterprise_areas div.enterprise:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual:hover {
    background-color: var(--black);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 30%;
    box-shadow: inset 0 -120px 80px -40px rgba(0, 0, 0, 0.85), inset 0 0 0 999px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.4s ease-in-out;
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual:hover {
    box-shadow: inset 0 -120px 80px -40px rgba(0, 0, 0, 0.85), inset 0 0 0 999px rgba(0, 0, 0, 0);
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise,
  section:nth-of-type(3) div.enterprise_areas div.enterprise:hover {
    background-image: url(../img/enterprise_banner.png);
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division:hover {
    background-image: url(../img/division_banner.png);
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department:hover {
    background-image: url(../img/hybrid_intel3a.jpg);
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual:hover {
    background-image: url(../img/hybrid_intel4b.jpg);
    background-position: 60% 20%;
  }

  section:nth-of-type(3) div.enterprise_areas div.text_block,
  section:nth-of-type(3) div.enterprise_areas div.enterprise div.text_block {
    height: auto;
    width: 100%;
    padding: 0 10px calc(var(--l-footer-height) + 10px) 10px;
    box-sizing: border-box;
    transition-delay: 0.6s;
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise div.text_block {
    padding-bottom: 12px;
  }

  section:nth-of-type(3) div.enterprise_areas div.text_block span {
    font-family: 'Playfair Display';
    font-size: 9px;
    margin-bottom: 3px;
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise div.text_block h2 {
    font-size: 22px;
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.text_block h2 {
    width: 100%;
    font-size: 15px;
    line-height: 1.2;
  }

  /*************** SECTION FOUR ***************/

  section:nth-of-type(4)::after {
    background-position: 60% 35%;
  }

  section:nth-of-type(4) div.title_area {
    bottom: calc(var(--l-footer-height) + 26px);
  }

  section:nth-of-type(4) h1 {
    font-size: 26px;
  }

  section:nth-of-type(4) p {
    width: 85%;
  }

  a.cta_button:link,
  a.cta_button:visited {
    width: auto;
    min-width: 140px;
    float: none;
    display: table;
    margin: 16px 0 0 0;
    padding: 8px 20px 10px;
    font-size: 17px;
    line-height: 1.05;
    transform-origin: left;
  }

  a.cta_button span {
    font-size: 13px;
    font-weight: 400;
  }

  /*************** SECTION FIVE: Success Stories ***************/

  section:nth-of-type(5) div.title_area {
    width: 30%;
    bottom: calc(var(--l-footer-height) + 30px);
  }

  section:nth-of-type(5) h1 {
    font-size: 26px;
  }

  section:nth-of-type(5) p {
    font-size: 12px;
  }

  /* Touch swipe with snapping replaces the desktop hover-to-scroll */
  section:nth-of-type(5) .project_profile_holder {
    left: 31%;
    width: 69%;
    height: 100%;
    margin: 0;
    gap: 10px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: auto;
  }

  section:nth-of-type(5) .project_profile_holder::-webkit-scrollbar {
    display: none;
  }

  section:nth-of-type(5) .project_profile_holder .project_profile {
    width: 46%;
    min-width: 46%;
    opacity: 1;
    scroll-snap-align: start;
    background-position: center 20%;
    padding-bottom: calc(var(--l-footer-height) + 14px);
    box-sizing: border-box;
  }

  .project_profile::before {
    height: 60%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.95) 100%);
  }

  .project_profile .project_client_logo {
    margin: 0 0 0 16px;
    position: relative;
    z-index: 50;
  }

  .project_profile .project_client_logo img {
    width: auto;
    height: 16px;
    margin-bottom: 8px;
  }

  .project_profile .project_description_holder {
    width: auto;
    min-height: 0;
    padding: 0 16px;
    position: relative;
    z-index: 50;
  }

  .project_profile h3 {
    font-size: 17px;
    line-height: 1.25;
    margin: 0 0 8px 0;
  }

  .project_profile p {
    font-size: 12px;
    opacity: 0.9;
  }

  /* Closing call-to-action card */
  section:nth-of-type(5) .project_profile_holder .project_profile:last-of-type {
    min-width: 60%;
    margin: 0;
    padding: 0 24px calc(var(--l-footer-height) + 14px);
    justify-content: center;
  }

  section:nth-of-type(5) .project_profile_holder .project_profile:last-of-type span {
    max-width: 90%;
    font-size: 24px;
    line-height: 1.25;
  }

  section:nth-of-type(5) .project_profile_holder .project_profile:last-of-type a.cta_button {
    margin-top: 18px;
  }

  /* Cards dim toward the carousel edges, echoing the desktop hover state */
  @supports (animation-timeline: view()) {
    section:nth-of-type(5) .project_profile_holder .project_profile {
      animation: storiesCardFocusLandscape linear both;
      animation-timeline: view(x);
    }
  }

  @keyframes storiesCardFocusLandscape {
    0%   { opacity: 0.55; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0.55; }
  }

}

/* ----------- Short phones: Landscape (iPhone SE, mini, 5) ----------- */
@media only screen and (orientation: landscape) and (height < 380px) {

  :root {
    --l-banner-width: 76px;
    --l-contact-height: 36px;
  }

  section.one span {
    font-size: 13px;
    margin-bottom: 8px;
  }

  section.one h1 {
    font-size: 24px;
  }

  h1,
  section:nth-of-type(2) h1,
  section:nth-of-type(4) h1,
  section:nth-of-type(5) h1 {
    font-size: 22px;
  }

  p {
    font-size: 12px;
  }

  section:nth-of-type(2) p.two_column {
    font-size: 11.5px;
  }

  section:nth-of-type(3) h1 {
    font-size: 19px;
  }

  section:nth-of-type(3) p {
    font-size: 11px;
    line-height: 1.35;
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise div.text_block h2 {
    font-size: 19px;
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.text_block h2 {
    font-size: 13px;
  }

  .project_profile h3 {
    font-size: 15px;
  }
}

/* ----------- Very short phones: Landscape (iPhone 5 / SE 1st gen) ----------- */
@media only screen and (orientation: landscape) and (height < 340px) {

  section:nth-of-type(1) div.title_area {
    width: 80%;
    bottom: calc(var(--l-footer-height) + 48px);
  }

  section.one span {
    font-size: 12px;
    margin-bottom: 6px;
  }

  section.one h1 {
    font-size: 21px;
  }

  section:nth-of-type(4) div.title_area {
    bottom: calc(var(--l-footer-height) + 12px);
  }

  section:nth-of-type(4) h1 {
    font-size: 20px;
  }

  a.cta_button:link,
  a.cta_button:visited {
    margin-top: 8px;
    padding: 6px 16px 8px;
    font-size: 15px;
  }

  a.cta_button span {
    font-size: 11px;
  }
}

/* ----------- Narrow phones: Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 500px) and (width < 700px) {

  section div.title_area {
    width: 66%;
  }

  section:nth-of-type(1) div.clients {
    column-gap: 10px;
  }

  section:nth-of-type(1) div.clients::before {
    font-size: 9px;
  }

  section:nth-of-type(1) div.clients img {
    height: 11px;
  }

  section:nth-of-type(2) div.title_area {
    width: 72%;
  }

  section:nth-of-type(3) div.title_area {
    width: 40%;
  }

  section:nth-of-type(3) div.enterprise_areas {
    left: 41%;
    width: 59%;
  }

  section:nth-of-type(3) div.enterprise_areas div.text_block span {
    font-size: 7.5px;
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.text_block h2 {
    font-size: 11.5px;
  }

  section:nth-of-type(5) .project_profile_holder .project_profile {
    width: 60%;
    min-width: 60%;
  }

  header div.logo_banner div.contact_buttons_holder button {
    padding: 0 12px;
  }
}

/* ----------- Tablets: Landscape (touch) ----------- */
/* Keeps the desktop design. Only fixes what depends on a mouse or on
   background-attachment: fixed, which iPadOS Safari does not support. */
@media only screen and (orientation: landscape) and (height >= 500px) and (hover: none) and (pointer: coarse) {

  /* Logo: reproduce the desktop's viewport-anchored placement relative to
     the box itself (10vw wide, 5.5% / 2% offsets, box at left 4%) */
  header div.logo_banner {
    background-attachment: scroll;
    background-size: 10vw auto;
    background-position: 0.95vw 2vh;
  }

  /* step-2 slides the box to left: 0, so shift the logo to stay put */
  header div.logo_banner.step-2 {
    background-position: 4.95vw 2vh;
  }

  div.chat_holder {
    width: 360px;
    max-width: 40%;
  }

  /* Full-bleed photos scroll with their section */
  section::after {
    background-attachment: scroll !important;
  }

  /*************** SECTION THREE: photos move onto their own tiles ***************/

  section:nth-of-type(3)::after {
    content: none;
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels {
    column-gap: 10px;
  }

  section:nth-of-type(3) div.enterprise_areas a:has(div.enterprise) {
    margin-bottom: 10px;
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise,
  section:nth-of-type(3) div.enterprise_areas div.enterprise:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department:hover,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual:hover {
    background-color: var(--black);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 30%;
    box-shadow: inset 0 -160px 120px -60px rgba(0, 0, 0, 0.85), inset 0 0 0 999px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.4s ease-in-out;
  }

  /* Tap feedback replaces the desktop hover lightening */
  section:nth-of-type(3) div.enterprise_areas a:active div.enterprise,
  section:nth-of-type(3) div.enterprise_areas a:active div.division,
  section:nth-of-type(3) div.enterprise_areas a:active div.department,
  section:nth-of-type(3) div.enterprise_areas a:active div.individual {
    box-shadow: inset 0 -160px 120px -60px rgba(0, 0, 0, 0.85), inset 0 0 0 999px rgba(0, 0, 0, 0);
  }

  section:nth-of-type(3) div.enterprise_areas div.enterprise,
  section:nth-of-type(3) div.enterprise_areas div.enterprise:hover {
    background-image: url(../img/enterprise_banner.png);
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.division:hover {
    background-image: url(../img/division_banner.png);
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.department:hover {
    background-image: url(../img/hybrid_intel3a.jpg);
  }

  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual,
  section:nth-of-type(3) div.enterprise_areas div.three_levels div.individual:hover {
    background-image: url(../img/hybrid_intel4b.jpg);
    background-position: 60% 20%;
  }

  /*************** SECTION FIVE: swipe replaces hover-to-scroll ***************/

  section:nth-of-type(5) .project_profile_holder {
    margin-left: 27%;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: auto;
  }

  section:nth-of-type(5) .project_profile_holder::-webkit-scrollbar {
    display: none;
  }

  /* Opaque cards would hide the intro that desktop lets run over them:
     keep the copy in the column left of the carousel */
  section:nth-of-type(5) div.title_area h1,
  section:nth-of-type(5) div.title_area p {
    width: calc(20vw - 24px);
  }

  /* No hover on touch: cards are fully visible, dimming toward the edges */
  section:nth-of-type(5) .project_profile_holder .project_profile {
    opacity: 1;
  }

  @supports (animation-timeline: view()) {
    section:nth-of-type(5) .project_profile_holder .project_profile {
      animation: storiesCardFocusTablet linear both;
      animation-timeline: view(x);
    }
  }

  @keyframes storiesCardFocusTablet {
    0%   { opacity: 0.55; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0.55; }
  }
}

/* ===================== MEASUREMENT PAGE (html.horizontal) =====================
   measure-your-hybrid-intelligence.html is the only page with the .horizontal
   class, so every rule below is scoped to it. The same question component as
   the portrait file (label, vertical slider, answer rows), laid out in two
   columns on landscape phones. Landscape tablets keep the desktop design. */

/* ----------- Measurement: Phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 500px) {

  html.horizontal {
    --q-row: 58px;                 /* one answer row = one slider step */
    --q-slider-col: 70px;          /* column holding the track + pill */
    --q-gap: 40px;                 /* track column to answer text */
    --q-pill-w: 58px;
    --q-pill-h: 14px;
    --q-title-gap: 36px;           /* headline to first answer */
    --q-buttons-height: 47px;
    --q-buttons-width: 113px;
    --q-buttons-gap: 30px;         /* answers to buttons, buttons to bar */
    --q-bar-total: var(--l-footer-height);
  }

  html.horizontal body.horizontal {
    counter-reset: question;
  }

  /* One full-width page per question, content stacked from the bottom so
     the headline always sits right above the answers */
  html.horizontal body.horizontal section {
    counter-increment: question;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    padding: 0 var(--l-text-left) calc(var(--q-bar-total) + 2 * var(--q-buttons-gap) + var(--q-buttons-height));
    justify-content: flex-end;
    align-items: stretch;
    background: var(--black);
  }

  /* Backgrounds: question 1 per the mockup, the rest follow the desktop order */
  html.horizontal body.horizontal section::after {
    content: '';
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    right: auto;
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
  }

  html.horizontal body.horizontal section:nth-of-type(1)::after {
    background-image: url(../img/hybrid_intel4b.jpg);
    background-position: 38% top;
  }

  html.horizontal body.horizontal section:nth-of-type(2)::after {
    background-image: url(../img/hybrid_intel4.jpeg);
    background-position: 60% center;
  }

  html.horizontal body.horizontal section:nth-of-type(3)::after {
    background-image: url(../img/hybrid_intel5.jpeg);
    background-position: 62% center;
    background-size: cover;
  }

  html.horizontal body.horizontal section:nth-of-type(4)::after {
    background-image: url(../img/hybrid_intel3.jpeg);
    background-position: 60% center;
  }

  html.horizontal body.horizontal section:nth-of-type(5)::after {
    background-image: url(../img/hybrid_intel2.jpeg);
    background-position: 67% center;
  }

  html.horizontal body.horizontal section:nth-of-type(6)::after {
    background-image: url(../img/hybrid_intel1.jpeg);
    background-position: 30% center;
  }

  /* The desktop leaves 7-10 black; phones and tablets keep a photo on every page */
  html.horizontal body.horizontal section:nth-of-type(7)::after {
    background-image: url(../img/hybrid_intel3a.jpg);
    background-position: 45% top;
  }

  html.horizontal body.horizontal section:nth-of-type(8)::after {
    background-image: url(../img/hybrid_intel4a.jpg);
    background-position: 50% top;
  }

  html.horizontal body.horizontal section:nth-of-type(9)::after {
    background-image: url(../img/hybrid_intel_for_enterprises1.jpg);
    background-position: 40% center;
  }

  html.horizontal body.horizontal section:nth-of-type(10)::after {
    background-image: url(../img/hybrid_intel4b.jpg);
    background-position: 38% top;
  }

  /* Index's Success Stories pager pill */
  html.horizontal body.horizontal section:nth-of-type(5)::before {
    content: none;
    animation: none;
  }

  /*************** Title ***************/

  html.horizontal body.horizontal section div.title_area.full_width {
    position: relative;
    top: auto !important;
    bottom: auto !important;
    left: 0;
    width: 100% !important;
    max-width: none;
    height: auto;
    padding: 0;
    margin: 0 0 var(--q-title-gap) 0;
    display: flex;
    justify-content: flex-end;
    z-index: 200;
  }

  html.horizontal body.horizontal section div.title_area.full_width::before {
    content: "Question " counter(question) " of 9";
    align-self: flex-start;
    padding: 4px 10px;
    margin-bottom: 12px;
    background: var(--black);
    font-family: 'Playfair Display';
    font-size: 9.5px;
    color: var(--light-grey);
    opacity: 0;
    transition: opacity 0.6s ease 0.3s;
  }

  html.horizontal body.horizontal section.sectionFadein div.title_area.full_width::before {
    opacity: 1;
  }

  html.horizontal body.horizontal section:last-of-type div.title_area.full_width::before {
    content: none;
  }

  html.horizontal body.horizontal section div.title_area.full_width h1 {
    left: 0;
    width: 100% !important;
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    text-wrap: balance;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  }

  /* The markup numbers each headline ("1. Where…"); the label carries the
     number now. Floating the "1." out of the line lets the space after it
     collapse at the line start. */
  html.horizontal body.horizontal section:not(:last-of-type) div.title_area.full_width h1::first-letter {
    float: left;
    font-size: 0;
  }

  /* "Move the slider right or left" no longer describes the control */
  html.horizontal body.horizontal section:not(:last-of-type) div.title_area.full_width p {
    display: none;
  }

  html.horizontal body.horizontal section:last-of-type div.title_area.full_width p {
    left: 0;
    width: 100% !important;
    margin-top: 16px;
  }

  /*************** Vertical slider + answers ***************/

  html.horizontal body.horizontal div.measurement {
    --q-rows: 6;
    position: relative;
    left: 0;
    bottom: auto;
    width: 100%;
    height: calc(var(--q-rows) * var(--q-row));
    display: block;
    z-index: 200;
  }

  /* Questions 8 and 9 have four answers */
  html.horizontal body.horizontal div.measurement:has(ol > li:nth-child(4):last-child) {
    --q-rows: 4;
  }

  /* The slider spans the whole block: tapping an answer row jumps to it */
  html.horizontal body.horizontal div.measurement div.range_selector {
    position: absolute;
    inset: 0;
    width: auto;
    display: block;
    z-index: 1;
  }

  html.horizontal body.horizontal div.measurement div.range_selector input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr;     /* first answer at the top */
    direction: ltr;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: none;
    background: transparent;
    cursor: pointer;
    touch-action: pan-x;           /* horizontal swipes still change question */
    -webkit-tap-highlight-color: transparent;
  }

  /* Track: a thin line centred in the slider column */
  html.horizontal body.horizontal div.measurement input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)) no-repeat;
    background-size: 5px calc(100% - var(--q-row) + var(--q-pill-h));
    background-position: calc(var(--q-slider-col) / 2 - 2.5px) center;
  }

  html.horizontal body.horizontal div.measurement input[type="range"]::-moz-range-track {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)) no-repeat;
    background-size: 5px calc(100% - var(--q-row) + var(--q-pill-h));
    background-position: calc(var(--q-slider-col) / 2 - 2.5px) center;
  }

  /* Thumb: a full-width row = pill on the track + faint highlight band
     behind the selected answer. Its height equals one answer row, so every
     step lands centred on a row. */
  html.horizontal body.horizontal div.measurement input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--q-row);
    margin: 0;
    border: none;
    border-radius: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='14'%3E%3Crect width='58' height='14' rx='5' fill='%23e6e6e6'/%3E%3C/svg%3E")
        calc(var(--q-slider-col) / 2 - var(--q-pill-w) / 2) center / var(--q-pill-w) var(--q-pill-h) no-repeat,
      linear-gradient(to right, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02))
        right center / calc(100% - var(--q-slider-col) - var(--q-gap) / 2) calc(100% - 4px) no-repeat;
  }

  html.horizontal body.horizontal div.measurement input[type="range"]::-moz-range-thumb {
    width: 100%;
    height: var(--q-row);
    border: none;
    border-radius: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='14'%3E%3Crect width='58' height='14' rx='5' fill='%23e6e6e6'/%3E%3C/svg%3E")
        calc(var(--q-slider-col) / 2 - var(--q-pill-w) / 2) center / var(--q-pill-w) var(--q-pill-h) no-repeat,
      linear-gradient(to right, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02))
        right center / calc(100% - var(--q-slider-col) - var(--q-gap) / 2) calc(100% - 4px) no-repeat;
  }

  html.horizontal body.horizontal div.measurement input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: -1px;
  }

  /* Answers sit above the slider but let taps through to it */
  html.horizontal body.horizontal div.measurement ol {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: grid;
    grid-template-rows: repeat(var(--q-rows), var(--q-row));
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0 0 calc(var(--q-slider-col) + var(--q-gap));
    box-sizing: border-box;
    list-style: none;
  }

  html.horizontal body.horizontal div.measurement ol li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex: none;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }

  /*************** Prev / Next ***************/

  html.horizontal body.horizontal div.button_group {
    display: flex;
    position: fixed;
    top: auto;
    bottom: calc(var(--q-bar-total) + var(--q-buttons-gap));
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-height: none;
    padding: 0;
    justify-content: space-between;
    background: none;
    z-index: 900;
  }

  html.horizontal body.horizontal div.button_group button {
    flex: none;
    width: var(--q-buttons-width);
    height: var(--q-buttons-height);
    padding: 0;
    border: none;
    font-family: 'Playfair Display';
    font-size: 17px;
    line-height: 1;
    text-align: center;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
  }

  html.horizontal body.horizontal div.button_group button#next_btn {
    background: rgba(255, 255, 255, 0.22);
  }

  html.horizontal body.horizontal div.button_group button span {
    font-family: inherit;
    color: inherit;
    mix-blend-mode: normal;
  }
}

/* ----------- Measurement: Phones, Landscape (two-column layout) ----------- */
@media only screen and (orientation: landscape) and (height < 500px) {

  html.horizontal {
    --q-row: 44px;
    --q-slider-col: 56px;
    --q-gap: 26px;
    --q-pill-w: 46px;
    --q-pill-h: 12px;
    --q-title-gap: 0px;
    --q-buttons-height: 36px;
    --q-buttons-gap: 14px;
    --q-title-col: 38%;
    --q-col-gap: 5%;
  }

  /* Question + Prev/Next on the left, answers on the right */
  html.horizontal body.horizontal section {
    display: grid;
    grid-template-columns: var(--q-title-col) 1fr;
    column-gap: var(--q-col-gap);
    align-items: end;
    justify-content: normal;
    padding: calc(var(--l-contact-height) + 14px) 5% calc(var(--q-bar-total) + var(--q-buttons-gap)) var(--l-text-left);
  }

  html.horizontal body.horizontal section div.title_area.full_width {
    grid-column: 1;
    margin-bottom: calc(var(--q-buttons-height) + 18px);
  }

  html.horizontal body.horizontal section:last-of-type div.title_area.full_width {
    grid-column: 1 / -1;
  }

  html.horizontal body.horizontal section div.title_area.full_width h1 {
    font-size: 20px;
  }

  html.horizontal body.horizontal section div.title_area.full_width::before {
    margin-bottom: 10px;
  }

  html.horizontal body.horizontal div.measurement {
    grid-column: 2;
  }

  html.horizontal body.horizontal div.measurement ol li {
    font-size: 12.5px;
    line-height: 1.3;
  }

  /* Buttons span the question column */
  html.horizontal body.horizontal div.button_group {
    left: var(--l-text-left);
    right: auto;
    width: calc((100vw - var(--l-text-left) - 5vw) * 0.38);
  }

  html.horizontal body.horizontal div.button_group button {
    width: 46%;
    font-size: 15px;
  }

  /* Portrait crops of the tall photos read better from the top */
  html.horizontal body.horizontal section:nth-of-type(1)::after,
  html.horizontal body.horizontal section:nth-of-type(10)::after {
    background-position: center 22%;
  }

  html.horizontal body.horizontal section:nth-of-type(7)::after,
  html.horizontal body.horizontal section:nth-of-type(8)::after {
    background-position: center 18%;
  }
}

/* ----------- Measurement: Short phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 380px) {

  html.horizontal {
    --q-row: 38px;
    --q-buttons-height: 32px;
    --q-buttons-gap: 10px;
  }

  html.horizontal body.horizontal section div.title_area.full_width h1 {
    font-size: 18px;
  }

  html.horizontal body.horizontal div.measurement ol li {
    font-size: 11.5px;
    line-height: 1.25;
  }

  html.horizontal body.horizontal div.button_group button {
    font-size: 14px;
  }
}

/* ----------- Measurement: Very short phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 340px) {

  html.horizontal {
    --q-row: 36px;
  }

  html.horizontal body.horizontal section div.title_area.full_width h1 {
    font-size: 15px;
  }

  html.horizontal body.horizontal div.measurement ol li {
    font-size: 11px;
    line-height: 1.2;
  }
}

/* ----------- Measurement: Narrow phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 500px) and (width < 700px) {

  html.horizontal {
    --q-title-col: 34%;
    --q-slider-col: 44px;
    --q-gap: 18px;
    --q-pill-w: 38px;
    --q-pill-h: 10px;
  }

  html.horizontal body.horizontal div.button_group {
    width: calc((100vw - var(--l-text-left) - 5vw) * 0.34);
  }
}

/* ----------- Measurement: Tablets, Landscape (touch) ----------- */
@media only screen and (orientation: landscape) and (height >= 500px) and (hover: none) and (pointer: coarse) {

  /* The index tablet rules move section three's photos onto its tiles;
     this page has no tiles, so keep its backdrop */
  html.horizontal body.horizontal section:nth-of-type(3)::after {
    content: '';
  }
}

/* ===================== ENTERPRISES PAGE (body.for_enterprises) =====================
   hybrid-intelligence-operating-model-for-enterprises.html. Desktop styles live
   in for_enterprises.css; every rule below is scoped to body.for_enterprises.
   Landscape phones: the section-two carousel keeps its copy on the left and
   pins the layer stack + pager on the right. Landscape tablets keep the
   desktop layout. The layer and pager keyframes (levelEnt etc., levelsPager) live in the portrait file. */

/* ----------- Enterprises: Phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 500px) {

  body.for_enterprises {
    --e-slides: 5;                                   /* intro + one slide per level */
    --e-top: calc(var(--l-banner-height) + 16px);
    --e-split: 52%;                                  /* copy | stack */
    --e-stack-scale: 0.5;
    --e-stack-shift: 20px;
  }

  /* The narrower levels drop their parent level, so their tracks are shorter */
  body.for_divisions   { --e-slides: 4; }
  body.for_departments { --e-slides: 3; }
  body.for_individuals { --e-slides: 2; }

  /* The fixed blur overlay is decorative; let touches through to the carousels */
  body.for_enterprises div.gradient_overlay {
    pointer-events: none;
  }

  /* Section four's title area is fixed to the viewport, so its (invisible)
     CTA would otherwise sit over every section and catch taps and swipes */
  body.for_enterprises section:not(.sectionFadein) div.title_area a.cta_button {
    pointer-events: none;
  }

  body.for_enterprises section::after {
    background-attachment: scroll !important;
  }

  /*************** SECTION ONE ***************/

  body.for_enterprises section:nth-of-type(1)::after {
    background-size: cover;
    background-position: center 35%;
  }

  body.for_enterprises section:nth-of-type(1) div.title_area {
    bottom: calc(var(--l-footer-height) + 30px);
  }

  body.for_enterprises section:nth-of-type(1) h1 {
    bottom: auto;
  }

  /*************** SECTION TWO ***************/

  body.for_enterprises section.two {
    display: grid;
    grid-template-rows: 100%;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    align-items: stretch;
    justify-content: normal;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-timeline: --levels x;
    timeline-scope: --lv-ent, --lv-div, --lv-dep, --lv-ind;
    background:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      url(../img/hybrid_intel_for_enterprises1.jpg) center 40% / cover no-repeat;
    background-attachment: scroll;
  }

  body.for_enterprises section.two::-webkit-scrollbar {
    display: none;
  }

  body.for_enterprises section.two::after {
    content: none;
  }

  body.for_divisions section.two {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      url(../img/enterprise_banner.png);
    background-position: 0 0, 70% center;
  }

  body.for_departments section.two {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      url(../img/hybrid_intel3.jpeg);
    background-position: 0 0, center 30%;
  }

  body.for_individuals section.two {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      url(../img/hybrid_intel3a.jpg);
    background-position: 0 0, center 25%;
  }

  body.for_enterprises section.two div.title_area {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: auto !important;
    bottom: auto !important;
    left: 0;
    width: 100% !important;     /* for_enterprises.css sets 40% !important */
    max-width: none;
    height: 100%;
    padding: var(--e-top) calc(100% - var(--e-split) + 24px) 0 var(--l-text-left);
    box-sizing: border-box;
    justify-content: flex-start;
    transform: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.for_enterprises section.two div.title_area h1 {
    width: 100%;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 12px;
    text-wrap: balance;
  }

  body.for_enterprises section.two div.title_area p {
    width: 100%;
    font-size: 13px;
  }

  body.for_enterprises section.two div.enterprise_areas {
    display: contents;
  }

  body.for_enterprises section.two div.enterprise_areas > div {
    grid-row: 1;
    position: relative;
    z-index: 200;
    right: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: auto;
    height: auto;
    padding: var(--e-top) calc(100% - var(--e-split) + 24px) 0 var(--l-text-left);
    box-sizing: border-box;
    transform: none;
    opacity: 1;
    border: none;
    border-image: none;
    cursor: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Level slides follow the intro, however many levels the page has */
  body.for_enterprises section.two div.enterprise_areas > div:nth-child(1) { grid-column: 2; }
  body.for_enterprises section.two div.enterprise_areas > div:nth-child(2) { grid-column: 3; }
  body.for_enterprises section.two div.enterprise_areas > div:nth-child(3) { grid-column: 4; }
  body.for_enterprises section.two div.enterprise_areas > div:nth-child(4) { grid-column: 5; }

  /* Each level slide drives its own layer in the stack */
  body.for_enterprises section.two div.enterprise_areas > div.enterprise   { view-timeline: --lv-ent x; }
  body.for_enterprises section.two div.enterprise_areas > div.divisions    { view-timeline: --lv-div x; }
  body.for_enterprises section.two div.enterprise_areas > div.departments  { view-timeline: --lv-dep x; }
  body.for_enterprises section.two div.enterprise_areas > div.individuals  { view-timeline: --lv-ind x; }

  /* Level pages: short "for …" slides sit at the bottom of the left column */
  body.for_divisions section.two div.enterprise_areas > div,
  body.for_departments section.two div.enterprise_areas > div,
  body.for_individuals section.two div.enterprise_areas > div {
    justify-content: flex-end;
    padding-bottom: calc(var(--l-footer-height) + 22px);
  }

  body.for_enterprises section.two div.text_block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-items: start;
    text-align: left;
    margin: 0 0 12px 0;
    padding: 0;
    align-self: stretch;
  }

  body.for_enterprises section.two div.text_block span {
    font-size: 10px;
    margin-bottom: 2px;
  }

  body.for_enterprises section.two div.enterprise_areas > div h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--white);
  }

  body.for_enterprises section.two div.model_area {
    width: 100%;
    justify-content: flex-start;
  }

  body.for_enterprises section.two div.model_area ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    width: 100%;
    margin: 0;
  }

  body.for_enterprises section.two div.departments div.model_area ul,
  body.for_enterprises section.two div.individuals div.model_area ul {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }

  body.for_enterprises section.two div.model_area ul li {
    flex-basis: auto;
    min-width: 0;
  }

  body.for_enterprises section.two div.model_area ul li h3 {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 2px;
    color: var(--white);
  }

  body.for_enterprises section.two div.model_area ul li span {
    font-size: 10px;
    font-weight: 300;
    line-height: 1.3;
  }

  /* Stack pinned in the right half, a vertical divider on its left */
  body.for_enterprises section.two div.operating_model_animation {
    grid-column: 1 / span var(--e-slides);
    grid-row: 1;
    position: sticky;
    left: 0;
    bottom: auto;
    align-self: stretch;
    justify-self: start;
    width: calc(100% / var(--e-slides));
    height: auto;
    margin: calc(var(--l-contact-height) + 6px) 0 calc(var(--l-footer-height) + 44px);
    transform: none;
    z-index: 200;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0))
      calc(var(--e-split) - 8px) center / 1px 80% no-repeat;
  }

  body.for_enterprises section.two div.operating_model_animation .stg8 {
    height: 100%;
    width: calc(100% - var(--e-split));
    margin-left: var(--e-split);
    padding: 0;
    box-sizing: border-box;
    justify-content: center;
  }

  body.for_enterprises section.two div.operating_model_animation .vp8 {
    height: 400px;
    flex: none;
    scale: var(--e-stack-scale);
    translate: 0 var(--e-stack-shift);
  }

  body.for_enterprises section.two div.operating_model_animation .btnrow8 {
    display: none;
  }

  body.for_enterprises section.two::before {
    content: "";
    grid-column: 1 / span var(--e-slides);
    grid-row: 1;
    position: sticky;
    left: calc(var(--e-split) + (100% - var(--e-split)) / 2 - (var(--e-slides) * 14px + 28px) / 2);
    align-self: end;
    justify-self: start;
    width: calc(var(--e-slides) * 14px);
    height: 28px;
    padding: 0 14px;
    margin-bottom: calc(var(--l-footer-height) + 10px);
    border-radius: 14px;
    z-index: 210;
    pointer-events: none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='5'%3E%3Crect width='14' height='5' rx='2.5' fill='white'/%3E%3C/svg%3E"),
      radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2.5px),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    background-size: 14px 5px, 14px 28px, auto;
    background-position: 0 50%, 0 50%, 0 0;
    background-repeat: no-repeat, repeat-x, no-repeat;
    background-origin: content-box, content-box, border-box;
    background-clip: content-box, content-box, border-box;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  @supports (animation-timeline: scroll()) {
    body.for_enterprises section.two::before {
      animation: levelsPager linear both;
      animation-timeline: --levels;
    }

    body.for_enterprises section.two div.enterprise_areas > div {
      pointer-events: none;
    }

    body.for_enterprises .ly8[data-k="ent"] { animation: levelEnt linear both; animation-timeline: --lv-ent; }
    body.for_enterprises .ly8[data-k="div"] { animation: levelDiv linear both; animation-timeline: --lv-div; }
    body.for_enterprises .ly8[data-k="dep"] { animation: levelDep linear both; animation-timeline: --lv-dep; }
    body.for_enterprises .ly8[data-k="ind"] { animation: levelInd linear both; animation-timeline: --lv-ind; }
  }

  /*************** SECTION THREE ***************/

  body.for_enterprises section.three {
    display: grid;
    grid-template-columns: 46% 1fr;
    grid-template-rows: 100%;
    column-gap: 4%;
    align-items: end;
    justify-content: normal;
    padding: 0;
    width: 100%;
    min-width: 100%;
  }

  /* The index rules clear section three's backdrop in landscape; this page keeps it */
  body.for_enterprises section:nth-of-type(3)::after {
    content: '';
    background-size: cover;
    background-position: 30% center;
    opacity: 0.55;
  }

  body.for_enterprises section.three div.title_area {
    grid-column: 1;
    position: relative;
    top: auto !important;
    bottom: auto !important;
    left: 0;
    width: 100% !important;     /* for_enterprises.css sets 40% !important */
    height: auto;
    margin-bottom: calc(var(--l-footer-height) + 18px);
    padding: 0 0 0 9vw;             /* the page inset; % here would resolve against the column */
    box-sizing: border-box;
    transform: none;
    justify-content: flex-end;
  }

  body.for_enterprises section.three h1,
  body.for_enterprises section.three div.title_area p {
    width: 100%;
  }

  body.for_enterprises section.three h1 {
    font-size: 21px;
    text-wrap: balance;
  }

  body.for_enterprises section.three div.title_area p {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 0;
  }

  body.for_enterprises section.three div.platform_grid {
    grid-column: 2;
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin-bottom: calc(var(--l-footer-height) + 18px);
    padding: 0 5% 0 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    z-index: 200;
  }

  body.for_enterprises section.three div.platform_grid::-webkit-scrollbar {
    display: none;
  }

  body.for_enterprises section.three div.platform_grid div {
    flex: 0 0 58%;
    width: auto;
    align-self: stretch;
    padding: 14px 14px 16px;
    box-sizing: border-box;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: auto;
  }

  body.for_enterprises section.three div.platform_grid h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  body.for_enterprises section.three div.platform_grid p {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }
}

/* ----------- Enterprises: Short phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 380px) {

  body.for_enterprises {
    --e-top: calc(var(--l-banner-height) + 10px);
    --e-stack-scale: 0.42;
    --e-stack-shift: 14px;
  }

  body.for_divisions section.two div.enterprise_areas > div,
  body.for_departments section.two div.enterprise_areas > div,
  body.for_individuals section.two div.enterprise_areas > div {
    padding-bottom: calc(var(--l-footer-height) + 8px);
  }

  body.for_enterprises section.two div.title_area h1 {
    font-size: 20px;
  }

  body.for_enterprises section.two div.title_area p {
    font-size: 12px;
  }

  body.for_enterprises section.two div.enterprise_areas > div h2 {
    font-size: 19px;
  }

  body.for_enterprises section.two div.text_block {
    margin-bottom: 8px;
  }

  body.for_enterprises section.two div.model_area ul {
    row-gap: 8px;
  }

  body.for_enterprises section.two div.model_area ul li h3 {
    font-size: 12.5px;
  }

  body.for_enterprises section.two div.model_area ul li span {
    font-size: 9.5px;
    line-height: 1.25;
  }

  body.for_enterprises section.three h1 {
    font-size: 18px;
  }

  body.for_enterprises section.three div.title_area p {
    font-size: 11px;
  }

  body.for_enterprises section.three div.platform_grid h2 {
    font-size: 16px;
  }

  body.for_enterprises section.three div.platform_grid p {
    font-size: 11px;
  }
}

/* ----------- Enterprises: Tablets, Landscape (touch) ----------- */
@media only screen and (orientation: landscape) and (height >= 500px) and (hover: none) and (pointer: coarse) {

  /* iPadOS ignores background-attachment: fixed */
  body.for_enterprises section:nth-of-type(1)::after,
  body.for_enterprises section:nth-of-type(3)::after {
    background-attachment: scroll;
  }

  /* At tablet widths the intro wraps longer than on desktop and reaches the
     stacked/individual toggle; drop the toggle into the space above the stack */
  body.for_enterprises section.two div.operating_model_animation .btnrow8 {
    top: 10px;
  }
}

/* ===================== PRIVACY POLICY PAGE =====================
   privacy-policy.html (see the portrait file for the approach). Scoped with
   :has(section.two main) so 404.html, which shares the class, is untouched. */

/* ----------- Privacy Policy: Phones, Landscape ----------- */
@media only screen and (orientation: landscape) and (height < 500px) {

  html:has(body.privacy_policy section.two main) {
    scroll-snap-type: none;
  }

  body.privacy_policy:has(section.two main) {
    height: auto;
    min-height: 100%;
  }

  body.privacy_policy:has(section.two main) section {
    scroll-snap-align: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    padding: 0;
    opacity: 1;
  }

  body.privacy_policy:has(section.two main) section.one {
    height: 72vh;
    min-height: 230px;
    flex: none;
  }

  body.privacy_policy:has(section.two main) section.one::after {
    background-image:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.7) 100%),
      url(../img/hybrid_intel_for_enterprises1.jpg);
    background-attachment: scroll;
    background-size: cover;
    background-position: center, center 35%;
    opacity: 0.9;
  }

  body.privacy_policy:has(section.two main) section.one div.title_area {
    position: absolute;
    top: auto;
    bottom: 26px;
    left: 0;
    width: 100%;
    height: auto;
    padding: 0 0 0 var(--l-text-left);
    box-sizing: border-box;
  }

  body.privacy_policy:has(section.two main) section.one h1 {
    font-size: 26px;
    margin-bottom: 8px;
  }

  body.privacy_policy:has(section.two main) section.one p.effective {
    display: block;
    font-size: 13px;
    margin: 0;
    color: var(--light-grey);
  }

  /* Reading column: a comfortable line length, aligned with the page inset */
  body.privacy_policy:has(section.two main) section.two {
    height: auto;
    overflow: visible;
    flex: none;
    background: var(--black);
    padding: 36px 5% calc(var(--l-footer-height) + 40px) var(--l-text-left);
  }

  body.privacy_policy:has(section.two main) section.two main {
    position: static;
    width: 100%;
    max-width: 40em;
  }

  body.privacy_policy:has(section.two main) section.two main h1,
  body.privacy_policy:has(section.two main) section.two main h2 {
    font-family: 'Playfair Display';
    font-weight: 400;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 12px 0;
    transform: none;
  }

  body.privacy_policy:has(section.two main) section.two main h1 {
    font-size: 22px;
  }

  body.privacy_policy:has(section.two main) section.two main h2 {
    font-size: 19px;
    margin-top: 32px;
  }

  body.privacy_policy:has(section.two main) section.two main p,
  body.privacy_policy:has(section.two main) section.two main ul,
  body.privacy_policy:has(section.two main) section.two main address {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 14px 0;
  }

  body.privacy_policy:has(section.two main) section.two main ul {
    padding-left: 18px;
  }

  body.privacy_policy:has(section.two main) section.two main ul li {
    margin: 0 0 8px 0;
  }

  body.privacy_policy:has(section.two main) section.two main address {
    font-style: normal;
  }

  body.privacy_policy:has(section.two main) section.two main strong {
    font-weight: 500;
    color: var(--white);
  }

  body.privacy_policy:has(section.two main) div.gradient_overlay,
  body.privacy_policy:has(section.two main) div.gradient_overlay.short {
    height: calc(var(--l-footer-height) + 28px);
    pointer-events: none;
  }

  body.privacy_policy:has(section.two main) div.section_indicator {
    display: none;
  }
}

/* ----------- Assessment results: Phones, Landscape ----------- */
/* Matrix and readouts side by side, clear of the logo box (see
   assessment_results.css for the desktop base). */
@media only screen and (orientation: landscape) and (height < 500px) {

  html.horizontal body.horizontal div.hi_results {
    left: calc(4% + var(--l-banner-width) + 22px);
    right: 4%;
    top: calc(var(--l-contact-height) + 10px);
    bottom: calc(var(--l-footer-height) + 10px);
  }

  div.hi_results .hi_head {
    gap: 6px 18px;
    padding-bottom: 6px;
    margin-bottom: 8px;
  }

  div.hi_results .hi_kicker,
  div.hi_results .hi_scope,
  div.hi_results .hi_axis,
  div.hi_results .hi_k {
    font-size: 9px;
  }

  div.hi_results .hi_title {
    font-size: 17px;
    margin-top: 2px;
  }

  div.hi_results .hi_level {
    font-size: 24px;
  }

  div.hi_results .hi_scope {
    margin-top: 4px;
  }

  div.hi_results .hi_body {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  div.hi_results .hi_axis_y {
    margin-bottom: 4px;
  }

  div.hi_results .hi_axis_x {
    margin-top: 4px;
  }

  div.hi_results .hi_matrix {
    grid-template-columns: 58px repeat(6, minmax(0, 1fr));
    gap: 1px;
  }

  div.hi_results .hi_cell {
    min-height: 27px;
    padding: 3px 4px;
  }

  div.hi_results .hi_xhead {
    padding: 0 3px 4px;
    font-size: 8px;
    letter-spacing: 0;
  }

  div.hi_results .hi_ylabel {
    padding: 2px 6px 2px 0;
  }

  div.hi_results .hi_num {
    font-size: 8px;
    margin-bottom: 0;
  }

  div.hi_results .hi_name {
    font-size: 11px;
  }

  div.hi_results .hi_here .hi_tag {
    font-size: 8px;
    line-height: 1.1;
  }

  div.hi_results .hi_target .hi_tag {
    font-size: 7px;
    letter-spacing: 0.05em;
  }

  div.hi_results .hi_readout {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  div.hi_results .hi_k {
    margin-bottom: 3px;
  }

  div.hi_results .hi_v {
    font-size: 15px;
  }

  div.hi_results p.hi_n {
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 3px;
  }

  div.hi_results .hi_actions {
    gap: 10px;
    margin-top: 14px;
  }

  div.hi_results .hi_actions a.cta_button:link,
  div.hi_results .hi_actions a.cta_button:visited,
  div.hi_results .hi_retake {
    font-size: 13px;
    padding: 9px 16px;
  }
}

/****************************END ALL STYLES************************************/