#seafarers {
  --navy: #000955;
  --lime: #8ce500;
  --lime-light: #c0ff6b;
  --off: #fefff9;
  --grey: #b4b4b4;
  --cpt-navy: #000955;
  --cpt-lime: #8ce500;
  --cpt-off-white: #fefff9;
  --cpt-grey: #b4b4b4;
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  overflow: hidden;
  background: var(--cpt-off-white);
  color: var(--cpt-navy);
  text-align: center;
  font-family: Inter, Arial, sans-serif;
}

#seafarers .cpt-seafarers__inner {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#seafarers .cpt-seafarer-intro,
#seafarers .cpt-seafarer-intro h2,
#seafarers .cpt-seafarer-intro p,
#seafarers .cpt-seafarer-stage,
#seafarers .cpt-seafarer-copy,
#seafarers .cpt-seafarer-content,
#seafarers .cpt-seafarer-content h3,
#seafarers .cpt-seafarer-content p,
#seafarers .cpt-seafarer-image {
  margin: 0;
}

#seafarers .cpt-seafarer-intro h2 > span {
  display: block;
}

#seafarers .cpt-seafarer-controls > button {
  appearance: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  letter-spacing: 0;
  transition: none;
}

#seafarers .cpt-seafarer-image,
#seafarers .cpt-seafarer-image img {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}

#seafarers .cpt-seafarer-image img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (min-width: 1001px) {
  #seafarers {
    padding: 100px 40px 50px;
  }

  #seafarers .cpt-seafarer-intro {
    max-width: 1096px;
    margin: 0 auto 40px;
  }

  #seafarers .cpt-seafarer-intro h2 {
    font: 800 36px/39px Archivo, sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-intro h2 .cpt-heading-secondary {
    font: 100 36px/39px Archivo, sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-intro p {
    max-width: 1096px;
    margin: 40px auto 0;
    font: 400 24px/29px "CPT Inter Figma", sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-tabs {
    width: 100%;
    max-width: 1468px;
    margin: 0 auto;
  }

  #seafarers .cpt-seafarer-controls {
    display: grid;
    grid-template-columns: 289fr 280fr 288fr 287fr 289fr;
    width: 100%;
    height: 71px;
    margin: 0;
    padding: 0;
  }

  #seafarers .cpt-seafarer-controls > button {
    min-width: 0;
    height: 71px;
    margin: 0;
    padding: 20px 0;
    border: 1px solid var(--cpt-grey);
    background: var(--cpt-off-white);
    color: var(--cpt-navy);
    font: 400 24px/29px "CPT Inter Figma", sans-serif;
    letter-spacing: 0;
    text-align: center;
  }

  #seafarers .cpt-seafarer-controls > button:nth-of-type(1) { border-right: 0; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(3) { border-left: 0; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(4) { border-inline: 0; }

  #seafarers .cpt-seafarer-controls > button[aria-selected="true"] {
    background: var(--cpt-navy);
    color: var(--cpt-off-white);
  }

  #seafarers .cpt-seafarer-stage {
    display: grid;
    grid-template-columns: 720fr 748fr;
    width: 100%;
    height: 720px;
    min-height: 0;
    padding: 0;
    background: var(--cpt-navy);
  }

  #seafarers .cpt-seafarer-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 720px;
    padding: 50px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    text-align: left;
  }

  #seafarers .cpt-seafarer-content h3 {
    margin: 0 0 40px;
    color: #fff;
    font: 100 36px/39px Archivo, sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-content p {
    max-width: none;
    color: #fff;
    font: 400 24px/29px "CPT Inter Figma", sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-copy .cpt-button {
    flex: 0 0 54px;
    width: 352px;
    max-width: 100%;
    height: 54px;
    min-height: 54px;
    margin: 0;
    padding: 17px 20px;
    align-self: flex-start;
  }

  #seafarers .cpt-seafarer-copy .cpt-button__label {
    height: 17px;
    font: 600 14px/17px "CPT Inter Figma", sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-image {
    min-width: 0;
    height: 720px;
    overflow: hidden;
  }

  #seafarers :is([role="tab"], [role="tabpanel"], .cpt-button):focus-visible {
    outline: 3px solid #a0ef00;
    outline-offset: -5px;
  }
}

@media (max-width: 767px) {
  #seafarers {
    padding: 50px 20px;
  }

  #seafarers .cpt-seafarer-intro {
    max-width: 400px;
    margin: 0 auto 20px;
  }

  #seafarers .cpt-seafarer-intro h2 {
    font: 800 24px/26px Archivo, sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-intro h2 .cpt-heading-secondary {
    font: 100 24px/26px Archivo, sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-intro p {
    margin: 20px 0 0;
    font: 400 16px/19px "CPT Inter Figma", sans-serif;
  }

  #seafarers .cpt-seafarer-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    overflow-anchor: none;
  }

  #seafarers .cpt-seafarer-controls {
    display: contents;
  }

  #seafarers .cpt-seafarer-controls > button {
    flex: none;
    min-width: 0;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 17px 20px;
    border: 1px solid var(--cpt-grey);
    border-bottom: 0;
    border-radius: 2.5px;
    background: var(--cpt-navy);
    color: var(--cpt-off-white);
    text-align: left;
    font: 600 14px/17px "CPT Inter Figma", sans-serif;
  }

  #seafarers .cpt-seafarer-controls > button:last-of-type {
    height: 53px;
    border-bottom: 1px solid var(--cpt-grey);
  }

  #seafarers .cpt-seafarer-controls > button:nth-of-type(1) { order: 0; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(2) { order: 2; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(3) { order: 4; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(4) { order: 6; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(5) { order: 8; }

  #seafarers .cpt-seafarer-stage {
    order: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 20px;
    padding: 0;
    background: var(--cpt-navy);
  }

  #seafarers .cpt-seafarer-image {
    order: 0;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  #seafarers .cpt-seafarer-copy {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 50px 20px;
    border: 1px solid #fff;
    border-top: 0;
    text-align: left;
  }

  #seafarers .cpt-seafarer-content h3 {
    margin: 0 0 20px;
    color: #fff;
    font: 100 24px/26px Archivo, sans-serif;
    letter-spacing: 0;
  }

  #seafarers .cpt-seafarer-content p {
    max-width: none;
    color: #fff;
    font: 400 16px/19px "CPT Inter Figma", sans-serif;
  }

  #seafarers .cpt-seafarer-copy .cpt-button {
    width: 100%;
    height: 54px;
    min-height: 54px;
    margin: 0;
    padding: 17px 20px;
  }

  #seafarers .cpt-seafarer-copy .cpt-button__label {
    height: 17px;
    font: 600 14px/17px "CPT Inter Figma", sans-serif;
  }

  #seafarers :is(button, .cpt-button):focus-visible {
    outline: 3px solid var(--cpt-lime);
    outline-offset: -5px;
  }
}

@media (hover: none), (pointer: coarse) {
  #seafarers .cpt-button:hover { transform: none; }
  #seafarers .cpt-button:hover .cpt-button__label::before { transform: translateY(0); }
  #seafarers .cpt-button:hover .cpt-button__label::after { transform: translateY(115%); }
}

/* Source responsive-bridge.css, rem resolved at the prototype's 16px root.
   Bricks uses a 10px root: do not change the site's global font sizing. */
@media (min-width: 768px) and (max-width: 1099px) {
  #seafarers { padding: 50px clamp(20px, calc(9.523808px + 2.380952vw), 40px); }
  #seafarers .cpt-seafarer-intro { max-width: 768px; margin: 0 auto 40px; }
  #seafarers .cpt-seafarer-intro h2 { margin: 0; font: 800 32px/1.083333 Archivo, sans-serif; letter-spacing: 0; }
  #seafarers .cpt-seafarer-intro h2 .cpt-heading-secondary { font: 100 32px/1.083333 Archivo, sans-serif; letter-spacing: 0; }
  #seafarers .cpt-seafarer-intro p { margin: 20px 0 0; font: 400 18px/1.4 "CPT Inter Figma", sans-serif; }
  #seafarers .cpt-seafarer-tabs { display: flex; flex-direction: column; width: 100%; max-width: none; margin: auto; overflow-anchor: none; }
  #seafarers .cpt-seafarer-controls { display: contents; }
  #seafarers .cpt-seafarer-controls > button { flex: none; min-width: 0; width: 100%; height: 56px; padding: 17px 24px; margin: 0; border: 1px solid var(--grey); border-bottom: 0; border-radius: 2.5px; background: var(--navy); color: var(--off); text-align: left; font: 600 14px/17px "CPT Inter Figma", sans-serif; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(n) { border-inline: 1px solid var(--grey); }
  #seafarers .cpt-seafarer-controls > button:last-of-type { border-bottom: 1px solid var(--grey); }
  #seafarers .cpt-seafarer-stage { display: flex; flex-direction: column; height: auto; min-height: 0; margin-bottom: 20px; background: var(--navy); }
  #seafarers .cpt-seafarer-image { order: 0; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; }
  #seafarers .cpt-seafarer-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  #seafarers .cpt-seafarer-copy { order: 1; display: flex; flex-direction: column; align-items: stretch; gap: 40px; height: auto; min-height: 0; padding: 40px; border: 1px solid #fff; border-top: 0; text-align: left; }
  #seafarers .cpt-seafarer-copy h3 { margin: 0 0 20px; font: 100 28px/1.1 Archivo, sans-serif; color: #fff; }
  #seafarers .cpt-seafarer-copy p { margin: 0; max-width: none; font: 400 16px/1.4 "CPT Inter Figma", sans-serif; color: #fff; }
  #seafarers .cpt-seafarer-copy .cpt-button { flex: none; width: min(100%, 352px); max-width: 100%; height: 54px; min-height: 54px; margin: 0; padding: 17px 20px; }
  #seafarers .cpt-button__label { height: 17px; font: 600 14px/17px "CPT Inter Figma", sans-serif; }
  #seafarers :is(button, a):focus-visible { outline: 3px solid var(--lime); outline-offset: -5px; }
}

/* Static/Builder fallback and live stage share the same visual ordering. */
@media (max-width: 1099px) {
  #seafarers .cpt-seafarer-controls > button { justify-content: flex-start; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(1) { order: 0; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(2) { order: 2; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(3) { order: 4; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(4) { order: 6; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(5) { order: 8; }
  #seafarers .cpt-seafarer-stage { order: 1; }
  #seafarers .cpt-seafarer-stage[data-cpt-state="help"] { margin-bottom: 0; }
}
@media (min-width: 1548px) {
  #seafarers .cpt-seafarer-controls > button:nth-of-type(1) { padding-inline: 78px; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(2) { padding-inline: 103px; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(3) { padding-inline: 76px; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(4) { padding-inline: 67px; }
  #seafarers .cpt-seafarer-controls > button:nth-of-type(5) { padding-inline: 113px; }
}

/* Phase 5B.1 designer override: widen landscape, preserve portrait and tablet. */
@media (min-width: 441px) and (max-width: 767px) {
  #seafarers .cpt-seafarer-tabs { max-width: none; }
  #seafarers .cpt-seafarer-image { height: auto; aspect-ratio: 1; }
  #seafarers .cpt-seafarer-copy .cpt-button { max-width: 400px; }
}