/* Supplied PNG physically scrolls above the hero and its elements. */
:root{--transition-blue:#000308;--transition-height:max(60.520833vw,100svh);--transition-start:calc(var(--hero-height,100svh) * .85)}
.hero-journey,.scroll-scenes .hero-journey{height:calc(var(--transition-start) + var(--transition-height));background:var(--transition-blue);position:relative}
.hero-journey .hero,.scroll-scenes .hero-journey .hero{position:sticky;top:0}
.hero-image{background-image:url('/assets/hero-background.jpg');background-position:center center;background-size:cover;opacity:1;transform:none!important;animation:none!important;filter:none}
.hero-shade{background:linear-gradient(180deg,#00030865,transparent 28%,#00030815 65%,#00030855)}
.hero-copy,.hero-topline,.hero-bottom{opacity:1!important;visibility:visible!important;transform:none!important}
.hero .instrument{opacity:.45!important;visibility:visible!important}
.hero-copy h1{transform:none!important}
.foreground-transition{position:absolute;top:var(--transition-start);left:0;width:100%;height:var(--transition-height);z-index:100;pointer-events:none;line-height:0}
.foreground-transition img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
/* Exact receiving colour specified by the user and sampled from the PNG. */
body,.partner-strip,.approach,.ocean-study figcaption{background:var(--transition-blue)}
.partner-strip{border-top:0}
.approach{position:relative}
.paused .hero-journey{height:auto}
.paused .hero-journey .hero{position:relative}
.paused .foreground-transition{position:relative;top:auto;height:55svh;margin-top:-1px}
.paused .foreground-transition img{object-fit:cover;object-position:center bottom}
@media(prefers-reduced-motion:reduce){.scroll-scenes .hero-journey{height:auto}.scroll-scenes .hero-journey .hero{position:relative}.foreground-transition{position:relative;top:auto;height:55svh;margin-top:-1px}.foreground-transition img{object-fit:cover;object-position:center bottom}}


@media(max-width:700px){.hero-description{top:30%}}

/* Independent scroll layers behind the foreground PNG. */
.hero-copy h1{filter:blur(var(--title-blur,0px));will-change:filter}
.hero-description{transform:translate3d(0,var(--description-rise,0px),0);will-change:transform}
.hero-copy .hero-explore{transform:translate3d(0,var(--explore-rise,0px),0);will-change:transform}
.paused .hero-copy h1{filter:none;will-change:auto}
.paused .hero-description,.paused .hero-copy .hero-explore{transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.hero-copy h1{filter:none;will-change:auto}.hero-description,.hero-copy .hero-explore{transform:none;will-change:auto}}

/* Flat navigation blocks; the hero's Explore link keeps its underline. */
.header-enquire{min-width:128px;min-height:44px;padding:12px 22px;border:0;border-radius:0;background:rgba(148,163,184,.22);text-align:center;transition:background .2s}
.header-enquire span{display:none}
.menu-toggle{width:128px;min-height:44px;padding:12px 22px;background:rgba(148,163,184,.22);border-radius:0;transition:background .2s}
.header-enquire:hover,.menu-toggle:hover{background:rgba(148,163,184,.38)}
.header nav a{padding:16px 28px;background:rgba(148,163,184,.15);border:0;border-radius:0;box-shadow:none;transition:background .2s}
.header nav a:hover{background:rgba(148,163,184,.3);box-shadow:none}
.hero-copy h1{transform:translate3d(0,var(--title-rise,0px),0)!important;will-change:filter,transform}
.paused .hero-copy h1{transform:none!important;will-change:auto}
@media(max-width:700px){.header-enquire{min-width:82px;padding:12px 14px}.menu-toggle{width:70px;padding:12px 23px}.header nav a{padding:14px 20px;font-size:clamp(2rem,8vw,3.6rem)}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{transform:none!important;will-change:auto}}

/* Cool the remaining underwater photography to sit with the navy palette. */
.chapter-photo,.depth-image{filter:hue-rotate(22deg) saturate(.65)}

/* Full-width venture chapters, alternating the editorial and index columns. */
.expanded-venture .flagship-content{grid-column:1;grid-row:1}
.expanded-venture .operations-index{grid-column:2;grid-row:1}
.expanded-venture.reversed{grid-template-columns:.7fr 1.1fr}
.expanded-venture.reversed .flagship-content{grid-column:2}
.expanded-venture.reversed .operations-index{grid-column:1}
.expanded-venture .espresso-word{font-size:4.3rem;margin-bottom:40px}
.expanded-venture .espresso-word>span{font-size:.875rem;letter-spacing:.28em}
.expanded-venture .laiq-word{font-size:4.6rem;margin-bottom:35px;line-height:1}
.expanded-venture .investment-label{font-size:.875rem!important;color:#b8c8db!important}
#espresso .chapter-photo{background-image:url('/assets/water.jpeg');background-position:center 65%;filter:saturate(.7)}
#espresso:before{background:linear-gradient(270deg,#081626e6,#08162670),linear-gradient(180deg,#081626,transparent 20%,transparent 78%,#081626)}
#laiq .chapter-photo{background-image:url('/assets/water2.jpeg');background-position:center 60%}
@media(max-width:700px){.expanded-venture .espresso-word{font-size:3.2rem}.expanded-venture .laiq-word{font-size:3.6rem}.expanded-venture.reversed{display:block}.expanded-venture .operations-index{padding-top:50px}}

/* Expanded AI ventures use solid navy surfaces, without photography. */
#espresso{background:#081626}
#laiq{background:#102235}
#espresso:before,#laiq:before{display:none}

/* Supplied brand artwork and the September image collection. */
.brand img{display:block;width:210px;height:auto}
.partner-strip a img{display:block;width:190px;max-height:65px;object-fit:contain}
.flagship-content .infra-word,.expanded-venture .espresso-word,.expanded-venture .laiq-word{margin:0 0 38px;line-height:1}
.flagship-content .infra-word img,.flagship-content .espresso-word img,.flagship-content .laiq-word img{display:block;width:300px;max-width:100%;height:auto;max-height:110px;object-fit:contain;object-position:left center}
.ocean-study img{height:auto;aspect-ratio:1.45;object-fit:cover;object-position:42% center}
#infraspeak .chapter-photo{background-image:url('/assets/facility-intelligence.jpg');background-position:center;filter:saturate(.55)}
#infraspeak:before{background:linear-gradient(90deg,#081626ed,#081626b8),linear-gradient(180deg,#081626,transparent 25%,transparent 75%,#081626)}
.depth-image{background-image:url('/assets/people-and-technology.jpg');background-position:center 35%;filter:none}
@media(max-width:700px){.brand img{width:145px}.partner-strip a img{width:135px;max-height:48px}.flagship-content .infra-word img,.flagship-content .espresso-word img,.flagship-content .laiq-word img{width:250px}.ocean-study{width:100%}}

/* Fade the supplied PNG's partially opaque top edge into the hero. */
.foreground-transition img{mask-image:linear-gradient(to bottom,transparent,#000 40%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%)}

/* Keep the headline clear until the foreground reaches it during scroll. */
.hero-copy h1{overflow:visible;padding-block:.08em;line-height:.95}
/* Frame the whole people image instead of enlarging it for parallax overscan. */
.depth-section{min-height:max(56vw,780px);background:#081626}
.depth-image{inset:0;background-size:100% auto;background-position:center top;background-repeat:no-repeat;transform:none!important;will-change:auto}
.depth-overlay{background:linear-gradient(to bottom,#08162615,#08162635 35%,#081626d9 80%,#081626)}
.depth-content{padding:clamp(240px,24vw,400px) 7% 100px}
@media(max-width:700px){
 .hero-journey .hero{min-height:640px}
 .hero-copy h1{font-size:12.2vw;bottom:18%;line-height:1.05}
 .depth-section{min-height:0}
 .depth-content{padding:calc(55.833vw + 32px) 6% 75px}
 .depth-content h2{font-size:clamp(2.5rem,9vw,3.25rem)}
 .depth-overlay{background:linear-gradient(to bottom,transparent 0,#08162600 35vw,#081626 56vw)}
}

/* ---------------------------------------------------------------
   Hero title: three lines ("FACILITY / TECHNOLOGY / INTEGRATOR")
   replacing the previous two. Set smaller overall, with all three
   lines at one weight so the lockup reads as a single statement.
   --------------------------------------------------------------- */
.hero-copy h1{font-size:clamp(3.2rem,8.4vw,9.4rem);line-height:.9;bottom:6%}
.hero-copy h1 .title-line:first-child{font-size:1em;letter-spacing:-.02em;margin-bottom:0}
/* The base stylesheet only delays line 2; line 3 needs its own beat. */
.hero-copy .title-line:nth-child(3){animation-delay:.24s}

/* LAIQ headline value proposition, set above the supporting copy. */
.expanded-venture .value-prop{
  font-family:'Newsreader',serif;
  font-size:clamp(1.25rem,1.8vw,1.6rem)!important;
  line-height:1.35;
  color:#fff!important;
  margin-bottom:18px;
}

@media(max-width:700px){
  .hero-copy h1{font-size:10.4vw;bottom:20%;line-height:1}
  .hero-copy h1 .title-line:first-child{font-size:1em}
  .expanded-venture .value-prop{font-size:1.2rem!important}
  /* The enlarged sail logo occupies the mid-band on phones, so the
     explore link drops below it instead of sitting across it. */
  .hero-copy .hero-explore{top:auto;bottom:34%}
}

/* ---------------------------------------------------------------
   Espresso Ventures logo is a stacked two-line lockup (ratio 2.11)
   where Infraspeak and LAIQ are wide single lines. The shared
   max-height:110px would clamp it and render it visibly smaller
   than its siblings, so it gets its own ceiling.
   --------------------------------------------------------------- */
.flagship-content .espresso-word img{max-height:150px}
.partner-strip .espresso-word img{max-height:64px}
@media(max-width:700px){
  .flagship-content .espresso-word img{max-height:124px}
  .partner-strip .espresso-word img{max-height:52px}
}

/* ---------------------------------------------------------------
   Venture index panels on phones.
   The shared mobile rules indent the panel 12% and stack a 50px
   padding on a 20px margin, which left a dead gap under the CTA and
   pushed the numeral out of alignment with the copy. Forcing the
   rows to flex-direction:row also crushed longer descriptions
   ("Understanding" ran into its own text).
   --------------------------------------------------------------- */
@media(max-width:700px){
  .flagship .operations-index{
    padding-left:0;
    padding-top:12px;
    margin-top:0;
  }
  .flagship .operations-index .index-number{
    font-size:5.5rem;
    margin-bottom:14px;
    display:block;
  }
  /* Label above, description below: no collision at any length. */
  .flagship .operations-index li{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:16px 0;
  }
  .flagship .operations-index li>span{font-size:1.05rem}
  .flagship .operations-index li small{text-align:left}
}

/* ---------------------------------------------------------------
   Tablet: the ecosystem strip sizes its logos at a fixed 190px,
   which overflows the viewport between the desktop and phone
   breakpoints. Let the row wrap and scale the logos to fit.
   --------------------------------------------------------------- */
@media(min-width:701px) and (max-width:1024px){
  .partner-strip{flex-wrap:wrap;gap:28px 32px}
  .partner-strip a img{width:clamp(120px,17vw,190px);max-height:56px}
}