:root {
  --ob-adaptive-navy: #061b34;
  --ob-adaptive-blue: #0d63c9;
  --ob-adaptive-gold: #efb545;
  --ob-adaptive-ink: #0b2445;
  --ob-adaptive-pale: #f4f8fc;
  --ob-adaptive-cream: #fffaf1;
  --ob-adaptive-rail: 1280px;
  --ob-adaptive-gutter: clamp(32px, 5vw, 80px);
}

/*
 * Tablet and desktop redesign only. The approved phone presentation remains
 * owned by orabuena-mobile-preview.css at 820px and below.
 */
@media (min-width: 821px) {
  html,
  body,
  body .site:has(.ob-approved) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: #fff !important;
    overflow-x: hidden !important;
  }

  body .site:has(.ob-approved) #main-header {
    width: 100% !important;
    height: 70px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e8edf2 !important;
  }

  body .site:has(.ob-approved) #main-header .site-header-row-container-inner,
  body .site:has(.ob-approved) #main-header .site-header-row {
    min-height: 70px !important;
    height: 70px !important;
  }

  body .site:has(.ob-approved) #main-header .site-container {
    width: min(calc(100% - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail)) !important;
    max-width: var(--ob-adaptive-rail) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  body .site:has(.ob-approved) #main-header .site-title {
    color: var(--ob-adaptive-ink) !important;
    font-size: 25px !important;
  }

  body .site:has(.ob-approved) #main-header .primary-menu-container a {
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  body .entry-content .ob-approved.alignfull,
  body .ob-approved,
  body .ob-approved .alignfull {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .ob-approved {
    position: relative !important;
    --ob-connector-rail: min(calc(100vw - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail));
  }

  /*
   * Gutenberg inserts an inner Group wrapper between .ob-approved and the
   * Kadence rows. Target that real hierarchy so section content uses the
   * approved editorial rail instead of silently expanding to the viewport.
   */
  body .ob-approved > .wp-block-group__inner-container > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    width: min(calc(100% - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail)) !important;
    max-width: var(--ob-adaptive-rail) !important;
    margin-inline: auto !important;
  }

  /*
   * Continue the real gold-path artwork from the planner fold through the
   * narrative and workflow. Multiply preserves the underlying white/cream
   * section colors because the supplied connector asset has a white canvas.
   */
  body .ob-approved::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    /* Compensate for the clear canvas above the first gold pixel at every width. */
    top: calc(56.25vw - clamp(28px, 4.3vw, 67px)) !important;
    left: 50% !important;
    width: min(calc(100% - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail)) !important;
    /* Stretch the line vertically so its arrow run lands on the desktop flow cards. */
    aspect-ratio: 1 / 1 !important;
    transform: translateX(-50%) !important;
    background-image: url("https://orabuena.com/wp-content/uploads/2026/09/exec-9ff69089-3a54-4289-af06-a4979189e315.png") !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    mix-blend-mode: multiply !important;
    opacity: 0.58 !important;
    pointer-events: none !important;
    display: none !important;
  }

  body .site:has(.ob-approved) .content-container,
  body .site:has(.ob-approved) .site-main,
  body .site:has(.ob-approved) .content-area,
  body .site:has(.ob-approved) article,
  body .site:has(.ob-approved) .entry-content-wrap,
  body .site:has(.ob-approved) .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .ob-approved p,
  body .ob-approved li {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }

  body .ob-approved h2 {
    font-size: clamp(30px, 2.45vw, 42px) !important;
    line-height: 1.1 !important;
  }

  body .ob-approved h3 {
    font-size: 20px !important;
  }

  body .ob-approved .wp-block-button__link {
    min-height: 48px !important;
    padding: 13px 22px !important;
    font-size: 15px !important;
  }

  body .ob-approved > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    width: min(calc(100% - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail)) !important;
    max-width: var(--ob-adaptive-rail) !important;
    margin-inline: auto !important;
  }

  body .ob-approved .ob-hero {
    min-height: 56.25vw !important;
    height: 56.25vw !important;
    aspect-ratio: auto !important;
    background-color: var(--ob-adaptive-navy) !important;
    background-image: url("https://orabuena.com/wp-content/uploads/2026/09/orabuena-hero-planner-flow.png") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: auto 100% !important;
  }

  body .ob-approved .ob-hero::before {
    display: none !important;
  }

  body .ob-approved .ob-hero > .kt-row-column-wrap {
    width: min(calc(100% - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail)) !important;
    min-height: 56.25vw !important;
    height: 56.25vw !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  body .ob-approved .ob-hero-copy {
    width: min(48%, 590px) !important;
    height: 100% !important;
    background: transparent !important;
  }

  body .ob-approved .ob-hero-copy .kt-inside-inner-col {
    width: 100% !important;
    max-width: 590px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: clamp(76px, 6.5vw, 104px) 0 48px !important;
  }

  body .ob-approved .ob-hero-copy h1 {
    max-width: 570px !important;
    margin: 0 0 24px !important;
    color: #fff !important;
    font-size: clamp(42px, 3.35vw, 58px) !important;
    font-weight: 400 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
  }

  body .ob-approved .ob-hero-copy h1 span {
    display: inline !important;
    white-space: normal !important;
  }

  body .ob-approved .ob-hero-copy h1 span:not(:last-child)::after {
    content: " " !important;
  }

  body .ob-approved .ob-hero-copy p {
    max-width: 440px !important;
    margin-bottom: 24px !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
  }

  body .ob-approved .ob-hero .wp-block-buttons {
    gap: 14px !important;
  }

  body .ob-approved .ob-story {
    overflow: visible !important;
    background: #fff !important;
  }

  body .ob-approved .ob-story > .kt-row-column-wrap {
    padding: 76px 0 72px !important;
  }

  body .ob-approved .ob-centered {
    max-width: 780px !important;
  }

  body .ob-approved .ob-centered h2 {
    margin-bottom: 22px !important;
    white-space: normal !important;
  }

  body .ob-approved.ob-approved .ob-centered h2 {
    font-size: clamp(30px, 2.45vw, 42px) !important;
    line-height: 1.1 !important;
  }

  body .ob-approved .ob-centered p {
    max-width: 740px !important;
    margin: 0 auto 18px !important;
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  body .ob-approved .ob-flow {
    margin-top: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body .ob-approved .ob-flow .kt-row-column-wrap {
    position: relative !important;
    padding: 28px 30px 66px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(28px, 4vw, 64px) !important;
  }

  body .ob-approved .ob-flow-card img {
    width: 52px !important;
    height: 52px !important;
    padding: 14px !important;
    background: #fff !important;
  }

  body .ob-approved .ob-flow-card p {
    margin-top: 16px !important;
    font-size: 19px !important;
    line-height: 1.28 !important;
  }

  /* Recompose the existing gold connector system on the wider rail. */
  body .ob-approved .ob-story::before,
  body .ob-approved .ob-story::after {
    display: none !important;
  }

  body .ob-approved .ob-flow .kt-row-column-wrap::before {
    left: 13.3% !important;
    top: 69px !important;
    width: 73.4% !important;
    border-color: var(--ob-adaptive-gold) !important;
  }

  body .ob-approved .ob-flow::before {
    left: calc((100% - min(calc(100% - (2 * var(--ob-adaptive-gutter))), var(--ob-adaptive-rail))) / 2 + 13.3%) !important;
    top: 61px !important;
    width: min(73.4%, 940px) !important;
    background-position: 33% 0, 66% 0, 99% 0 !important;
  }

  body .ob-approved .ob-flow::after,
  body .ob-approved .ob-vision::before,
  body .ob-approved .ob-vision::after {
    display: none !important;
  }

  body .ob-approved .ob-vision {
    background: var(--ob-adaptive-cream) !important;
  }

  body .ob-approved .ob-vision > .kt-row-column-wrap {
    padding: 68px 90px 72px !important;
  }

  body .ob-approved .ob-vision h2 {
    margin-bottom: 12px !important;
  }

  body .ob-approved .ob-vision p {
    font-size: 17px !important;
  }

  body .ob-approved .ob-vision .wp-block-list {
    max-width: 1020px !important;
    margin: 34px auto 0 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 80px !important;
  }

  body .ob-approved .ob-vision li {
    padding-left: 28px !important;
    font-size: 16px !important;
  }

  body .ob-approved .ob-authority {
    margin-top: 0 !important;
    background: var(--ob-adaptive-pale) !important;
  }

  body .ob-approved .ob-authority > .kt-row-column-wrap {
    padding: 58px 90px !important;
  }

  body .ob-approved .ob-authority-inner {
    max-width: 950px !important;
    grid-template-columns: 122px minmax(0, 1fr) !important;
    gap: 42px !important;
  }

  body .ob-approved .ob-authority-inner img {
    width: 88px !important;
    height: 88px !important;
    padding: 16px !important;
  }

  body .ob-approved .ob-authority-inner::before {
    content: none !important;
    display: none !important;
  }

  body .ob-approved .ob-authority-inner h2 {
    margin-bottom: 14px !important;
    font-size: clamp(31px, 2.3vw, 39px) !important;
  }

  body .ob-approved .ob-authority-inner p {
    font-size: 16px !important;
  }

  body .ob-approved .ob-research {
    padding-top: 54px !important;
    border-top: 0 !important;
    background: #fff !important;
  }

  body .ob-approved .ob-research > .kt-row-column-wrap {
    padding: 0 0 18px !important;
  }

  body .ob-approved .ob-research h2 {
    font-size: clamp(30px, 2.45vw, 42px) !important;
  }

  body .ob-approved .ob-research-grid {
    padding-bottom: 58px !important;
    background: #fff !important;
  }

  body .ob-approved .ob-research-grid .kt-row-column-wrap {
    padding: 14px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 26px !important;
  }

  body .ob-approved .ob-research-card {
    min-height: 154px !important;
    padding: 26px 28px !important;
    text-align: left !important;
    background: var(--ob-adaptive-pale) !important;
    border: 1px solid #e6edf4 !important;
    border-radius: 8px !important;
  }

  body .ob-approved .ob-research-card .kt-inside-inner-col {
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    column-gap: 20px !important;
    align-items: start !important;
  }

  body .ob-approved .ob-research-card figure {
    grid-row: 1 / span 2 !important;
  }

  body .ob-approved .ob-research-card img {
    width: 44px !important;
    height: 44px !important;
    margin: 2px 0 0 !important;
  }

  body .ob-approved .ob-research-card h3,
  body .ob-approved .ob-research-card p {
    grid-column: 2 !important;
    text-align: left !important;
  }

  body .ob-approved .ob-research-card h3 {
    margin: 0 0 8px !important;
    font-size: 21px !important;
  }

  body .ob-approved .ob-research-card p {
    margin: 0 !important;
    font-size: 15px !important;
  }

  body .ob-approved .ob-founding-wrap {
    background: var(--ob-adaptive-cream) !important;
  }

  body .ob-approved .ob-founding-wrap > .kt-row-column-wrap {
    padding: 70px 0 !important;
  }

  body .ob-approved .ob-founding {
    padding: 34px !important;
    border-radius: 10px !important;
  }

  body .ob-approved .ob-founding-row .kt-row-column-wrap {
    grid-template-columns: 116px minmax(0, 1fr) minmax(280px, 0.72fr) !important;
    gap: 34px !important;
  }

  body .ob-approved .ob-sun img {
    width: 96px !important;
  }

  body .ob-approved .ob-founding-copy h2 {
    font-size: 34px !important;
  }

  body .ob-approved .ob-founding-copy p,
  body .ob-approved .ob-founding-copy li,
  body .ob-approved .ob-invite p {
    font-size: 15px !important;
  }

  body .ob-approved .ob-invite {
    padding: 24px !important;
  }

  body .ob-approved .ob-invite h3 {
    font-size: 21px !important;
  }

  body .ob-approved .ob-invite .wp-block-button__link {
    font-size: 14px !important;
  }

  body .ob-approved .ob-journal > .kt-row-column-wrap {
    padding: 74px 0 !important;
  }

  body .ob-approved .ob-journal-row .kt-row-column-wrap {
    grid-template-columns: 0.8fr 1.35fr !important;
    gap: 70px !important;
  }

  body .ob-approved .ob-journal h2 {
    margin-bottom: 16px !important;
    font-size: 36px !important;
  }

  body .ob-approved .ob-journal p {
    font-size: 16px !important;
  }

  body .ob-approved .ob-journal-row .kt-has-2-columns > .wp-block-kadence-column:nth-child(2) > .kt-inside-inner-col {
    min-height: 300px !important;
    border-radius: 9px !important;
  }

  body .ob-approved .ob-final {
    min-height: 260px !important;
    height: auto !important;
    background: var(--ob-adaptive-pale) !important;
    overflow: visible !important;
  }

  body .ob-approved .ob-final > .kt-row-column-wrap {
    min-height: 260px !important;
    height: auto !important;
    padding: 42px 0 !important;
  }

  body .ob-approved .ob-final .ob-final-icon img {
    width: 46px !important;
  }

  body .ob-approved .ob-final h2 {
    margin: 8px 0 !important;
    font-size: 38px !important;
  }

  body .ob-approved .ob-final p {
    max-width: 650px !important;
    margin: 0 auto 18px !important;
    font-size: 16px !important;
  }

  body .ob-approved .ob-page-footer {
    height: auto !important;
    min-height: 310px !important;
    overflow: visible !important;
    background: var(--ob-adaptive-navy) !important;
  }

  body .ob-approved .ob-page-footer > .kt-row-column-wrap {
    position: relative !important;
    height: auto !important;
    min-height: 310px !important;
    padding: 58px 0 78px !important;
    display: grid !important;
    grid-template-columns: 1.35fr 0.85fr 0.7fr 1.35fr !important;
    grid-template-rows: auto !important;
    gap: 54px !important;
  }

  body .ob-approved .ob-page-footer > .kt-row-column-wrap > .wp-block-kadence-column {
    min-height: 0 !important;
    overflow: visible !important;
  }

  body .ob-approved .ob-page-footer h3 {
    margin-bottom: 14px !important;
    font-size: 22px !important;
  }

  body .ob-approved .ob-page-footer p,
  body .ob-approved .ob-page-footer a,
  body .ob-approved .ob-page-footer li {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  body .ob-approved .ob-page-footer-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 24px !important;
    height: auto !important;
    padding-top: 17px !important;
    font-size: 12px !important;
  }

  body .ob-approved .ob-page-footer-bottom a {
    font-size: 12px !important;
    margin-inline: 5px !important;
  }

  body .ob-approved.ob-approved .ob-flow {
    margin-top: 0 !important;
  }

  body .ob-approved.ob-approved .ob-story::before,
  body .ob-approved.ob-approved .ob-story::after,
  body .ob-approved.ob-approved .ob-flow::before,
  body .ob-approved.ob-approved .ob-flow::after,
  body .ob-approved.ob-approved .ob-flow .kt-row-column-wrap::before,
  body .ob-approved.ob-approved .ob-vision::before,
  body .ob-approved.ob-approved .ob-vision::after {
    display: none !important;
  }
}

@media (max-width: 820px) {
  body .ob-approved::after {
    display: none !important;
  }
}

/*
 * Expanded-desktop connector geometry.
 * Each segment is anchored to the section and editorial rail it describes,
 * so widening the viewport cannot pull the line away from the planner, icons,
 * vision copy, or authority handoff.
 */
@media (min-width: 1100px) {
  /*
   * Keep the full desktop headline on a calm navy field. The source image's
   * baked-in dark transition starts underneath the longest line of copy at
   * wider viewports, so extend that field before fading into the photograph.
   */
  body .ob-approved .ob-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 auto 0 0 !important;
    width: 100% !important;
    background: linear-gradient(
      90deg,
      rgba(6, 27, 52, 1) 0%,
      rgba(6, 27, 52, 0.98) 49%,
      rgba(6, 27, 52, 0) 64%,
      rgba(6, 27, 52, 0) 100%
    ) !important;
    pointer-events: none !important;
  }

  body .ob-approved .ob-hero > .kt-row-column-wrap {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Keep the whole workflow row above the sibling right-return layer. The
     row's own rail stays at z-index 1, while its cards remain at z-index 2. */
  body .ob-approved.ob-approved .ob-flow .kt-row-column-wrap {
    z-index: 2 !important;
  }

  body .ob-approved.ob-approved .ob-story::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 91px !important;
    left: calc(50% - (var(--ob-connector-rail) / 2)) !important;
    right: auto !important;
    width: calc(var(--ob-connector-rail) / 8) !important;
    height: calc(100% - 22px) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: 1.5px solid var(--ob-adaptive-gold) !important;
    border-bottom: 1.5px solid var(--ob-adaptive-gold) !important;
    border-radius: 0 0 0 92px !important;
    background: none !important;
    pointer-events: none !important;
  }

  /*
   * The planner exits the 3:2 source photograph at 45.35% of the 16:9 hero.
   * Keep that long top run separate from the shorter run into the first icon;
   * a single rectangle cannot land both endpoints correctly.
   */
  body .ob-approved.ob-approved .ob-story::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: -1px !important;
    left: calc(50% - (var(--ob-connector-rail) / 2)) !important;
    right: 54.65% !important;
    width: auto !important;
    height: 93px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1.5px solid var(--ob-adaptive-gold) !important;
    border-left: 1.5px solid var(--ob-adaptive-gold) !important;
    border-radius: 92px 0 0 0 !important;
    /* Clear the original fixed-canvas connector image; otherwise it renders a
       second path underneath this breakpoint-specific continuation. */
    background: none !important;
    pointer-events: none !important;
  }

  /* The icon disks must cover the rail so it visibly passes behind them. */
  body .ob-approved.ob-approved .ob-flow-card figure,
  body .ob-approved.ob-approved .ob-flow-card img {
    position: relative !important;
    z-index: 3 !important;
  }

  body .ob-approved.ob-approved .ob-flow .kt-row-column-wrap::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    left: 12.5% !important;
    right: 12.5% !important;
    top: 69px !important;
    width: auto !important;
    height: 1px !important;
    border: 0 !important;
    border-top: 1.5px solid var(--ob-adaptive-gold) !important;
    pointer-events: none !important;
  }

  body .ob-approved.ob-approved .ob-flow::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 60px !important;
    left: calc(50% - (var(--ob-connector-rail) / 2)) !important;
    width: var(--ob-connector-rail) !important;
    height: 19px !important;
    border: 0 !important;
    background-image: url("orabuena-arrow-right.svg"), url("orabuena-arrow-right.svg"), url("orabuena-arrow-right.svg") !important;
    background-position: 25% center, 50% center, 75% center !important;
    background-repeat: no-repeat !important;
    background-size: 19px 19px !important;
    pointer-events: none !important;
  }

  body .ob-approved.ob-approved .ob-flow::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 69px !important;
    left: calc(50% + (3 * var(--ob-connector-rail) / 8)) !important;
    width: calc(var(--ob-connector-rail) / 8) !important;
    height: calc(100% + 87px - 69px) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1.5px solid var(--ob-adaptive-gold) !important;
    border-right: 1.5px solid var(--ob-adaptive-gold) !important;
    border-bottom: 1.5px solid var(--ob-adaptive-gold) !important;
    border-radius: 0 84px 84px 0 !important;
    pointer-events: none !important;
  }

  /* Continue the right-hand return behind the vision heading until it meets
     the left loop. This closes the gap between the workflow and vision paths. */
  body .ob-approved.ob-approved .ob-vision > .kt-row-column-wrap {
    position: relative !important;
    z-index: 2 !important;
  }

  body .ob-approved.ob-approved .ob-vision > .kt-row-column-wrap::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    left: calc(var(--ob-connector-rail) / 8) !important;
    right: 0 !important;
    height: 88px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-right: 1.5px solid var(--ob-adaptive-gold) !important;
    border-bottom: 1.5px solid var(--ob-adaptive-gold) !important;
    border-radius: 0 0 84px 0 !important;
    pointer-events: none !important;
  }

  body .ob-approved.ob-approved .ob-vision h2 {
    position: relative !important;
    z-index: 2 !important;
    width: max-content !important;
    max-width: calc(100% - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    background: var(--ob-adaptive-cream) !important;
  }

  body .ob-approved.ob-approved .ob-vision::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 87px !important;
    left: calc(50% - (var(--ob-connector-rail) / 2)) !important;
    width: calc(var(--ob-connector-rail) / 8) !important;
    /* Stop above the final return; that return is anchored to the authority
       figure below so its line and arrow remain a single responsive unit. */
    height: calc(100% - 52px) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1.5px solid var(--ob-adaptive-gold) !important;
    border-left: 1.5px solid var(--ob-adaptive-gold) !important;
    border-bottom: 0 !important;
    border-radius: 84px 0 0 0 !important;
    background: none !important;
    pointer-events: none !important;
  }

  body .ob-approved.ob-approved .ob-vision::after {
    content: none !important;
    display: none !important;
    position: absolute !important;
    z-index: 2 !important;
    top: calc(100% + 109.5px) !important;
    right: auto !important;
    left: calc(50% - (var(--ob-connector-rail) / 2) + (var(--ob-connector-rail) / 8) - 19px) !important;
    bottom: auto !important;
    width: 19px !important;
    height: 19px !important;
    background: url("orabuena-arrow-right.svg") center / 19px 19px no-repeat !important;
    pointer-events: none !important;
  }

  /* Anchor the final handoff arrow to its target rather than to the preceding
     section's rail. This preserves a consistent clear gap as the authority
     grid shifts between compact and wide desktop layouts. */
  body .ob-approved.ob-approved .ob-authority-inner figure {
    position: relative !important;
    z-index: 4 !important;
  }

  body .ob-approved.ob-approved .ob-authority-inner figure::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    right: calc(100% + 5px) !important;
    width: 19px !important;
    height: 19px !important;
    transform: translateY(-50%) !important;
    background: url("orabuena-arrow-right.svg") center / 19px 19px no-repeat !important;
    pointer-events: none !important;
  }

  /* Draw the final rounded return and horizontal run from the same anchor as
     the arrow. The one-pixel overlap into the SVG shaft prevents an
     anti-aliased seam while the left edge remains locked to the connector
     rail at every width. */
  body .ob-approved.ob-approved .ob-authority-inner figure::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    top: calc(50% - 97px) !important;
    right: calc(100% + 20px) !important;
    width: calc(70px + max(0px, (var(--ob-connector-rail) - 1130px) / 2)) !important;
    height: 97px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: 1.5px solid var(--ob-adaptive-gold) !important;
    border-bottom: 1.5px solid var(--ob-adaptive-gold) !important;
    border-bottom-left-radius: min(84px, 100%) !important;
    background: none !important;
    pointer-events: none !important;
  }

  body .ob-approved.ob-approved .ob-vision {
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  body .ob-approved.ob-approved .ob-authority {
    position: relative !important;
    z-index: 1 !important;
  }

  body .ob-approved.ob-approved .ob-authority-inner {
    position: relative !important;
    z-index: 3 !important;
  }
}

@media (min-width: 821px) and (max-width: 1099px) {
  :root {
    --ob-adaptive-gutter: clamp(32px, 4.5vw, 48px);
  }

  body .ob-approved .ob-hero {
    min-height: 56.25vw !important;
    height: 56.25vw !important;
    background-position: 68% center !important;
  }

  body .ob-approved .ob-hero > .kt-row-column-wrap {
    min-height: 56.25vw !important;
    height: 56.25vw !important;
  }

  body .ob-approved .ob-hero-copy {
    width: 62% !important;
    background: rgba(6, 27, 52, 0.54) !important;
  }

  body .ob-approved .ob-hero-copy .kt-inside-inner-col {
    padding: clamp(44px, 6vw, 66px) 20px 26px 0 !important;
  }

  body .ob-approved .ob-hero-copy h1 {
    margin-bottom: 18px !important;
    font-size: clamp(36px, 4.2vw, 43px) !important;
  }

  body .ob-approved .ob-hero-copy p {
    margin-bottom: 18px !important;
    font-size: 17px !important;
  }

  body .ob-approved .ob-hero .wp-block-buttons {
    gap: 8px !important;
  }

  body .ob-approved .ob-hero .wp-block-button__link {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  body .ob-approved .ob-story > .kt-row-column-wrap {
    padding-top: 58px !important;
  }

  body .ob-approved .ob-flow .kt-row-column-wrap {
    gap: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .ob-approved .ob-flow-card p {
    font-size: 16px !important;
  }

  body .ob-approved .ob-vision > .kt-row-column-wrap,
  body .ob-approved .ob-authority > .kt-row-column-wrap {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  body .ob-approved .ob-founding-row .kt-row-column-wrap {
    grid-template-columns: 94px minmax(0, 1fr) !important;
  }

  body .ob-approved .ob-founding-row .wp-block-kadence-column:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  body .ob-approved .ob-invite {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px 28px !important;
    align-items: center !important;
  }

  body .ob-approved .ob-invite .wp-block-buttons {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  body .ob-approved .ob-journal-row .kt-row-column-wrap {
    gap: 42px !important;
  }

  body .ob-approved .ob-page-footer > .kt-row-column-wrap {
    grid-template-columns: 1.25fr 0.8fr 0.7fr 1.25fr !important;
    gap: 28px !important;
  }
}