/* Echo Valley — mobile/tablet menu and small responsive fixes (added in the Cloudflare rebuild) */

/* Compact header: below 1280px the desktop menu no longer fits, so use the hamburger + overlay */
.ev-ham-sticky { display: none; }
@media (max-width: 1279px) {
  #-pro-menu-8-5981, #-pro-menu-161-5981 { display: none !important; }
  #code_block-145-5981, .ev-ham-sticky { display: block !important; margin-right: 10px; }
  #fancy_icon-141-5981 { display: none !important; }   /* search icon had no function */
  .menuhdmobile svg { display: block; }
}
@media (max-width: 1279px) {
  #_header_row-154-5981 .menuhdmobile svg { width: 44px; height: 44px; }
}

/* Overlay menu */
.ev-mnav {
  position: fixed; inset: 0; z-index: 2147483639;
  background: #141825;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 150px 40px 60px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
html.ev-mnav-open .ev-mnav { opacity: 1; visibility: visible; transition: opacity .3s ease; }
html.ev-mnav-open, html.ev-mnav-open body { overflow: hidden; }
html.ev-mnav-open #_header-1-5981 { z-index: 2147483640 !important; }
html.ev-mnav-open #_header-1-5981:not(.oxy-sticky-header-active) { position: fixed; top: 0; left: 0; right: 0; }

.ev-mnav ul { list-style: none; margin: 0; padding: 0; }
.ev-mnav-list { max-width: 560px; }
.ev-mnav-list > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ev-mnav-list > li.ev-mnav-group { border-bottom: 0; }
.ev-mnav a {
  display: block; padding: 14px 0;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #ffffff; text-decoration: none;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ev-mnav a:hover, .ev-mnav a:focus-visible, .ev-mnav a[aria-current="page"] { color: #fa4055; }
.ev-mnav a:focus-visible { outline: 2px solid #fa4055; outline-offset: 4px; }
.ev-mnav-label {
  display: block; padding: 26px 0 6px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: #aaaaaa;
}
.ev-mnav-group ul a { font-size: 19px; font-weight: 500; padding: 10px 0; }
@media (min-width: 768px) {
  .ev-mnav { padding: 170px 80px 80px; }
  .ev-mnav a { font-size: 26px; }
  .ev-mnav-group ul a { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-mnav, html.ev-mnav-open .ev-mnav { transition: none; }
}

/* ---- Responsive fixes for layouts that were wider than the screen (page zoomed out / cut off) ---- */

/* Phones: two-column grids with 200px minimum columns -> one column */
@media (max-width: 767px) {
  #div_block-24-8244, #div_block-38-8244, #div_block-51-8244, #div_block-59-8244,
  #div_block-69-8244, #div_block-80-8244, #div_block-109-8244,
  #div_block-47-168,
  #div_block-6-8187, #div_block-23-8187, #div_block-41-8187, #div_block-50-8187,
  #div_block-62-8187, #div_block-74-8187,
  #div_block-9-8196, #div_block-1065-747 {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-column-gap: 0 !important;
  }
  /* Instagram embeds sat side by side in half-width columns (Instagram needs ~326px) -> stack them */
  #section-71-168 > .ct-section-inner-wrap, #div_block-127-8302 { flex-direction: column !important; }
  #div_block-73-168, #div_block-75-168, #div_block-130-8302, #div_block-144-8302 { width: 100% !important; }
  .instagram-media { min-width: 0 !important; max-width: 100% !important; }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  #_dynamic_list-1087-747 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }   /* Recent Work */
}
@media (min-width: 768px) and (max-width: 1279px) {
  #div_block-996-747 { gap: 40px !important; }                      /* ECHO ECHO ECHO block */
  #image-998-747 { max-width: 100%; height: auto; }
  #div_block-1005-747 { max-width: 100%; }
  #div_block-7-210 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-column-gap: 24px !important; }
}

/* Desktop: the hidden About dropdown hung off the right edge and added a sideways scrollbar.
   Anchor it to the right of "About", which is where it already appears when opened. */
.oxy-pro-menu-list > .menu-item-has-children > .sub-menu { left: auto !important; right: 0 !important; }

/* ---- Gear page (R501) ---- */
/* One-column intro, same type as the "We travel to the most remote areas..." block on Services */
.ev-gear-intro { margin-top: 38px; max-width: 960px; text-align: center; font-size: 30px; line-height: 50px; color: #f8f4f1; }
#section-3-8187 > .ct-section-inner-wrap { align-items: center; }
/* Equipment rows added after the move: same look as the Oxygen rows (white | cream halves, red rule) */
.ev-gear-row { background-image: linear-gradient(90deg, #ffffff 50%, #f8f4f1 50%); border-bottom: 1px solid #fa4055; }
.ev-gear-row.ev-gear-last { border-bottom: 0; }
.ev-gear-row > .ct-section-inner-wrap { padding-top: 0; padding-bottom: 0; }
.ev-gear-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-column-gap: 20px; grid-row-gap: 20px; align-items: center; width: 100%; }
.ev-gear-media { align-items: center; padding: 40px 0; }
.ev-gear-media img { display: block; width: 100%; max-width: 640px; height: auto; }
.ev-gear-text { padding-left: 35px; }
.ev-gear-text .ct-text-block { max-width: 570px; color: #141825; }
.ev-gear-text .ct-span { font-size: 30px; }
@media (max-width: 767px) {
  .ev-gear-row { background-image: none; background-color: #ffffff; }
  .ev-gear-row > .ct-section-inner-wrap { padding-top: 30px; padding-bottom: 30px; }
  .ev-gear-grid { grid-template-columns: minmax(0, 1fr); grid-column-gap: 0; }
  .ev-gear-media { padding: 0; }
  .ev-gear-text { padding-left: 0; }
}

/* ---- Our Story (R502): keep the two blurb columns under the logo within the page width used elsewhere ---- */
#div_block-47-168 { max-width: 1200px; }

/* ---- Home (R507): drama poster strip in place of the ridge photo, same 375px band ---- */
#section-898-747.ev-home-posters { background-image: none; background-color: #141825; height: auto; }
#section-898-747.ev-home-posters > .ct-section-inner-wrap { max-width: 100%; padding: 51px 0; }
@media (max-width: 767px) {
  #section-898-747.ev-home-posters > .ct-section-inner-wrap { padding: 30px 0; }
}

/* ---- Poster strip: drag / swipe (ev-posters.js) ---- */
.poster-slider { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.poster-slider.ev-dragging { cursor: grabbing; }
.poster-slider img { -webkit-user-drag: none; }
.poster-slider.ev-dragging .poster-track img:hover { transform: none; }
/* Drama page: the poster strip is several thousand px wide and centred; trim it to the screen so the page
   doesn't scroll sideways on desktop or render zoomed out on phones (looks the same as before). */
#section-2-8228 { overflow-x: hidden; overflow-x: clip; }

/* ---- SEO: headings promoted to H1 keep their previous look ---- */
.ev-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
h1.ev-h1 { font-size: 30px; line-height: 36px; }
h2#headline-912-747 { line-height: 34.5px; }
/* Main page titles (reel pages, Reel, home "Recent Work") had gone near-black (#111) on the navy background */
#headline-4-8228, h2#headline-912-747 { color: #ffffff; }

/* ---- Articles, Safety, CAA 102 and FAQ pages ---- */
.ev-hero { background: #141825; }
.ev-hero img { display: block; width: 100%; height: clamp(260px, 34vw, 500px); object-fit: cover; }
.ev-article-section { background: #141825; color: #f8f4f1; }
.ev-article-section > .ct-section-inner-wrap { padding-top: 56px; padding-bottom: 96px; align-items: center; }
.ev-prose { width: 100%; max-width: 760px; font-family: 'IBM Plex Sans', sans-serif; font-size: 19px; line-height: 1.7; }
.ev-prose:has(.ev-cards) { max-width: 1000px; }
.ev-prose h1 { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 44px; line-height: 1.15; font-weight: 700; color: #ffffff; margin: 14px 0 18px; }
.ev-prose h2 { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 28px; line-height: 1.25; font-weight: 700; color: #fa4055; margin: 48px 0 12px; }
.ev-prose h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: 21px; line-height: 1.35; font-weight: 700; color: #ffffff; margin: 28px 0 6px; }
.ev-prose p { margin: 0 0 18px; }
.ev-prose ul { margin: 0 0 22px; padding-left: 22px; }
.ev-prose li { margin: 6px 0; }
.ev-prose a { color: #fa4055; text-decoration: underline; text-underline-offset: 3px; }
.ev-prose a:hover { color: #ffffff; }
.ev-prose strong { color: #ffffff; }
.ev-lede { font-size: 22px; line-height: 1.6; color: #ffffff; }
.ev-meta { color: #aaaaaa; font-size: 15px; letter-spacing: .02em; }
.ev-note { color: #aaaaaa; font-size: 15px; }
.ev-crumbs { font-size: 13px; color: #aaaaaa; text-transform: uppercase; letter-spacing: .14em; }
.ev-prose .ev-crumbs a { color: #aaaaaa; text-decoration: none; }
.ev-prose .ev-crumbs a:hover { color: #fa4055; }
.ev-sep { margin: 0 6px; opacity: .6; }
.ev-table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.ev-prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.ev-prose th, .ev-prose td { border-bottom: 1px solid rgba(248, 244, 241, .15); padding: 10px 12px; text-align: left; vertical-align: top; }
.ev-prose thead th { color: #fa4055; font-weight: 700; }
.ev-prose tbody th { color: #ffffff; font-weight: 600; }
.ev-prose blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid #fa4055; font-size: 21px; color: #ffffff; }
.ev-prose blockquote p { margin: 0; }
.ev-prose cite { display: block; margin-top: 8px; font-size: 15px; font-style: normal; color: #aaaaaa; }
.ev-checklist { list-style: none; padding-left: 0 !important; }
.ev-checklist li { padding-left: 30px; position: relative; }
.ev-checklist li::before { content: '\2713'; position: absolute; left: 4px; color: #fa4055; font-weight: 700; }
.ev-cta { margin-top: 56px; padding: 28px; background: rgba(248, 244, 241, .06); border-left: 3px solid #fa4055; }
.ev-cta p { margin-bottom: 18px; }
.ev-prose .ev-cta a.ct-link-button { color: #ffffff; text-decoration: none; }
.ev-cards { list-style: none; padding: 0 !important; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ev-cards li { margin: 0; }
.ev-prose .ev-card a { display: block; height: 100%; text-decoration: none; color: inherit; background: rgba(248, 244, 241, .05); transition: background .2s ease; }
.ev-prose .ev-card a:hover { background: rgba(248, 244, 241, .1); color: inherit; }
.ev-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ev-card-body { display: block; padding: 18px 20px 22px; }
.ev-card-title { display: block; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 23px; line-height: 1.25; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.ev-card-desc { display: block; font-size: 16px; line-height: 1.55; color: #cccccc; }
.ev-card-more { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; color: #fa4055; }
@media (max-width: 767px) {
  .ev-article-section > .ct-section-inner-wrap { padding-top: 36px; padding-bottom: 64px; }
  .ev-prose { font-size: 17px; }
  .ev-prose h1 { font-size: 32px; }
  .ev-prose h2 { font-size: 24px; margin-top: 38px; }
  .ev-prose h3 { font-size: 19px; }
  .ev-lede { font-size: 19px; }
  .ev-prose blockquote { font-size: 19px; }
  .ev-cards { grid-template-columns: minmax(0, 1fr); }
  .ev-cta { padding: 22px; }
}

/* Home hero: keep the "Love from above" lettering in the banner centred on tablet widths */
@media (min-width: 768px) and (max-width: 1439px) {
  #section-876-747 { background-position: 50% 50%; }
}