/* ============================================================
   Hero slider — brand slide + five documented industry firsts.
   Replaces the former 41 MB autoplay hero video.
   Loaded on index.html only. Pairs with assets/hero-slider.js
   ============================================================ */

/* --- Stage ------------------------------------------------- */
/* The base .hero is a centring flex box with its own padding. The slider
   needs each slide to own the full stage instead, so the background image
   fills edge to edge — so neutralise those two here and re-apply the
   padding on the slide.                                                  */
.hero-slider{
  position:relative;
  isolation:isolate;
  display:block;
  padding:0;
  --hero-stage:calc(100vh - 130px);
}
.hero-slider .hero-slides{
  display:grid;              /* all slides stack in one cell   */
  width:100%;
  /* A default `auto` grid track floors at min-content, so the longest
     unbreakable headline widens the track past the viewport and the copy
     gets clipped on narrow phones. minmax(0,1fr) + min-width:0 lets the
     track shrink and the text wrap instead. */
  grid-template-columns:minmax(0, 1fr);
}
.hero-slider .hero-slide{
  grid-area:1 / 1;
  position:relative;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  min-height:var(--hero-stage);
  padding:96px 0 104px;      /* bottom clears the controls row */
  opacity:0;
  visibility:hidden;
  transition:opacity 620ms ease;
  pointer-events:none;
}
.hero-slider .hero-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  position:relative;
  z-index:1;
}

/* No-JS / pre-JS: show the first slide and let the rest stack
   below rather than vanish. JS adds .js-ready to take over.   */
.hero-slider:not(.js-ready) .hero-slide{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.hero-slider:not(.js-ready) .hero-slides{
  display:block;
}

/* --- Background image -------------------------------------- */
.hero-slider .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-slider .hero-bg picture,
.hero-slider .hero-bg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
/* Scrim — the base .hero-bg::after gradient is tuned for a dark video.
   Photography is brighter and busier, so deepen it for text legibility. */
.hero-slider .hero-bg::after{
  background:
    linear-gradient(95deg,
      rgba(0,20,38,.88) 0%,
      rgba(0,25,45,.72) 30%,
      rgba(0,45,80,.38) 58%,
      rgba(0,51,89,.10) 82%),
    linear-gradient(0deg,
      rgba(0,20,38,.55) 0%,
      rgba(0,20,38,.10) 34%,
      rgba(0,20,38,0) 60%);
}

/* Slow drift on the active slide — stopped for reduced motion */
.hero-slider.js-ready .hero-slide.is-active .hero-bg img{
  animation:heroDrift 14s ease-out forwards;
}
@keyframes heroDrift{
  from{ transform:scale(1.045); }
  to  { transform:scale(1); }
}

/* --- Copy --------------------------------------------------- */
.hero-slider .hero-inner{
  position:relative;
  z-index:1;
  width:100%;
}
.hero-slider .hero-copy{
  max-width:620px;
}
/* The base h1 carries a 160px bottom margin to clear the old hero video's
   animated wordmark. With the video gone that is dead space — bring the
   brand slide back into the same rhythm as the story slides.            */
.hero-slider .hero-copy h1{
  margin-bottom:22px;
}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *{
  animation:heroCopyIn 620ms cubic-bezier(.22,.61,.36,1) both;
}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(1){animation-delay:60ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(2){animation-delay:130ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(3){animation-delay:200ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(4){animation-delay:265ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(5){animation-delay:325ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(6){animation-delay:380ms}
@keyframes heroCopyIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* Badges + location line */
.hero-slider .hero-flags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.hero-slider .hero-badge{
  display:inline-block;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  background:var(--teal);
  color:#fff;
}
.hero-slider .hero-badge--world{
  background:var(--coral);
}
.hero-slider .hero-loc{
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(255,255,255,.86);
}
.hero-slider .hero-loc .flag{
  font-size:14px;
  margin-right:3px;
}

/* Story headline — matches the h1 scale of the brand slide */
.hero-slider .hero-title{
  font-family:var(--font-display);
  font-size:clamp(38px, 6vw, 76px);
  line-height:.97;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 14px;
  text-wrap:balance;
}
.hero-slider .hero-title .first-word{
  color:var(--teal-light);
}
.hero-slider .hero-project{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.8);
  margin:0 0 16px;
}
.hero-slider .hero-copy .lede{
  max-width:56ch;
}
.hero-slider .hero-source{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.68);
}
.hero-slider .hero-source .dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.5);
}

/* News link chip — points a slide at a related story on this site */
.hero-slider .hero-news{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  margin-top:18px;
  padding:7px 14px 7px 8px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-sm);
  background:rgba(0,20,38,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:rgba(255,255,255,.92);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.35;
  text-decoration:none;
  transition:background .2s ease-out, border-color .2s ease-out;
}
.hero-slider .hero-news:hover,
.hero-slider .hero-news:focus-visible{
  background:rgba(0,20,38,.62);
  border-color:var(--teal-light);
}
.hero-slider .hero-news-tag{
  flex:none;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:var(--radius-sm);
  background:var(--teal);
  color:#fff;
}
.hero-slider .hero-news-arrow{
  flex:none;
  color:var(--teal-light);
  transition:transform .2s ease-out;
}
.hero-slider .hero-news:hover .hero-news-arrow{ transform:translateX(3px); }

/* --- Controls ------------------------------------------------ */
.hero-slider .hero-controls{
  position:absolute;
  left:0; right:0;
  bottom:28px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 20px;
}
.hero-slider .hero-arrow,
.hero-slider .hero-playpause{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;      /* 44px minimum touch target */
  flex:0 0 auto;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  background:rgba(0,28,48,.42);
  color:#fff;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.hero-slider .hero-arrow:hover,
.hero-slider .hero-playpause:hover{
  background:var(--teal);
  border-color:var(--teal);
}
.hero-slider .hero-arrow:active{ transform:scale(.94); }
.hero-slider .hero-arrow:focus-visible,
.hero-slider .hero-playpause:focus-visible,
.hero-slider .hero-dot:focus-visible{
  outline:2px solid var(--teal-light);
  outline-offset:3px;
}
.hero-slider .hero-playpause{ width:38px;height:38px; }
.hero-slider .hero-playpause .ico-play{ display:none; }
.hero-slider .hero-playpause[aria-pressed="true"] .ico-play{ display:block; }
.hero-slider .hero-playpause[aria-pressed="true"] .ico-pause{ display:none; }

/* Dots — each is a progress bar for the active slide */
.hero-slider .hero-dots{
  display:flex;
  align-items:center;
  gap:8px;
}
/* The button is a full 44px-tall touch target; the visible bar is the
   .track inside it, so the hit area is never clipped by the bar's
   overflow:hidden.                                                     */
.hero-slider .hero-dot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:width 260ms ease;
}
.hero-slider .hero-dot .track{
  display:block;
  position:relative;
  width:100%;
  height:4px;
  border-radius:3px;
  background:rgba(255,255,255,.34);
  overflow:hidden;
  transition:background 200ms ease;
}
.hero-slider .hero-dot[aria-selected="true"]{
  width:58px;
}
.hero-slider .hero-dot[aria-selected="true"] .track{
  background:rgba(255,255,255,.28);
}
.hero-slider .hero-dot .bar{
  position:absolute;
  inset:0;
  width:0;
  background:var(--teal);
  border-radius:3px;
}
.hero-slider .hero-dot[aria-selected="true"] .bar{
  width:100%;
  transform-origin:left center;
}
.hero-slider .hero-dot[aria-selected="true"] .bar.run{
  animation:heroDotFill var(--hero-dur,7000ms) linear forwards;
}
@keyframes heroDotFill{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
/* Paused: hold the bar where it is */
.hero-slider.is-paused .hero-dot .bar.run{
  animation-play-state:paused;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width:900px){
  .hero-slider{ --hero-stage:56vh; }
  .hero-slider .hero-slide{ padding:56px 0 76px; }
  .hero-slider .hero-copy{ max-width:100%; }
  .hero-slider .hero-title{ font-size:clamp(28px,7vw,44px); }
}
@media (max-width:640px){
  /* On phones the image is what makes the hero — show it in full at the
     top of the slide, then the copy in a navy panel below.  This replaces
     the overlay-on-image layout, which buried the photo behind the scrim. */
  .hero-slider{ --hero-stage:auto; }
  .hero-slider .hero-slide{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:0;
    min-height:auto;
  }
  /* Image band — relative-positioned block at the top of the slide */
  .hero-slider .hero-bg{
    position:relative;
    inset:auto;
    height:240px;
    flex:0 0 240px;
  }
  .hero-slider .hero-bg img{ object-position:center 45%; }
  /* Very light bottom-only fade so the image blends into the copy panel */
  .hero-slider .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(0,20,38,0) 0%,
      rgba(0,20,38,0) 62%,
      rgba(0,20,38,0.55) 100%);
  }
  /* Copy panel below the image, sitting on the hero's navy background */
  .hero-slider .hero-inner{
    flex:1 1 auto;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    padding:22px 18px 76px;   /* bottom clears the controls row */
  }
  .hero-slider .hero-copy{ max-width:100%; padding-bottom:0; }
  /* Big text as requested */
  .hero-slider .hero-title{
    font-size:clamp(28px,8vw,42px);
    line-height:1.02;
  }
  .hero-slider .hero-copy .lede{
    font-size:14px;
    line-height:1.5;
    margin-bottom:14px;
  }
  .hero-slider .hero-source{ font-size:11px; margin-top:6px; }
  .hero-slider .hero-news{ margin-top:10px; font-size:11px; padding:5px 10px 5px 6px; gap:8px; }
  .hero-slider .hero-news-tag{ font-size:9px; padding:3px 6px; }
  /* Much smaller CTA buttons */
  .hero-slider .hero-actions{
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }
  .hero-slider .hero-actions .btn{
    padding:7px 12px;
    font-size:10.5px;
    letter-spacing:1px;
    line-height:1.2;
    min-height:0;
  }
  /* Controls sit at the bottom of the copy panel */
  .hero-slider .hero-controls{
    bottom:14px;
    gap:8px;
    padding:0 16px;
  }
  .hero-slider .hero-arrow{ width:34px;height:34px; }
  .hero-slider .hero-playpause{ display:none; }
  .hero-slider .hero-dot{ width:18px; }
  .hero-slider .hero-dot[aria-selected="true"]{ width:30px; }
}

/* --- Motion / contrast preferences --------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-slider .hero-slide{ transition:none; }
  .hero-slider.js-ready .hero-slide.is-active .hero-bg img,
  .hero-slider.js-ready .hero-slide.is-active .hero-copy > *{
    animation:none;
  }
  .hero-slider .hero-dot .bar.run{ animation:none; }
  .hero-slider .hero-dot[aria-selected="true"] .bar{ transform:scaleX(1); }
}
@media (prefers-contrast:more){
  .hero-slider .hero-loc,
  .hero-slider .hero-project,
  .hero-slider .hero-source{ color:#fff; }
}

/* --- Brand slide (mission headline) ---------------------------------
   "Subsea solutions. / Design. Build. Operate." is a longer headline than
   the story slides carry, and at the shared 620px column it broke across
   four lines mid-phrase (SUBSEA / SOLUTIONS. / DESIGN. BUILD. / OPERATE.).
   Give the brand slide a wider column and a slightly tighter scale so it
   sets on its two intended lines. Story slides are untouched.          */
.hero-slider .hero-copy.hero-copy--brand{
  /* 880px, not the 814px the second line actually measures: the extra slack
     keeps the line from wrapping if the display face falls back to a wider
     one. Still well inside the 1216px container at its 1280px max.       */
  max-width:880px;
}
.hero-slider .hero-copy--brand h1{
  font-size:clamp(40px, 5vw, 60px);
  text-wrap:balance;
}
@media (max-width:1024px){
  .hero-slider .hero-copy.hero-copy--brand{ max-width:100%; }
}
/* Phones have ~354px of text column at 390px wide. Measured at the display
   face: "SUBSEA SOLUTIONS." needs <=30px to hold one line, and
   "DESIGN. BUILD. OPERATE." cannot hold one line at any readable size. So
   cap at 30px and let it set as three lines with both phrases intact,
   rather than four with "SUBSEA / SOLUTIONS." split across a break.     */
@media (max-width:640px){
  .hero-slider .hero-copy--brand h1{ font-size:clamp(26px, 7.6vw, 30px); }
}