/* =========================================================
   TRAVEL ADVISOR OPPORTUNITY — self-contained section
   ========================================================= */
.advisor-opportunity{
  --advisor-bg:#faf7f0;
  --advisor-bg-soft:#f3ecda;
  --advisor-gold:#e4a917;
  --advisor-gold-dark:#b07d0c;
  --advisor-white:#ffffff;
  --advisor-ink:#15233c;
  --advisor-body:#4a3d29;
  --advisor-border:rgba(21,34,56,.12);
  --advisor-card:#ffffff;
  --advisor-radius-card:13px;
  --advisor-radius-pill:999px;
  --ao-tuck:0px;
  --ao-photo-inset:clamp(14px,2.1vw,36px);
  --advisor-serif:"Cormorant Garamond",Georgia,serif;
  --advisor-script:"Allura",cursive;
  --advisor-sans:"Manrope","Poppins",Arial,sans-serif;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  z-index:1;
  /* the cream/palm plate, carried up under the hero wave so the
     palm shadows meet the gold edge (see .hero-wave in styles.css) */
  background-color:#fbf4e4;
  background-image:url("../images/advisor-bg.jpg");
  background-size:100% auto;
  background-position:center calc(-1 * var(--hero-wave-h));
  background-repeat:no-repeat;
  font-family:var(--advisor-sans);
}
.advisor-opportunity::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(180,125,12,.32); z-index:6;
}

/* flight path - scales with the section instead of living in the plate */
.ao-flight{
  position:absolute; z-index:1; pointer-events:none;
  left:clamp(10px,4.2vw,86px);
  bottom:clamp(10px,2.2vw,44px);
  width:clamp(300px,52vw,900px); height:auto;
  opacity:.9;
}

/* ---- layout ---- */
.advisor-opportunity__inner{
  position:relative; z-index:2;
  width:100%; max-width:1760px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  align-items:stretch;
  /* Height is content-driven and capped - it is NOT tied to the plate.
     The plate anchors to the top at natural scale (see background-* above),
     its lower edge fades to flat cream, and background-color carries on
     below, so the section can be any height at any screen size. */
  min-height:clamp(420px, 40vw, 740px);
}

/* =========================================================
   LEFT COLUMN
   ========================================================= */
.advisor-opportunity__left{
  min-width:0;
  padding:calc(clamp(40px,4.4vw,76px) + var(--ao-tuck)) 34px clamp(16px,1.6vw,28px) clamp(24px,11.9vw,212px);
  max-width:none;
  display:flex; flex-direction:column;
  justify-content:flex-start;
}

/* eyebrow + flight path */
.advisor-opportunity__eyebrow-wrap{ position:relative; margin-bottom:clamp(14px,1.62vw,31px); padding-left:60px; }
.advisor-opportunity__flight-path{ position:absolute; left:-4px; top:-32px; width:120px; height:auto; }
.advisor-opportunity__eyebrow{
  margin:0; font-family:var(--advisor-sans); font-weight:700; font-size:clamp(11.5px,.9vw,15.5px);
  letter-spacing:.185em; line-height:1; text-transform:uppercase; color:var(--advisor-gold-dark);
}

/* headline */
.advisor-opportunity__heading{
  margin:0 0 0; max-width:none;
  font-family:var(--advisor-serif); font-weight:600;
  font-size:clamp(32px,3.8vw,62px); line-height:.88; letter-spacing:-1.1px;
  color:var(--advisor-ink);
}
/* gold script word set inline inside the headline */
.advisor-opportunity__word{
  font-family:var(--advisor-script); font-weight:400;
  font-size:1.36em; line-height:.8; letter-spacing:0;
  color:var(--advisor-gold);
  padding-right:.08em;
}
.advisor-opportunity__script{
  display:inline-block; position:relative;
  font-family:var(--advisor-script); font-weight:400;
  font-size:clamp(24px,2.45vw,42px); line-height:1.05; letter-spacing:0;
  color:var(--advisor-gold); margin:0 0 0; padding-bottom:8px;
}
.advisor-opportunity__script-underline{ position:absolute; left:50%; transform:translateX(-50%); bottom:2px; width:min(222px,46%); height:auto; }

/* body */
.advisor-opportunity__description{
  position:relative;
  margin:6px 0 clamp(12px,1.2vw,23px); max-width:446px;
  padding-left:25px;
  font-size:clamp(13.5px,.85vw,14.5px); line-height:1.62; font-weight:400;
  color:var(--advisor-body);
}
.advisor-opportunity__description::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(184,127,14,.75), rgba(184,127,14,.18));
}

/* =========================================================
   FOUR-STEP JOURNEY  (replaces the old category tiles)
   ========================================================= */
.ao-steps{
  --step-gap:clamp(15px,1.55vw,28px);
  list-style:none; margin:0 0 clamp(16px,1.7vw,30px); padding:0;
  width:100%; max-width:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--step-gap);
}
.ao-step{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(20px,1.62vw,27px) clamp(7px,.66vw,12px) clamp(12px,1.05vw,17px);
  border-radius:12px;
  background:#fffdf8;
  border:1px solid rgba(206,164,74,.42);
  box-shadow:0 9px 22px rgba(29,24,16,.07), inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ao-step:hover{
  transform:translateY(-2px); border-color:rgba(228,169,23,.6);
  box-shadow:0 15px 30px rgba(29,24,16,.12), inset 0 1px 0 rgba(255,255,255,.85);
}
/* numbered badge straddling the top edge */
.ao-step__num{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:clamp(22px,1.68vw,29px); height:clamp(22px,1.68vw,29px);
  border-radius:50%;
  background:var(--advisor-ink); color:#fff;
  font-family:var(--advisor-sans); font-weight:700;
  font-size:clamp(10.5px,.79vw,13px); line-height:1;
  box-shadow:0 4px 10px rgba(21,34,56,.32);
}
/* gold rule sitting on the card's bottom edge */
.ao-step::after{
  content:""; position:absolute; left:18%; right:18%; bottom:-1px;
  height:3px; border-radius:3px;
  background:linear-gradient(90deg, rgba(200,148,26,.35), var(--advisor-gold-dark), rgba(200,148,26,.35));
}
.ao-step__icon{
  color:var(--advisor-gold-dark); line-height:0;
  margin-bottom:clamp(6px,.55vw,9px);
}
.ao-step__icon svg{ width:clamp(27px,2.1vw,35px); height:clamp(27px,2.1vw,35px); }
.ao-step__title{
  margin:0 0 clamp(5px,.48vw,8px);
  font-family:var(--advisor-sans); font-weight:800;
  font-size:clamp(9.4px,.7vw,11.6px); line-height:1.22;
  min-height:2.44em;   /* reserve two lines so every card's copy starts level */
  letter-spacing:.045em; text-transform:uppercase;
  color:var(--advisor-ink);
}
.ao-step__copy{
  margin:0;
  font-size:clamp(9.8px,.685vw,11.4px); line-height:1.45; font-weight:400;
  color:var(--advisor-body);
}

/* dashed flight link + plane sitting in the gap between each pair */
.ao-step:not(:last-child)::before{
  content:""; position:absolute; z-index:2;
  top:0; left:calc(100% - 4px);
  width:calc(var(--step-gap) + 8px); height:15px;
  transform:translateY(-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 15'%3E%3Cpath d='M1.5 7.5h11M33.5 7.5h11' stroke='%23d9a441' stroke-width='1.8' stroke-dasharray='2.5 4' stroke-linecap='round'/%3E%3Cpath d='M30.5 7.5c0 .55-.6 1.05-1.7 1.5l-3.6 1.45-1 3.05h-1.2l.5-2.8-2.35.7-.7 1.4h-1l.3-1.7-1-.7v-.5l1-.7-.3-1.7h1l.7 1.4 2.35.7-.5-2.8h1.2l1 3.05 3.6 1.45c1.1.45 1.7.95 1.7 1.5z' fill='%23c8952c'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.advisor-opportunity__actions{ position:relative; display:flex; align-items:center; gap:16px; margin-top:2px; flex-wrap:wrap; }
.advisor-opportunity__actions-trail{ display:none; }
.advisor-button{
  display:inline-flex; align-items:center; justify-content:space-between;
  height:clamp(46px,3.1vw,58px); box-sizing:border-box; border-radius:var(--advisor-radius-pill);
  font-family:var(--advisor-sans); font-weight:700; font-size:15px; text-decoration:none;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.advisor-button__arrow{
  display:inline-grid; place-items:center; flex:none; border-radius:50%;
  transition:transform .2s ease;
}
.advisor-button:hover{ transform:translateY(-2px); }
.advisor-button:hover .advisor-button__arrow{ transform:translateX(2px); }
.advisor-button:focus-visible{ outline:2px solid var(--advisor-gold); outline-offset:3px; }

.advisor-button--primary{
  width:216px; max-width:100%; padding-left:24px; padding-right:7px;
  background:linear-gradient(100deg, #f0bb33 0%, #e4a917 46%, #cf9109 100%);
  color:#1b1509;
  box-shadow:0 10px 26px rgba(200,148,26,.24);
}
.advisor-button--primary:hover{
  background:linear-gradient(100deg, #f7c644 0%, #eeb324 46%, #d99a0d 100%);
  box-shadow:0 14px 34px rgba(200,148,26,.32);
}
.advisor-button--primary .advisor-button__arrow{
  width:36px; height:36px; background:#181713; color:var(--advisor-gold);
  border:1px solid rgba(255,255,255,.1);
}

.advisor-button--secondary{
  width:177px; max-width:100%; padding-left:23px; padding-right:7px;
  background:#fff; border:1.5px solid rgba(21,34,56,.28); color:var(--advisor-ink);
}
.advisor-button--secondary:hover{ border-color:rgba(228,169,23,.6); color:var(--advisor-gold-dark); }
.advisor-button--secondary .advisor-button__arrow{
  width:35px; height:35px; background:var(--advisor-ink); color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.advisor-button--secondary:hover .advisor-button__arrow{ background:var(--advisor-gold); color:#1a1408; }

/* =========================================================
   RIGHT VISUAL
   ========================================================= */
.advisor-opportunity__visual{ position:static; min-width:0; }
.advisor-opportunity__main-image{
  position:absolute; top:var(--ao-photo-inset); right:0; bottom:0;
  width:auto; max-width:52%; aspect-ratio:918/929;
  overflow:hidden; z-index:1;
  border-radius:20% 30px 0 2% / 46% 30px 0 50%;
  background:linear-gradient(160deg,#efe4cf 0%, #e7d9ba 55%, #ddc89a 100%);
  container-type:size;
}
.advisor-opportunity__main-image img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;
  filter:saturate(.99) contrast(1.02) sepia(.03);
}
.advisor-opportunity__main-image.is-fallback::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 60% 40%, rgba(247,181,18,.05), transparent 60%);
}
.advisor-opportunity__main-fade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(250,247,240,.55) 0%, rgba(250,247,240,.14) 11%, rgba(250,247,240,0) 24%);
}
/* gold arc tracing the curved left edge */
.advisor-opportunity__arc{
  position:absolute; top:calc(var(--ao-photo-inset) - 9px); right:-9px; bottom:-9px;
  width:auto; max-width:calc(52% + 9px); aspect-ratio:918/929;
  border-radius:20% 39px 0 2% / 46% 39px 0 50%;
  border:2px solid rgba(196,144,20,.8);
  pointer-events:none; z-index:3;
}
/* gold category badges pinned to the photo's printed cards */
.ao-badge{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:.62cqw;
  padding:.72cqw 1.45cqw .72cqw 1.05cqw;
  border-radius:.85cqw;
  background:linear-gradient(100deg,#f2c243 0%, #e0a412 55%, #c68a06 100%);
  color:#241a03;
  font-family:var(--advisor-sans); font-weight:700;
  font-size:1.52cqw; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 .45cqw 1.2cqw rgba(24,18,6,.4);
}
.ao-badge svg{ width:1.72cqw; height:1.72cqw; flex:none; }
.ao-badge--cruises{   right:2.5%;  top:27.2%; }
.ao-badge--vacations{ right:3.1%;  top:50.4%; }
.ao-badge--tours{     right:20.0%; top:69.4%; }

/* bottom decorative flight path */

/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  .advisor-opportunity .ao-anim{ opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease; }
  .advisor-opportunity.is-visible .ao-anim{ opacity:1; transform:none; }
  .advisor-opportunity.is-visible [data-anim="1"]{ transition-delay:0s; }
  .advisor-opportunity.is-visible [data-anim="2"]{ transition-delay:.10s; }
  .advisor-opportunity.is-visible [data-anim="3"]{ transition-delay:.16s; }
  .advisor-opportunity.is-visible [data-anim="4"]{ transition-delay:.24s; }
  .advisor-opportunity.is-visible [data-anim="5"]{ transition-delay:.32s; }
  .advisor-opportunity.is-visible [data-anim="6"]{ transition-delay:.375s; }
  .advisor-opportunity.is-visible [data-anim="7"]{ transition-delay:.43s; }
  .advisor-opportunity.is-visible [data-anim="8"]{ transition-delay:.485s; }
  .advisor-opportunity.is-visible [data-anim="9"]{ transition-delay:.54s; }
  .advisor-opportunity.is-visible [data-anim="10"]{ transition-delay:.595s; }
  .advisor-opportunity.is-visible [data-anim="11"]{ transition-delay:.66s; }

  .advisor-opportunity__visual{ opacity:0; transform:scale(.985);
    transition:opacity .7s ease, transform .7s ease; transition-delay:.15s; }
  .advisor-opportunity.is-visible .advisor-opportunity__visual{ opacity:1; transform:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1279px){
  .ao-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px clamp(18px,2vw,30px); max-width:520px; --step-gap:clamp(18px,2vw,30px); }
  .ao-step:nth-child(2n)::before{ display:none; }
  .advisor-opportunity__inner{ grid-template-columns:50fr 50fr; min-height:clamp(400px,46vw,640px); }
  /* the 2x2 step grid makes the left column (and so .inner) taller here,
     which would otherwise blow the aspect-ratio-sized photo past its
     50%-wide column and over the text (confirmed at 1024px iPad-landscape) */
  .advisor-opportunity__main-image{ max-width:50%; }
  .advisor-opportunity__arc{ max-width:calc(50% + 9px); }
  .advisor-opportunity__heading{ font-size:clamp(46px,5vw,58px); }
  .advisor-opportunity__script{ font-size:clamp(44px,4.6vw,50px); }
  .ao-photo--landmark{ display:none; }
  .ao-photo--cruise{ width:220px; height:195px; right:16px; }
  .ao-photo--tropical{ width:215px; height:182px; top:250px; right:4px; }
}

@media (max-width:899px){
  .advisor-opportunity__inner{ grid-template-columns:1fr; min-height:0; }
  .advisor-opportunity__left{ order:1; padding:68px 34px 40px; max-width:720px; justify-content:flex-start; }
  .advisor-opportunity__heading{ font-size:clamp(42px,10vw,58px); line-height:.98; }
  .advisor-opportunity__script{ font-size:clamp(40px,10vw,54px); }
  .advisor-opportunity__description{ font-size:17px; }
  .advisor-opportunity__visual{ position:relative; order:2; height:clamp(360px,58vw,560px); margin-top:8px; }
  .advisor-opportunity__main-image{ position:absolute; inset:0; top:0; left:0;
    border-radius:42px 42px 0 0; }
  .advisor-opportunity__arc{ top:-9px; right:-9px; bottom:-9px; left:-9px; border-radius:42px 42px 0 0; }
  .advisor-opportunity__main-fade{ background:linear-gradient(180deg, rgba(21,34,56,.05), rgba(21,34,56,.22)); }
  .ao-photo--cruise{ top:26px; right:20px; }
  .ao-photo--tropical{ top:230px; right:10px; }
    .advisor-opportunity__flight-path{ left:-40px; top:-40px; }
}

@media (max-width:560px){
  .ao-steps{ grid-template-columns:minmax(0,1fr); gap:24px; max-width:400px; --step-gap:0px; }
  .ao-step:not(:last-child)::before{ display:none; }
  /* one card per row - give the type real size again */
  .ao-step{ padding:24px 20px 17px; }
  .ao-step__num{ width:30px; height:30px; font-size:14px; }
  .ao-step__icon svg{ width:38px; height:38px; }
  .ao-step__icon{ margin-bottom:9px; }
  .ao-step__title{ font-size:13px; min-height:0; letter-spacing:.07em; }
  .ao-step__copy{ font-size:13.5px; line-height:1.55; max-width:32ch; margin:0 auto; }
  .advisor-opportunity__actions{ flex-direction:column; align-items:stretch; }
  .advisor-button{ width:100%; max-width:330px; }
  .advisor-opportunity__visual{ height:clamp(300px,74vw,430px); }
  .ao-photo--tropical{ display:none; }
  .ao-photo--cruise{ width:180px; height:150px; }
}

/* =========================================================
   SHORT-VIEWPORT FIT — keeps the whole section on screen
   without scrolling on laptop-height displays
   ========================================================= */
@media (max-height:880px){
  .advisor-opportunity__inner{ min-height:clamp(400px,40vw,700px); }
  .advisor-opportunity__left{ padding-top:calc(60px + var(--ao-tuck)); padding-bottom:24px; }
  .advisor-opportunity__eyebrow-wrap{ margin-bottom:20px; }
  .ao-steps{ gap:24px 20px; margin-bottom:16px; }
  .ao-step{ padding-top:22px; padding-bottom:13px; }
  .advisor-button{ height:53px; }
}
@media (max-height:800px){
  .advisor-opportunity__inner{ min-height:clamp(400px,40vw,700px); }
  .advisor-opportunity__left{ padding-top:calc(44px + var(--ao-tuck)); padding-bottom:20px; }
  .advisor-opportunity__eyebrow-wrap{ margin-bottom:15px; }
  .advisor-opportunity__heading{ font-size:clamp(32px,3.52vw,60px); }
  .advisor-opportunity__script{ font-size:clamp(24px,2.32vw,41px); padding-bottom:6px; }
  .advisor-opportunity__description{ margin:4px 0 15px; }
  .ao-steps{ gap:21px 18px; margin-bottom:13px; }
  .ao-step{ padding:20px 9px 11px; }
  .ao-step__copy{ font-size:11.4px; line-height:1.44; }
  .advisor-button{ height:48px; font-size:14px; }
}

/* mid-width laptops: trim the column so the content still lands inside the
   50.09vw plate (otherwise the background image runs out at the bottom) */
@media (max-width:1560px){
  .advisor-opportunity__left{
    padding-top:calc(clamp(34px,3.9vw,78px) + var(--ao-tuck));
    padding-bottom:clamp(14px,1.4vw,26px);
  }
  .ao-step{ padding-top:21px; padding-bottom:12px; }
  .advisor-opportunity__eyebrow-wrap{ margin-bottom:clamp(12px,1.35vw,24px); }
}

/* =========================================================
   STACKED / PHONE
   ========================================================= */
@media (max-width:899px){
  /* the plate's art lives in its top band; on a stacked column the section is
     far taller than the plate, so let cream carry the body and keep the
     palm band tight to the wave */
  .advisor-opportunity{ background-color:#fbf4e4; }
  .ao-flight{ width:min(78vw,520px); bottom:14px; left:16px; opacity:.75; }
}
@media (max-width:560px){
  /* below this the plate renders too small to read - drop it and let the
     cream base of the wave carry the transition */
  .advisor-opportunity{ background-image:none; }
  .hero-wave__img{ display:none; }
  .ao-flight{ display:none; }
  .advisor-opportunity__left{ padding:52px 20px 34px; }
}