/* DXB Insider — area specialists on the homepage (v2.3, "the roster").
 * Same language as the theme: ink background, Bodoni headings with gold italics, thin gold hairlines,
 * numbered list like "Our expertise", roman numerals like "Perspectives". Uses the theme's own tokens. */
.dxb-spec{--sp-gold:var(--gold,#b6a17a);--sp-gold2:var(--gold-light,#d9c49d);--sp-ivory:var(--white,#eee8e5);--sp-line:var(--line,rgba(182,161,122,.25));--sp-serif:var(--serif,Bodoni,'Bodoni MT',Georgia,serif);
  background:var(--ink,#101820);color:var(--sp-ivory);position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.dxb-spec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 12% 70%,rgba(182,161,122,.10),transparent 70%),radial-gradient(40% 40% at 95% 0%,rgba(32,52,72,.55),transparent 70%)}
.dxb-spec::after{content:"";position:absolute;left:max(6%,calc((100vw - 1370px)/2));right:max(6%,calc((100vw - 1370px)/2));top:0;height:1px;background:var(--sp-line)}

/* heading row — mirrors the theme's .section-top */
.dxb-spec__top{display:flex;justify-content:space-between;align-items:flex-end;gap:8%;margin-bottom:72px}
.dxb-spec__top>div:first-child{flex:1 1 auto}
.dxb-spec__top h2{margin:0;color:var(--sp-ivory)}
.dxb-spec__intro{flex:0 1 430px;margin-bottom:8px}
.dxb-spec__intro p{font-size:.92rem;line-height:1.85;margin:0 0 14px}
.dxb-spec__intro p:last-child{margin:0;color:var(--sp-gold2)}

.dxb-spec__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,110px);align-items:start}

/* portrait */
.dxb-spec__stage-wrap{position:sticky;top:110px;padding:0 22px 22px 0}
.dxb-spec__frame{position:absolute;left:22px;top:22px;right:0;bottom:0;border:1px solid var(--sp-gold);opacity:.55;z-index:0;pointer-events:none;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.dxb-spec__stage{position:relative;z-index:1;display:block;aspect-ratio:4/5;overflow:hidden;background:#0b1117;color:inherit;text-decoration:none}
.dxb-spec__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transform:scale(1.06);filter:grayscale(.35) contrast(1.02);
  transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.dxb-spec__shot.is-on{opacity:1;transform:scale(1);filter:none}
.dxb-spec__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(9,12,14,.88));pointer-events:none}
.dxb-spec__ghost{position:absolute;right:22px;top:6px;z-index:2;font-family:var(--sp-serif);font-style:italic;font-size:clamp(4.5rem,7vw,7.5rem);line-height:1;color:var(--sp-ivory);opacity:.9;mix-blend-mode:overlay;pointer-events:none}
.dxb-spec__cap{position:absolute;left:28px;right:28px;bottom:26px;z-index:2;display:flex;flex-direction:column;gap:8px}
.dxb-spec__cap-k{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sp-gold2)}
.dxb-spec__cap-v{font-family:var(--sp-serif);font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--sp-ivory)}
.dxb-spec__stage:hover .dxb-spec__shot.is-on{transform:scale(1.03)}
.dxb-spec__stage-wrap:hover .dxb-spec__frame{transform:translate(-8px,-8px)}
.dxb-spec.is-swap .dxb-spec__ghost,.dxb-spec.is-swap .dxb-spec__cap{animation:dxbSpecUp .8s cubic-bezier(.2,.7,.2,1) both}
.dxb-spec.is-swap .dxb-spec__cap{animation-delay:.08s}
@keyframes dxbSpecUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* numbered list — like the theme's "Our expertise" */
.dxb-spec__list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--sp-line);counter-reset:none}
.dxb-spec__row{position:relative;border-top:1px solid var(--sp-line)}
.dxb-spec__head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"rn comm arr" "rn who arr";column-gap:18px;row-gap:6px;align-items:baseline;width:100%;padding:26px 0 24px;cursor:pointer;color:inherit}
.dxb-spec__head::after{content:"+";grid-area:arr;align-self:center;font-family:var(--sp-serif);font-size:1.6rem;line-height:1;color:var(--sp-gold);transition:transform .45s ease,opacity .3s ease;opacity:.7}
.dxb-spec__row.is-on .dxb-spec__head::after{transform:rotate(45deg);opacity:1}
.dxb-spec__head:focus-visible{outline:1px solid var(--sp-gold);outline-offset:6px}
.dxb-spec__rn{grid-area:rn;align-self:center;font-family:var(--sp-serif);font-style:italic;font-size:1.5rem;color:var(--sp-gold);opacity:.65;transition:opacity .3s ease}
.dxb-spec__comm{grid-area:comm;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted,#a5a7a7);transition:color .3s ease}
.dxb-spec__who{grid-area:who;font-family:var(--sp-serif);font-size:clamp(1.55rem,2.2vw,2.15rem);line-height:1.08;letter-spacing:-.02em;color:var(--sp-ivory);transition:color .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.dxb-spec__head:hover .dxb-spec__who{transform:translateX(6px)}
.dxb-spec__row.is-on .dxb-spec__rn{opacity:1}
.dxb-spec__row.is-on .dxb-spec__comm{color:var(--sp-gold2)}
.dxb-spec__row.is-on .dxb-spec__who{color:var(--sp-gold);font-style:italic}

.dxb-spec__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
.dxb-spec__row.is-on .dxb-spec__panel{grid-template-rows:1fr}
.dxb-spec__panel-in{overflow:hidden;min-height:0;padding-left:82px}
.dxb-spec__row:not(.is-on) .dxb-spec__panel-in{visibility:hidden;transition:visibility 0s .6s}
.dxb-spec__meta{font-size:.74rem;letter-spacing:.08em;color:var(--sp-gold2);margin:0 0 12px}
.dxb-spec__meta i{font-style:normal;color:var(--sp-gold);margin:0 4px}
.dxb-spec__text{font-size:.92rem;line-height:1.85;max-width:560px;margin:0 0 22px}
.dxb-spec__cta{display:inline-flex;align-items:center;gap:10px;margin-bottom:30px;padding-bottom:6px;border-bottom:1px solid var(--sp-gold);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-gold);text-decoration:none;transition:color .3s ease,gap .3s ease}
.dxb-spec__cta:hover,.dxb-spec__cta:focus-visible{color:var(--sp-gold2);gap:16px}
.dxb-spec__cta:focus-visible{outline:1px solid var(--sp-gold);outline-offset:4px}
.dxb-spec__mob{display:none}

/* progress hairline while the list plays by itself */
.dxb-spec__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;overflow:hidden}
.dxb-spec__bar i{display:block;height:100%;width:100%;background:var(--sp-gold);transform:scaleX(0);transform-origin:left}
.dxb-spec.is-playing .dxb-spec__row.is-on .dxb-spec__bar i{animation:dxbSpecBar 6.5s linear both}
@keyframes dxbSpecBar{to{transform:scaleX(1)}}

.dxb-spec__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:28px 0 0;font-size:.74rem;letter-spacing:.06em;color:var(--muted,#a5a7a7)}
.dxb-spec__foot i{font-style:normal;color:var(--sp-gold)}
.dxb-spec__foot a{color:var(--sp-gold2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s ease}
.dxb-spec__foot a:hover,.dxb-spec__foot a:focus-visible{border-color:var(--sp-gold2)}
.dxb-spec__dia{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--sp-gold);margin-right:6px}

/* reveal on scroll (the theme's own reveal script runs before this section exists) */
.dxb-spec__top,.dxb-spec__stage-wrap,.dxb-spec__row,.dxb-spec__foot{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.dxb-spec.is-wait .dxb-spec__top,.dxb-spec.is-wait .dxb-spec__stage-wrap,.dxb-spec.is-wait .dxb-spec__row,.dxb-spec.is-wait .dxb-spec__foot{opacity:0;transform:translateY(28px)}
.dxb-spec__stage-wrap{transition-delay:.12s}
.dxb-spec__row:nth-child(1){transition-delay:.18s}.dxb-spec__row:nth-child(2){transition-delay:.24s}.dxb-spec__row:nth-child(3){transition-delay:.30s}
.dxb-spec__row:nth-child(4){transition-delay:.36s}.dxb-spec__row:nth-child(5){transition-delay:.42s}.dxb-spec__row:nth-child(6){transition-delay:.48s}
.dxb-spec__foot{transition-delay:.54s}

@media (max-width:1100px){
  .dxb-spec__top{display:block;margin-bottom:52px}
  .dxb-spec__intro{max-width:620px;margin-top:26px}
  .dxb-spec__body{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:52px}
  .dxb-spec__stage-wrap{top:90px}
  .dxb-spec__panel-in{padding-left:60px}
  .dxb-spec__head{grid-template-columns:48px minmax(0,1fr) auto;column-gap:12px}
}
@media (max-width:900px){
  .dxb-spec__body{display:block}
  .dxb-spec__stage-wrap{display:none}
  .dxb-spec__head{padding:22px 0 20px}
  .dxb-spec__panel-in{padding-left:0}
  .dxb-spec__head:hover .dxb-spec__who{transform:none}
  .dxb-spec__mob{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;margin:4px 0 20px;background:#0b1117}
  .dxb-spec__mob::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--sp-gold)}
  .dxb-spec__mob img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
  .dxb-spec__text{max-width:none}
}
@media (max-width:480px){
  .dxb-spec__top{margin-bottom:40px}
  .dxb-spec__head{grid-template-columns:36px minmax(0,1fr) auto}
  .dxb-spec__rn{font-size:1.2rem}
  .dxb-spec__who{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){
  .dxb-spec *,.dxb-spec *::before,.dxb-spec *::after{transition:none!important;animation:none!important}
  .dxb-spec.is-wait .dxb-spec__top,.dxb-spec.is-wait .dxb-spec__stage-wrap,.dxb-spec.is-wait .dxb-spec__row,.dxb-spec.is-wait .dxb-spec__foot{opacity:1;transform:none}
}