/* ───────── Treatments: 3D coverflow carousel ───────── */
.cf{position:relative;isolation:isolate;overflow:hidden;background:#0a3844;color:#fff;padding:clamp(72px,9vw,120px) 0 clamp(48px,6vw,80px);
  --cw:330px;--dx:285px}
.cf-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 52%,rgba(45,156,219,.28),transparent 70%),radial-gradient(ellipse 40% 40% at 88% 8%,rgba(212,175,55,.14),transparent 70%),radial-gradient(ellipse 40% 40% at 8% 95%,rgba(45,156,219,.16),transparent 70%)}
.cf-head{text-align:center;margin-bottom:clamp(20px,3vw,36px)}
.cf-head .eyebrow{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px}
.cf-line{width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.cf-line.r{background:linear-gradient(90deg,var(--gold),transparent)}
.cf-head h2{color:#fff}

.cf-view{position:relative;width:min(1240px,100%);margin:0 auto}
.cf-stage{position:relative;height:520px;display:flex;justify-content:center;align-items:center;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none}

.cf-card{position:absolute;width:var(--cw);height:500px;border-radius:20px;overflow:hidden;background:var(--teal);border:1px solid rgba(255,255,255,.14);
  transform-origin:center;transition:transform 750ms cubic-bezier(.25,1,.5,1),opacity 500ms ease,box-shadow 500ms ease;will-change:transform,opacity;
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.cf-card[data-pos="0"]{transform:translateX(0) scale(1) rotateY(0);opacity:1;z-index:30;box-shadow:0 28px 60px rgba(0,0,0,.5),0 0 40px rgba(212,175,55,.2)}
.cf-card[data-pos="1"]{transform:translateX(var(--dx)) scale(.84) rotateY(-24deg);opacity:.75;z-index:20;cursor:pointer}
.cf-card[data-pos="-1"]{transform:translateX(calc(var(--dx) * -1)) scale(.84) rotateY(24deg);opacity:.75;z-index:20;cursor:pointer}
.cf-card[data-pos="2"]{transform:translateX(calc(var(--dx) * 1.79)) scale(.68) rotateY(-38deg);opacity:.45;z-index:10;cursor:pointer}
.cf-card[data-pos="-2"]{transform:translateX(calc(var(--dx) * -1.79)) scale(.68) rotateY(38deg);opacity:.45;z-index:10;cursor:pointer}
.cf-card[data-pos="hide"]{transform:translateX(0) scale(.5);opacity:0;z-index:0;pointer-events:none}

.cf-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* motion blur while sliding: peaks early, then resolves as the card settles */
.cf-stage.cf-moving .cf-art{transform-origin:var(--origin,center);animation:cfSmear 750ms cubic-bezier(.25,1,.5,1) both}
@keyframes cfSmear{
  0%{filter:blur(0);transform:scaleX(1)}
  30%{filter:blur(6px);transform:scaleX(1.08)}
  100%{filter:blur(0);transform:scaleX(1)}
}
.cf-dim{position:absolute;inset:0;z-index:2;background:#0a3844;opacity:0;transition:opacity 500ms ease;pointer-events:none}
.cf-card[data-pos="1"] .cf-dim,.cf-card[data-pos="-1"] .cf-dim{opacity:.3}
.cf-card[data-pos="2"] .cf-dim,.cf-card[data-pos="-2"] .cf-dim{opacity:.5}
.cf-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(7,38,48,.28) 0%,rgba(7,38,48,0) 22%,rgba(7,38,48,0) 46%,rgba(7,38,48,.86) 74%,rgba(7,38,48,.97) 100%)}

.cf-body{position:relative;z-index:4;height:100%;padding:20px 22px 24px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity 450ms ease,transform 450ms var(--ease-out)}
.cf-card[data-pos="0"] .cf-body{opacity:1;transform:none;transition-delay:.12s}
.cf-num{position:absolute;top:20px;left:22px;font:500 13px/1 var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.7)}
.cf-tag{align-self:flex-end;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding-top:2px}
.cf-text{display:flex;flex-direction:column;align-items:center}
.cf-text h3{font-size:30px;line-height:1.08;color:#fff;margin-bottom:12px;text-wrap:balance}
.cf-rule{width:34px;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 8px rgba(212,175,55,.6);margin-bottom:12px}
.cf-text p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:270px;margin-bottom:18px}
.cf-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;background:linear-gradient(135deg,#E8C85A,#C39A22);color:var(--teal-deep);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:transform 160ms var(--ease-out),box-shadow 200ms ease}
.cf-cta:active{transform:scale(.97)}
.cf-cta:focus-visible,.cf-arrow:focus-visible,.cf-dots button:focus-visible,.cf-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.cf-cta:hover{box-shadow:0 6px 20px rgba(212,175,55,.45)}}

.cf-arrow{position:absolute;top:50%;z-index:40;width:48px;height:48px;margin-top:-24px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(10,56,68,.55);color:#fff;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform 160ms var(--ease-out),background-color 200ms ease}
.cf-arrow.prev{left:24px}.cf-arrow.next{right:24px}
.cf-arrow:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.cf-arrow:hover{background:rgba(255,255,255,.16)}}

.cf-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.cf-dots{display:flex;align-items:center;gap:6px}
.cf-dots button{position:relative;width:28px;height:28px;border:0;background:none;cursor:pointer;padding:0}
.cf-dots button::before{content:"";position:absolute;top:50%;left:50%;height:8px;width:8px;border-radius:100px;background:rgba(255,255,255,.28);transform:translate(-50%,-50%);transition:width 300ms var(--ease-out),background-color 300ms ease}
.cf-dots button[aria-current="true"]::before{width:28px;background:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.6)}
.cf-play{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms}
.cf-play:active{transform:scale(.94)}
.cf-play .i-play{display:none}.cf-play[aria-pressed="true"] .i-play{display:block}.cf-play[aria-pressed="true"] .i-pause{display:none}
@media (hover:hover) and (pointer:fine){.cf-play:hover{background:rgba(255,255,255,.12)}}

@media (max-width:900px){.cf{--dx:230px}.cf-arrow.prev{left:10px}.cf-arrow.next{right:10px}}
@media (max-width:640px){
  .cf{--cw:272px;--dx:152px}
  .cf-stage{height:470px}.cf-card{height:450px}
  .cf-card[data-pos="2"],.cf-card[data-pos="-2"]{opacity:0;pointer-events:none}
  .cf-text h3{font-size:26px}.cf-arrow{width:42px;height:42px;margin-top:-21px}
  .cf-arrow.prev{left:4px}.cf-arrow.next{right:4px}
}
/* Reduced-motion visitors still get the carousel (it has a pause button) with a gentler blur and no stretch */
.cf-stage.cf-soft.cf-moving .cf-art{animation-name:cfSoft}
@keyframes cfSoft{0%{filter:blur(0)}30%{filter:blur(3px)}100%{filter:blur(0)}}