/* ==========================================================================
   TRADEWISE ELITE INVESTMENTS
   Rebuilt to match the live site's design language, with the redesigned copy
   and motion added. Six pages in one file so every link works when opened
   directly on a phone.

   COLOURS sampled from the live site:
     navy   #122039
     yellow #F5C443

   IMAGES point at the assets already hosted on tradewiseelite.com. If one
   fails to load, a navy gradient shows in its place rather than a broken icon.
   ========================================================================== */

:root{--tw-logo:url(../images/logo-tw.png);
  --navy:#0D1D33;          /* the live site's background navy */
  --navy-deep:#091628;     /* footer and ticker */
  --navy-soft:#172A46;     /* raised panels on navy */
  --yellow:#F5C242;        /* brand yellow: buttons, cards, accents */
  --yellow-lift:#FFD24A;   /* hover */
  --yellow-deep:#84610D;   /* same hue, darkened only for small text on white */
  --white:#FFFFFF;
  --off:#F4F2EC;
  --ink:#122039;
  --ink-soft:#4A5568;
  --light:#FFFFFF;
  --light-soft:rgba(255,255,255,.76);

  --head:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --shell:1280px;
  --gutter:clamp(20px,5vw,54px);
  --section-y:clamp(52px,6.4vw,96px);
  --r:18px;               /* the live site's rounded corners */
  --r-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;max-width:100%;background:var(--navy)}
body{
  margin:0;background:var(--navy);color:var(--light);
  font-family:var(--body);font-weight:400;
  font-size:clamp(15.5px,1.05vw,17px);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:3px}
a:focus-visible,button:focus-visible{box-shadow:0 0 0 4px rgba(245,194,66,.25)}
html[data-motion="off"]{scroll-behavior:auto}
/* This collapse of durations belongs to the motion-off state only. Unscoped,
   it forces every animation on the site to finish in a thousandth of a
   millisecond, which reads as flashing rather than as stillness. */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{animation-duration:.001ms !important;transition-duration:.001ms !important}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:var(--navy);padding:12px 20px;font-weight:600}
.skip-link:focus{left:0}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* Image frames. The gradient sits behind; if the photo fails it shows through. */
.frame{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(150deg,#1B2E4D,#122039 60%,#0C1728)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.frame--4x3{aspect-ratio:4/3}
.frame--16x9{aspect-ratio:16/9}
.frame--3x4{aspect-ratio:3/4}
.slot{display:grid;place-items:center;text-align:center;border:1px dashed rgba(245,196,67,.45);border-radius:12px;padding:14px 16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);line-height:1.5}
.needs{border-left:3px solid var(--yellow);background:rgba(245,196,67,.1);border-radius:0 12px 12px 0;padding:16px 20px;margin:22px 0;font-size:14px;color:var(--light-soft)}
.needs strong{display:block;font-family:var(--head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px;font-weight:600}
.needs--dark{color:var(--ink-soft);background:rgba(245,196,67,.16)}
.needs--dark strong{color:var(--yellow-deep)}

/* ---------- Type: heavy geometric headings, like the live site ---------- */
h1,h2,h3{font-family:var(--head);font-weight:500;letter-spacing:-.005em;margin:0}
.h1{font-size:clamp(36px,5.8vw,82px);line-height:1.06;font-weight:400}
.h2{font-size:clamp(34px,5vw,68px);line-height:1.06;margin-bottom:22px;font-weight:400}
.h3{font-size:clamp(25px,2.5vw,38px);line-height:1.14;margin-bottom:16px;font-weight:400}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin:0 0 16px}
.lede{font-size:clamp(16px,1.25vw,19px);color:var(--light-soft);max-width:62ch}
.note{font-size:13.5px;color:var(--light-soft);max-width:74ch;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.on-light{color:var(--ink)}
.on-light .lede,.on-light p{color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.04em;white-space:nowrap;
  padding:16px 32px;border-radius:10px;border:2px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--yellow{background:var(--yellow);color:var(--navy);border-color:var(--yellow);box-shadow:0 8px 24px rgba(245,196,67,.24)}
.btn--yellow:hover{background:var(--yellow-lift);border-color:var(--yellow-lift);box-shadow:0 14px 34px rgba(245,196,67,.34)}
.btn--navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn--outline{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn--outline:hover{border-color:var(--yellow);color:var(--yellow)}
.btn--sm{padding:12px 22px;font-size:13.5px}

/* ---------- Ticker ---------- */
.ticker{position:relative;max-width:100vw;background:var(--navy-deep);min-height:46px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.08);padding-right:var(--gutter)}
.ticker::after{content:none}  /* edge fade belonged to the old text marquee; it would cover the widget */
.ticker .live{position:relative;z-index:3;background:var(--navy-deep);padding-right:22px}
.ticker__track{display:flex;flex:0 0 auto;width:max-content;gap:40px;white-space:nowrap;
  padding-left:var(--gutter);font-size:13px;font-weight:500;will-change:transform;
  animation:marquee 180s linear infinite}
.ticker__item{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.ticker__item strong{font-family:var(--head);font-weight:600;margin-right:10px}
.ticker__item .up{color:#5FCf9B}
.ticker__item .dn{color:#F08A8A}
.ticker:hover .ticker__track{animation-play-state:paused}
/* TradingView ticker tape. The widget renders in its own iframe, so these
   rules shape the surround only. Attribution is a condition of use. */
.ticker__tv{flex:1 1 auto;min-width:0;padding-left:var(--gutter)}
.ticker__tv .tradingview-widget-container{width:100%}
.ticker__tv iframe{display:block;width:100%!important;border:0}
.ticker__fallback{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--slate)}
.ticker__meta{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.ticker__by{color:var(--slate);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.ticker__by:hover{color:var(--yellow);border-color:var(--yellow)}
@media (max-width:860px){
  .ticker{flex-wrap:wrap;gap:0;padding-bottom:6px}
  .ticker__tv{flex:1 0 100%}
  .ticker__meta{flex:1 0 100%;justify-content:space-between;gap:10px;
    padding:0 var(--gutter);font-size:9.5px;letter-spacing:.07em}
}
@media (max-width:420px){
  .ticker__delay{white-space:normal}
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:90;background:var(--navy);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.nav.is-stuck{background:rgba(12,23,40,.96);backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.3)}
.nav__inner{display:flex;align-items:center;gap:22px;height:88px;transition:height .35s var(--ease)}
.nav.is-stuck .nav__inner{height:74px}
/* Brand mark */
.mark{display:flex;align-items:center;line-height:1}
.mark__img{height:52px;width:auto;aspect-ratio:600/557;display:block;transition:height .35s var(--ease)}
.nav.is-stuck .mark__img{height:44px}
.footer .mark__img{height:74px}
.mark img{height:52px;width:auto;display:block;transition:height .35s var(--ease)}
.nav.is-stuck .mark img{height:44px}
.footer .mark img{height:74px}
.mark__top{font-family:var(--body);font-weight:600;font-size:21px;letter-spacing:.18em;color:var(--white)}
.mark__top em{font-style:normal;color:var(--yellow)}
.mark__sub{font-family:var(--mono);font-size:7.5px;letter-spacing:.34em;color:var(--yellow);margin-top:5px;font-weight:500}
.nav__links{display:flex;gap:clamp(14px,1.5vw,26px);margin-left:auto}
.nav__links a{position:relative;white-space:nowrap;font-size:clamp(13px,1.05vw,15px);font-weight:500;color:var(--light-soft);padding:8px 0;transition:color .3s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--yellow);transition:width .35s var(--ease)}
.nav__links a:hover,.nav__links a.is-current{color:var(--white)}
.nav__links a:hover::after,.nav__links a.is-current::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:14px}
.lang{position:relative}
.lang__toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.28);border-radius:8px;font-size:13px;font-weight:500;color:var(--light-soft)}
.lang__toggle:hover{border-color:var(--yellow);color:var(--yellow)}
.lang__caret{transition:transform .3s var(--ease)}
.lang__toggle[aria-expanded="true"] .lang__caret{transform:rotate(180deg)}
.lang__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:170px;background:var(--white);border-radius:12px;box-shadow:0 20px 44px rgba(0,0,0,.3);padding:8px 0;overflow:hidden}
.lang__menu button{display:block;width:100%;text-align:left;padding:11px 20px;font-size:14.5px;color:var(--ink)}
.lang__menu button:hover{background:var(--off)}
.burger{display:none;flex-direction:column;gap:6px;padding:10px 4px}
.burger span{display:block;width:26px;height:2px;background:var(--white);border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* ---------- Pages ---------- */
.page{display:none;overflow-x:clip;background:var(--navy)}
main{background:var(--navy)}
.page.is-active{display:block;animation:pagein .5s var(--ease)}
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);display:flex;align-items:center;min-height:min(90vh,900px);padding:clamp(80px,10vw,150px) 0}
/* Hero base layer */
.hero__bg{position:absolute;inset:0;z-index:0;background:#0B1220;animation:heroZoom 90s ease-in-out infinite alternate}
from{transform:scale(1)}
to{transform:scale(1.08)}
.hero__scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(96deg,rgba(9,22,40,.94) 0%,rgba(9,22,40,.82) 40%,rgba(9,22,40,.52) 72%,rgba(9,22,40,.3) 100%),
             linear-gradient(180deg,rgba(9,22,40,.6) 0%,transparent 30%,transparent 62%,rgba(9,22,40,.66) 100%)}
.hero__inner{position:relative;z-index:4;max-width:1000px}
.hero__lede{font-size:clamp(17px,1.5vw,21px);color:var(--light-soft);max-width:58ch;margin:26px 0 38px}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.hero__note{font-size:14.5px;color:var(--light-soft);max-width:54ch;padding-left:20px;border-left:3px solid var(--yellow)}
/* Hero entrance,staggered */
.hero [data-seq]{opacity:0;transform:translateY(26px);animation:seqIn 1.1s cubic-bezier(.16,.84,.32,1) forwards}
.hero [data-seq="1"]{animation-delay:.10s}
.hero [data-seq="2"]{animation-delay:.22s}
.hero [data-seq="3"]{animation-delay:.36s}
.hero [data-seq="4"]{animation-delay:.50s}
.hero [data-seq="5"]{animation-delay:.62s}
to{opacity:1;transform:none}

/* ---------- Inner page hero ---------- */
.phero{position:relative;overflow:hidden;background:var(--navy);padding:clamp(64px,8vw,120px) 0 clamp(56px,7vw,96px)}
.phero__bg{position:absolute;inset:0;background:radial-gradient(80% 100% at 84% 10%, rgba(245,196,67,.22), transparent 62%),linear-gradient(160deg,#1B2E4D,#0C1728)}
.phero__inner{position:relative;z-index:2}
.crumb{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin:0 0 18px}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y);background:var(--navy);color:var(--light)}
.section--light{background:var(--off);color:var(--ink)}
.section--white{background:var(--white);color:var(--ink)}
.section--light .lede,.section--white .lede{color:var(--ink-soft)}
.section--light .eyebrow,.section--white .eyebrow{color:var(--yellow-deep)}
.section--light .note,.section--white .note{color:var(--ink-soft);border-top-color:rgba(18,32,57,.14)}
.section-head{max-width:64ch;margin-bottom:clamp(38px,4.6vw,64px)}
.section-head--center{margin-inline:auto;text-align:center}

/* ---------- Statement panel, like the live site's gold-bordered card ---------- */
.statement{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid rgba(245,194,66,.42);padding:clamp(30px,4.6vw,64px) clamp(24px,5vw,68px);text-align:center}
.statement__bg{position:absolute;inset:0;background:linear-gradient(118deg,#172A46,#0D1D33 62%,#091628)}
.statement__in{position:relative;z-index:2}
.statement h2{color:var(--yellow);font-size:clamp(26px,3.6vw,46px);line-height:1.14;margin-bottom:26px}
.statement p{font-size:clamp(16px,1.25vw,19px);color:var(--light-soft);max-width:66ch;margin-inline:auto}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.pillar{background:var(--white);border-radius:var(--r);padding:clamp(22px,2vw,29px);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pillar:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(18,32,57,.16)}
.pillar__no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--yellow);color:var(--navy);font-family:var(--head);font-weight:700;font-size:15px;margin-bottom:18px}
.pillar h3{font-family:var(--head);font-weight:500;font-size:23px;line-height:1.25;margin-bottom:12px;color:var(--ink)}
.pillar p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- Video ---------- */
.video{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,66px);align-items:center}
.plate{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;display:block;background:linear-gradient(150deg,#1B2E4D,#0C1728);aspect-ratio:16/9}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.plate:hover img{transform:scale(1.04)}
.play{position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--navy);transition:transform .4s var(--ease),background .4s var(--ease)}
.play::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:pulse 5.5s ease-out infinite}
.plate:hover .play{transform:scale(1.09);background:var(--yellow)}
@keyframes pulse{0%{transform:scale(.96);opacity:.45}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
.modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__bg{position:absolute;inset:0;background:rgba(6,12,22,.94);backdrop-filter:blur(6px)}
.modal__dlg{position:relative;width:min(1060px,100%)}
.modal__frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
.modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal__x{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45);color:#fff;font-size:22px;line-height:1}
/* ---------- Cards ---------- */
.cards{display:grid;gap:clamp(20px,2.2vw,28px)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(0,0,0,.28)}
.card:hover .frame img{transform:scale(1.07)}
.card__media{border-radius:0}
.card__body{padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--head);font-weight:500;font-size:clamp(23px,2vw,30px);margin-bottom:14px;color:var(--ink)}
.card__body p{font-size:15px;color:var(--ink-soft);margin-bottom:24px}
.more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:600;font-size:14px;color:var(--yellow-deep)}
.more svg{transition:transform .35s var(--ease)}
.more:hover svg{transform:translateX(6px)}
.card--navy{background:var(--navy-soft);color:var(--light);border:1px solid rgba(245,196,67,.2)}
.card--navy h3{color:var(--white)}
.card--navy .card__body p{color:var(--light-soft)}
.card--navy .more{color:var(--yellow)}
/* ---------- Split rows ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center;padding-block:clamp(34px,4vw,58px)}
.split + .split{border-top:1px solid rgba(255,255,255,.12)}
.section--light .split + .split,.section--white .split + .split{border-top-color:rgba(18,32,57,.12)}
.split--flip .split__media{order:-1}
.split__no{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 14px}
.section--light .split__no,.section--white .split__no{color:var(--yellow-deep)}
/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px)}
.step{position:relative;background:var(--white);border-radius:var(--r);padding:clamp(26px,2.6vw,36px);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.step:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(18,32,57,.16)}
.step__no{font-family:var(--head);font-weight:700;font-size:44px;line-height:1;color:rgba(245,196,67,.9);margin-bottom:16px}
.step h3{font-family:var(--head);font-weight:500;font-size:22px;line-height:1.24;margin-bottom:12px;color:var(--ink)}
.step p{font-size:14.5px;color:var(--ink-soft)}
/* ---------- Why choose us ---------- */
.reasons--3-2{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,1.8vw,24px)}
.reasons--3-2 > li{flex:0 1 calc((100% - 2 * clamp(16px,1.8vw,24px)) / 3);display:flex;flex-direction:column}
@media (max-width:1000px){.reasons--3-2 > li{flex:0 1 calc((100% - clamp(16px,1.8vw,24px)) / 2)}}
@media (max-width:640px){.reasons--3-2 > li{flex:1 1 100%}}
.reasons{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,1.8vw,24px)}
.reason{background:var(--white);border-radius:var(--r);padding:clamp(26px,2.4vw,34px) clamp(20px,2vw,26px);text-align:center;color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.reason:hover{transform:translateY(-10px);box-shadow:0 26px 54px rgba(0,0,0,.26)}
.reason__ico{width:56px;height:56px;margin:0 auto 20px;display:grid;place-items:center;border-radius:14px;background:var(--navy);color:var(--yellow);transition:transform .5s var(--ease)}
.reason:hover .reason__ico{transform:rotate(-6deg) scale(1.06)}
.reason h3{font-family:var(--head);font-weight:500;font-size:21px;line-height:1.24;margin-bottom:12px;color:var(--ink)}
.reason p{font-size:14px;color:var(--ink-soft)}
/* ---------- Registration + partners ---------- */
.registry--single{grid-template-columns:1fr !important;max-width:760px}
.registry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.6vw,52px);align-items:start}
.plate-card{background:var(--white);border-radius:var(--r-lg);padding:clamp(28px,3vw,42px);color:var(--ink);text-align:center}
.plate-card img{max-width:250px;margin:0 auto 26px}
.plate-card dl{display:grid;gap:20px;margin:0;text-align:left}
.plate-card dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.plate-card dd{margin:0;font-family:var(--head);font-weight:600;font-size:20px;color:var(--ink)}
.partner{display:flex;align-items:center;gap:24px;background:var(--white);border-radius:var(--r);padding:22px 26px;margin-bottom:16px;color:var(--ink);transition:transform .4s var(--ease)}
.partner:hover{transform:translateX(6px)}
.partner__logo{flex:0 0 132px;height:56px;display:grid;place-items:center}
.partner__logo img{max-height:56px;max-width:132px;width:auto;object-fit:contain}
.partner h3{font-family:var(--head);font-weight:500;font-size:23px;margin-bottom:2px;color:var(--ink)}
.partner p{font-size:13.5px;color:var(--ink-soft);margin:0}

/* ---------- Testimonials ---------- */
.carousel__view{overflow:hidden;padding:6px}
.track{display:flex;transition:transform .7s var(--ease)}
.quote{flex:0 0 calc((100% - 2 * 26px) / 3);margin-right:26px;background:var(--white);color:var(--ink);border-radius:var(--r-lg);padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column}
.quote:nth-child(3n+1){background:var(--yellow)}
.quote--empty{opacity:.5}
.quote--empty blockquote{font-style:italic}
.quote__mark{font-family:var(--head);font-weight:700;font-size:52px;line-height:.7;color:rgba(18,32,57,.22);margin-bottom:14px}
.quote blockquote{margin:0 0 26px;flex:1;font-size:16px;line-height:1.62}
.quote__by{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(18,32,57,.14)}
.quote__by .frame{width:52px;height:52px;border-radius:50%;flex:none}
.quote__by strong{display:block;font-family:var(--head);font-weight:600;font-size:15.5px}
.quote__by span{display:block;font-size:13.5px;color:var(--ink-soft)}
.quote:nth-child(3n+1) .quote__by span{color:#33405A}
.controls{display:flex;align-items:center;gap:18px;margin-top:36px}
.cbtn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);color:var(--white);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.cbtn:hover:not(:disabled){background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.cbtn:disabled{opacity:.3;cursor:default}
.dots{display:flex;gap:9px;margin-left:auto}
.dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s var(--ease),width .3s var(--ease)}
.dots button[aria-current="true"]{background:var(--yellow);width:26px;border-radius:6px}
/* ---------- Final CTA,the live site's yellow band ---------- */
.cta{padding-block:clamp(46px,6vw,86px);background:var(--navy)}
.cta__box{background:var(--yellow);color:var(--navy);border-radius:var(--r-lg);padding:clamp(28px,3.6vw,48px);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;box-shadow:0 24px 60px rgba(245,196,67,.2)}
.cta__box h2{font-size:clamp(25px,3.2vw,42px);line-height:1.14;margin:0 0 12px;max-width:22ch}
.cta__box p{margin:0;max-width:52ch;font-size:16px;color:rgba(18,32,57,.82)}
/* ---------- Contact form ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4.4vw,64px);align-items:start}
.form-card{background:var(--white);border-radius:var(--r-lg);padding:clamp(26px,3vw,42px);color:var(--ink)}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid rgba(18,32,57,.2);border-radius:10px;background:var(--white);font:inherit;font-size:15px;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(245,196,67,.22)}
.field textarea{min-height:140px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);margin-bottom:24px}
.consent input{margin-top:4px;flex:none}
.detail{border-bottom:1px solid rgba(255,255,255,.14);padding:20px 0}
.detail dt{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px}
.detail dd{margin:0;font-size:16px}
/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);padding-block:clamp(52px,6vw,80px) 30px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr .8fr;gap:clamp(24px,3vw,44px)}
.fblurb{max-width:32ch;margin:20px 0 24px;color:var(--light-soft)}
.fhead{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin:0 0 20px}
.flist li+li{margin-top:12px}
.flist a{color:var(--light-soft);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.flist a:hover{color:var(--yellow);padding-left:5px}
.fbadge{max-width:180px;border-radius:8px;margin-bottom:14px}
.flic{font-size:13.5px;line-height:1.7;color:var(--light-soft);margin-bottom:22px}
.fpartners{display:grid;gap:20px;align-items:center}
.fpartners img{max-height:42px;max-width:150px;width:auto;object-fit:contain}
.flegal{margin-top:clamp(34px,4vw,52px);padding-top:24px;border-top:1px solid rgba(245,194,66,.22)}
.frisk{font-size:14px;line-height:1.75;color:rgba(255,255,255,.84);max-width:100ch;margin:0}
@media (max-width:680px){.frisk{font-size:13.5px}}
.fcopy{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
/* ---------- Hero photograph ----------
   Sits above the drawn skyline. When it loads,the drawn skyline is
   hidden automatically; if the file is missing the photo removes
   itself and the drawn skyline stays. Either way the hero is never
   blank. ---------------------------------------------------------- */
.hero:has(.hero__photo) .bld::after,
.hero:has(.hero__photo) .bld--burj::before,
.hero:has(.hero__photo) .sky__water::after{animation:none}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:1;
  animation:heroZoom 90s ease-in-out infinite alternate}
.hero.has-photo .sky{display:none}
/* ---------- Animated skyline ---------- */
.sky{position:absolute;inset:0;overflow:hidden;z-index:0}
.sky__grad{position:absolute;inset:0;background:linear-gradient(180deg,#0B1220 0%,#132745 42%,#33456A 68%,#8A6A4E 86%,#C98F52 100%)}
/* Sun sitting low,breathing */
.sky__sun{position:absolute;left:52%;bottom:16%;width:190px;height:190px;margin-left:-95px;border-radius:50%;
  background:radial-gradient(circle,#FFD98A 0%,rgba(245,196,67,.65) 38%,rgba(245,196,67,0) 70%);
  animation:sun 16s ease-in-out infinite}
0%,100%{transform:scale(1);opacity:.9}
50%{transform:scale(1.12);opacity:1}
/* Haze bands sliding across at different speeds */
.sky__haze{position:absolute;left:-50%;width:200%;height:120px;border-radius:50%;filter:blur(26px);opacity:.28}
.sky__haze--1{bottom:34%;background:rgba(255,214,150,.7);animation:hz 46s linear infinite}
.sky__haze--2{bottom:26%;background:rgba(255,180,120,.55);animation:hz 68s linear infinite reverse}
.sky__haze--3{bottom:44%;background:rgba(180,200,255,.4);animation:hz 92s linear infinite}
from{transform:translateX(-14%)}
to{transform:translateX(14%)}
/* Building silhouettes */
.sky__city{position:absolute;left:0;right:0;bottom:0;height:62%;display:flex;align-items:flex-end;gap:.6%;padding:0 2%}
.bld{position:relative;flex:1;background:linear-gradient(180deg,#0E1B2F,#060D18);border-radius:3px 3px 0 0;
  box-shadow:0 0 26px rgba(6,12,22,.6)}
.bld::after{content:"";position:absolute;top:6px;left:12%;right:12%;bottom:0;
  background-image:radial-gradient(rgba(245,196,67,.85) 45%,transparent 46%);
  background-size:9px 15px;opacity:.5;animation:windows 11s steps(2) infinite}
0%,100%{opacity:.34}
50%{opacity:.72}
.bld:nth-child(2n)::after{animation-duration:5.5s;animation-delay:-1s}
.bld:nth-child(3n)::after{animation-duration:7s;animation-delay:-2.4s}
.bld:nth-child(5n)::after{animation-duration:6s;animation-delay:-3.1s}
/* The tall one,with a beacon */
.bld--burj{flex:0 0 6%;height:96%!important;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#16273F,#070E1A)}
.bld--burj::before{content:"";position:absolute;top:-16px;left:50%;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:#FF6B6B;box-shadow:0 0 12px #FF6B6B;animation:beacon 6.5s ease-in-out infinite}
0%,100%{opacity:.25;transform:scale(.8)}
50%{opacity:1;transform:scale(1.3)}
/* Water and its shimmer */
.sky__water{position:absolute;left:0;right:0;bottom:0;height:16%;
  background:linear-gradient(180deg,rgba(201,143,82,.5),rgba(11,18,32,.9))}
.sky__water::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,214,150,.16) 0 2px,transparent 2px 7px);
  animation:ripple 9s ease-in-out infinite}
0%,100%{transform:translateY(0);opacity:.5}
50%{transform:translateY(4px);opacity:.85}
/* Aircraft crossing every so often */
.sky__plane{position:absolute;top:22%;left:-6%;width:4px;height:4px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px #fff;animation:fly 26s linear infinite}
.sky__plane--2{top:34%;animation-duration:38s;animation-delay:-14s;opacity:.7}
0%{transform:translate(0,0);opacity:0}
6%{opacity:1}
94%{opacity:1}
100%{transform:translate(112vw,-5vh);opacity:0}

/* ==================================================================
   AMBIENT MOTION
   Everything here animates on its own. Hover does not exist on a
   phone and scroll events are unreliable inside embedded viewers,
   so the page cannot depend on either to feel alive.
   ================================================================== */

/* Slow drifting light in the hero, three orbs on different cycles */
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22;pointer-events:none;z-index:1}
.orb--1{width:52vw;height:52vw;background:rgba(245,196,67,.55);left:44%;top:44%;animation:drift1 19s ease-in-out infinite alternate}
.orb--2{width:40vw;height:40vw;background:rgba(232,140,72,.42);left:8%;top:58%;animation:drift2 23s ease-in-out infinite alternate}
.orb--3{width:34vw;height:34vw;background:rgba(140,180,235,.22);left:70%;top:14%;animation:drift3 27s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(-6%,4%) scale(1)}to{transform:translate(10%,-8%) scale(1.2)}}
@keyframes drift2{from{transform:translate(4%,-6%) scale(1.1)}to{transform:translate(-10%,8%) scale(.9)}}
@keyframes drift3{from{transform:translate(6%,6%) scale(.95)}to{transform:translate(-8%,-6%) scale(1.15)}}

/* A light sweep crossing the hero every eight seconds */
.sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.sweep::before{
  content:"";position:absolute;top:-40%;left:-60%;width:34%;height:190%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-16deg);animation:sweep 14s ease-in-out infinite;
}
@keyframes sweep{0%{left:-60%}55%{left:130%}100%{left:130%}}

/* Yellow rule under a heading, drawing itself over and over */
.pulse-rule{display:block;height:3px;width:74px;border-radius:2px;background:var(--yellow);margin:20px 0 0;transform-origin:left;animation:ruleDraw 7s var(--ease) infinite}
.section-head--center .pulse-rule{margin-inline:auto;transform-origin:center}
@keyframes ruleDraw{0%{transform:scaleX(0);opacity:.4}45%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:.4}}

/* Cards breathe, each offset so the grid never moves in lockstep */
.float{animation:float 11s ease-in-out infinite}
.float:nth-child(2){animation-delay:-1.4s}
.float:nth-child(3){animation-delay:-2.8s}
.float:nth-child(4){animation-delay:-4.2s}
.float:nth-child(5){animation-delay:-5.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Step numerals glow in turn, so the process reads as a sequence */
.step:nth-child(1) .step__no{animation:glow 6s ease-in-out infinite}
.step:nth-child(2) .step__no{animation:glow 6s ease-in-out infinite 1.5s}
.step:nth-child(3) .step__no{animation:glow 6s ease-in-out infinite 3s}
.step:nth-child(4) .step__no{animation:glow 6s ease-in-out infinite 4.5s}
@keyframes glow{0%,70%,100%{color:rgba(245,196,67,.55);transform:none}
                12%{color:var(--yellow);transform:translateY(-5px) scale(1.06)}
                32%{color:var(--yellow);transform:none}}

/* The play button breathes as well as pulsing */
.plate .play{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* Scroll cue under the hero */
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:grid;place-items:center;gap:8px;color:var(--light-soft);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.cue__line{width:1px;height:42px;background:linear-gradient(var(--yellow),transparent);animation:cue 4.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;opacity:0}
  25%{transform:scaleY(1);opacity:.85}
  75%{transform:scaleY(1);opacity:.85}
  100%{transform:scaleY(1);transform-origin:bottom;opacity:.25}}

/* Live dot next to the ticker */
.live{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);padding-right:20px;flex:none}
.live i{width:7px;height:7px;border-radius:50%;background:var(--yellow);animation:blink 4.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.72}}

/* Credential strip, always scrolling */
.strip{overflow:hidden;max-width:100vw;border-block:1px solid rgba(255,255,255,.12);padding:16px 0}
.strip__track{display:flex;gap:56px;white-space:nowrap;animation:marquee 90s linear infinite;font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--light-soft)}
.strip__track span{display:inline-flex;align-items:center;gap:14px}
.strip__track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--yellow);flex:none}

/* Counters */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(34px,4vw,52px)}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:clamp(22px,2.4vw,32px);text-align:center}
.stat__n{font-family:var(--head);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--yellow);display:block;margin-bottom:8px}
.stat__l{font-size:13.5px;color:var(--light-soft)}

.pulse-rule{transform:none}

/* ---------- Numbered structure blocks ---------- */
.numbered{display:grid;gap:clamp(16px,1.8vw,24px)}
.numbered--2{grid-template-columns:repeat(2,1fr)}
.numbered--3{grid-template-columns:repeat(3,1fr)}
.numbered--4{grid-template-columns:repeat(4,1fr)}
.nblock{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:clamp(22px,2.1vw,30px)}
.section--light .nblock,.section--white .nblock{background:var(--white);border-color:rgba(18,32,57,.1)}

.nblock h3{font-family:var(--head);font-weight:500;font-size:23px;line-height:1.26;margin-bottom:12px}
.nblock p{font-size:14.5px;color:var(--light-soft)}
.section--light .nblock p,.section--white .nblock p{color:var(--ink-soft)}
.nblock__ref{display:inline-block;margin-top:14px;padding:7px 12px;border-radius:7px;background:rgba(245,196,67,.16);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--yellow)}
.section--light .nblock__ref,.section--white .nblock__ref{background:rgba(245,196,67,.28);color:#6E520B}

/* Bulleted specifics */
.speclist{margin-top:18px}
.speclist li{position:relative;padding-left:22px;font-size:14.5px;color:var(--light-soft);margin-bottom:11px}
.speclist li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--yellow)}
.section--light .speclist li,.section--white .speclist li{color:var(--ink-soft)}
.section--light .speclist li::before,.section--white .speclist li::before{background:var(--yellow-deep)}

/* Facts row under the hero of a page */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.6vw,46px)}
.fact dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:7px}
.fact dd{margin:0;font-size:15.5px;line-height:1.4}

/* Performance figures */
.perf{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px)}
.pcell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);text-align:center}
.pcell b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.1;color:var(--yellow);margin-bottom:8px}
.pcell span{display:block;font-size:12.5px;color:var(--light-soft);line-height:1.45}
.riskbox{margin-top:clamp(26px,3vw,40px);border-left:3px solid var(--yellow);background:rgba(245,196,67,.09);border-radius:0 12px 12px 0;padding:20px 24px;font-size:14px;color:var(--light-soft)}
.section--light .riskbox,.section--white .riskbox{color:var(--ink-soft);background:rgba(245,196,67,.16)}

/* Solution panel */
.solution{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.solution__body{padding:clamp(26px,2.6vw,38px)}
.tag{display:inline-block;padding:6px 14px;border-radius:20px;background:var(--yellow);color:var(--navy);font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.tag--soon{background:rgba(245,196,67,.22);color:var(--yellow)}

@media (max-width:1100px){.numbered--4,.perf{grid-template-columns:repeat(2,1fr)}.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.numbered--2,.numbered--3{grid-template-columns:1fr}}
@media (max-width:680px){.numbered--4,.perf,.facts{grid-template-columns:1fr}}

/* ---------- Motion switch ----------
   The system 'reduce motion' setting decides the default. This lets a
   visitor override it either way, which is the accessible pattern:
   respect the preference, but never trap someone in it. --------- */
.motion-toggle{position:fixed;right:14px;bottom:14px;z-index:150;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:24px;background:rgba(9,22,40,.72);border:1px solid rgba(245,194,66,.28);
  color:rgba(245,194,66,.75);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;
  backdrop-filter:blur(8px);opacity:.6;transition:opacity .3s,background .3s,transform .3s}
.motion-toggle:focus-visible{opacity:1}
.motion-toggle:hover{opacity:1;transform:translateY(-2px);background:rgba(9,22,40,.95)}
html[data-motion="off"] .motion-toggle i{background:rgba(245,194,66,.35);animation:none}
.motion-toggle i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
html[data-motion="on"] .motion-toggle i{animation:blink 4.5s ease-in-out infinite}
.motion-toggle{color:var(--light-soft);border-color:rgba(255,255,255,.28)}
.motion-toggle i{background:rgba(255,255,255,.4)}
@media (max-width:680px){.motion-toggle{right:12px;bottom:12px;padding:10px 14px;font-size:11px}}


/* ---------- Icon feature row ---------- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.14);border-radius:var(--r)}
.feat{padding:clamp(26px,2.6vw,36px);border-right:1px solid rgba(255,255,255,.14)}
.feat:last-child{border-right:0}
.feat svg{color:var(--yellow);margin-bottom:20px}
.feat h3{font-family:var(--head);font-weight:500;font-size:21px;margin-bottom:12px}
.feat p{font-size:14.5px;color:var(--light-soft)}
/* The feature row also runs on an ivory band, so its rules and body text
   are restated in ink rather than white. */
.section--light .feats,.section--white .feats{border-color:rgba(18,32,57,.16)}
.section--light .feat,.section--white .feat{border-right-color:rgba(18,32,57,.16)}
.section--light .feat:last-child,.section--white .feat:last-child{border-right:0}
.section--light .feat svg,.section--white .feat svg{color:var(--yellow-deep)}
.section--light .feat p,.section--white .feat p{color:var(--ink-soft)}

/* ---------- Trade anatomy panel ---------- */
.trade{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.04)}
.trade__head{display:flex;align-items:center;gap:10px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--light-soft)}
.trade__dot{width:8px;height:8px;border-radius:50%;background:#5FCF9B;animation:blink 4.5s ease-in-out infinite}
.trade__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.09)}
.trade__k{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-soft)}
.trade__v{font-family:var(--head);font-weight:600;font-size:clamp(21px,2vw,28px)}
.trade__v small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--light-soft);font-weight:500;margin-top:5px;text-align:right}
.trade__v--up{color:#5FCF9B}
.trade__v--dn{color:#F08A8A}
.trade__note{padding:18px 24px;font-size:13.5px;color:var(--light-soft);background:rgba(255,255,255,.03)}





/* ---------- Responsibility table ---------- */
.rtable{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden}
.rtable th{text-align:left;padding:18px 22px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.14)}
.rtable th:nth-child(2){color:var(--light)}
.rtable th:nth-child(3){color:var(--yellow)}
.rtable td{padding:18px 22px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top}
.rtable tr:last-child td{border-bottom:0}
.rtable td:first-child{color:var(--light)}
.rtable td:nth-child(2),.rtable td:nth-child(3){color:var(--light-soft)}
.rtable .yes{color:var(--yellow)}
.rtable .no{color:#F08A8A}
.rtable tr.hl td{background:rgba(245,196,67,.07)}

/* ---------- Threshold panel ---------- */
.thresh{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(28px,4vw,60px);align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:clamp(30px,4vw,54px);background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.thresh__n{font-family:var(--head);font-weight:400;font-size:clamp(42px,6vw,84px);line-height:1;color:var(--yellow)}
.thresh__l{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--light-soft);margin-top:14px}
.thresh__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.thresh__grid dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:7px}
.thresh__grid dd{margin:0;font-size:15px;color:var(--light-soft);line-height:1.5}

/* ---------- Allocation bars ---------- */






.in .bar--80 
.in .bar--20 
.bar--80 
.bar--80 
.bar--20 
.bar--20 


.alloc__key i{width:10px;height:10px;border-radius:50%;flex:none}


/* ---------- Build steps ---------- */


.build__row:last-child{border-bottom:0}

.build__b{flex:1}




/* ---------- Case study report ---------- */
.report{border:1px solid rgba(245,196,67,.5);border-radius:var(--r);overflow:hidden}
.report__tag{display:inline-block;background:var(--yellow);color:var(--navy);padding:12px 22px;font-family:var(--head);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.report__in{display:grid;grid-template-columns:1fr 1fr}
.report__l{padding:clamp(28px,3.4vw,46px);border-right:1px solid rgba(255,255,255,.14)}
.report__r{padding:clamp(28px,3.4vw,46px)}
.report__date{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px}
.report__big{font-family:var(--head);font-weight:400;font-size:clamp(52px,8vw,110px);line-height:1;color:var(--yellow)}
.report__sub{font-size:15px;color:var(--light-soft);margin:16px 0 32px}
.report__row{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px}
.report__row b{font-weight:600}
.up{color:#5FCF9B}
.tbox{border:1px solid rgba(95,207,155,.35);background:rgba(95,207,155,.08);border-radius:10px;padding:18px 20px;font-size:14.5px;color:var(--light-soft);margin:26px 0}
.tbox b{color:#5FCF9B}

/* ---------- Light account cards ---------- */
.acct{background:var(--white);color:var(--ink);border-radius:var(--r);padding:clamp(26px,2.6vw,34px);box-shadow:0 18px 44px rgba(0,0,0,.18)}
.acct__date{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow-deep);margin-bottom:12px}
.acct__name{font-family:var(--head);font-weight:600;font-size:17px;margin-bottom:18px}
.acct__pc{font-family:var(--head);font-weight:400;font-size:clamp(38px,4.4vw,56px);line-height:1;color:var(--ink)}
.acct__pc span{color:var(--yellow-deep);font-size:.55em}
.acct__cap{font-size:14px;color:var(--ink-soft);margin:10px 0 22px}
.acct__row{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid rgba(43,43,43,.12);font-size:14.5px;color:var(--ink-soft)}
.acct__row b{color:var(--ink);font-weight:600}
.acct__row b.up{color:#1E7A50}

@media (max-width:1100px){.feats{grid-template-columns:repeat(2,1fr)}.feat:nth-child(2){border-right:0}}
@media (max-width:960px){.report__in,.thresh,.thresh__grid,.report__l{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}}
@media (max-width:680px){.feats{grid-template-columns:1fr}.feat{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .section--light .feat,.section--white .feat{border-bottom-color:rgba(18,32,57,.16)}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable thead{display:none}
  .rtable tr{border-bottom:1px solid rgba(255,255,255,.14);padding:6px 0}
  .rtable td{border:0;padding:8px 18px}
  .rtable td:first-child{font-family:var(--head);font-weight:600;padding-top:16px}
  }


/* ---------- Cinematic video band ----------
   The film plays silently on a loop behind the copy, so the section is
   alive without anyone pressing anything. Pressing play opens the same
   film full size, with sound and controls. ------------------------- */
.filmband{position:relative;overflow:hidden;min-height:min(78vh,760px);display:flex;align-items:center;background:var(--navy-deep)}
.filmband__media{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
/* Once the visitor presses play the film takes the whole band: it rises above
   the cover and the copy, and its controls become usable. */
.filmband.is-playing{min-height:0;aspect-ratio:16/9;background:#000}
.filmband.is-playing .filmband__media{z-index:5;pointer-events:auto}
.filmband.is-playing .filmband__poster,
.filmband.is-playing .filmcover,
.filmband.is-playing .filmband__grid{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.filmband.is-playing .filmband__in{position:absolute;inset:auto 0 0 0;z-index:7;pointer-events:none}
.filmband.is-playing .filmreplay{pointer-events:auto}
/* The film, once playing, fills the band squarely: no centring transform. */
.filmband.is-playing .filmband__media video{
  position:absolute;top:0;left:0;transform:none;
  width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;background:#000}
@media (max-width:700px){.filmband.is-playing{aspect-ratio:4/3}}
/* The iframe is oversized so the player's own letterboxing never shows */
.filmband__media video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover}
.filmband__media iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;border:0;
}
.filmband__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.28;filter:saturate(.6) brightness(.55)}
.filmcover{position:absolute;inset:0;z-index:2;transition:opacity .9s var(--ease)}
.filmcover__bg{position:absolute;inset:0;background:
  radial-gradient(70% 70% at 62% 45%,rgba(245,194,66,.16),transparent 68%),
  linear-gradient(120deg,#0D1D33 0%,#172A46 52%,#091628 100%)}
.filmcover__lines{position:absolute;inset:0;opacity:.42}
.tw-logo{background:var(--tw-logo) center/contain no-repeat;display:block}
.filmcover__logo{position:absolute;right:clamp(20px,3vw,44px);top:clamp(20px,3vw,40px);height:46px;width:auto;opacity:.85;z-index:3}
.filmband.is-playing .filmcover{opacity:0;pointer-events:none}
.filmband.is-playing .filmband__scrim{opacity:0;transition:opacity .9s var(--ease)}
.filmreplay{position:absolute;right:clamp(16px,2.4vw,28px);top:clamp(16px,2.4vw,28px);bottom:auto;z-index:8;display:none;
  background:rgba(9,22,40,.72);backdrop-filter:blur(6px)}
.filmband.is-playing .filmreplay{display:inline-flex}
.filmband__scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(96deg,rgba(11,18,32,.92) 0%,rgba(11,18,32,.72) 42%,rgba(11,18,32,.42) 100%),
             linear-gradient(180deg,rgba(11,18,32,.5),transparent 30%,transparent 70%,rgba(11,18,32,.6))}
.filmband__in{position:relative;z-index:3;width:100%}
.filmband__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,60px);align-items:center}
.filmband__badge{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:30px;
  border:1px solid rgba(245,196,67,.45);font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:22px}
.filmband__badge i{width:7px;height:7px;border-radius:50%;background:var(--yellow);animation:blink 4.5s ease-in-out infinite}
.playbig{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(245,196,67,.95);color:var(--navy);position:relative;
  transition:transform .4s var(--ease),background .4s var(--ease)}
.playbig::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(245,196,67,.5);animation:pulse 5.5s ease-out infinite}
.playbig::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(245,196,67,.35);animation:pulse 5.5s ease-out infinite 1.4s}
.playbig:hover{transform:scale(1.07);background:var(--yellow-lift)}
.playbig span{font-family:var(--head);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;position:absolute;bottom:-30px;color:var(--yellow);white-space:nowrap}
@media (max-width:860px){
  .filmband{min-height:auto;padding-block:clamp(56px,9vw,96px)}
  .filmband__grid{grid-template-columns:1fr;gap:34px}
  .playbig{width:88px;height:88px}
}



/* ---------- Executive leadership ---------- */
.execs{display:grid;gap:clamp(40px,5vw,72px)}
.exec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}

.exec__portrait{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;width:220px;
  background:linear-gradient(150deg,#1B2E4D,#0B1220);border:1px solid rgba(245,196,67,.22)}
.exec__portrait img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.exec:hover .exec__portrait img{transform:scale(1.04)}
.exec__initials{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--head);
  font-size:clamp(46px,5vw,68px);color:rgba(245,196,67,.5);letter-spacing:.06em}
.exec__name{font-family:var(--head);font-weight:500;font-size:clamp(27px,2.8vw,38px);line-height:1.06;margin:0 0 10px}
.exec__role{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);margin:0 0 26px}
.exec__bio p{font-size:16px;color:var(--light-soft);max-width:60ch;margin-bottom:1.05em}
.exec__quote{position:relative;margin-top:26px;padding-top:26px;max-width:60ch}
.exec__quote::before{content:"";position:absolute;top:0;left:0;width:74px;height:1px;background:var(--yellow)}
.exec__quote blockquote{margin:0;font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.8vw,25px);line-height:1.45;color:var(--light)}
.exec__links{display:flex;gap:12px;margin-top:30px}
.exec__links a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);color:var(--light-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.exec__links a:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(245,196,67,.1);transform:translateY(-2px)}
.section--light .exec__bio p{color:var(--ink-soft)}
.section--light .exec__name{color:var(--ink)}
.section--light .exec__role{color:var(--yellow-deep)}
.section--light .exec__quote blockquote{color:var(--ink)}
.section--light .exec__quote::before{background:var(--yellow-deep)}
.section--light .exec__links a{border-color:rgba(43,43,43,.22);color:var(--ink-soft)}
.section--light .exec__links a:hover{border-color:var(--yellow-deep);color:var(--yellow-deep);background:rgba(245,196,67,.14)}

@media (max-width:900px){
  .exec{grid-template-columns:1fr;gap:22px;justify-items:start}
  .exec__portrait{width:170px;aspect-ratio:1/1;border-radius:50%}
  .exec__quote{max-width:none}
}
@media (max-width:600px){
  .exec__portrait{max-width:200px}
  .exec__links a{width:42px;height:42px}
}


/* ==================================================================
   PREMIUM MOTION
   Restrained, expensive-feeling movement: masked line reveals, rules
   that draw themselves, images that settle, and hover states that
   respond rather than bounce.
   ================================================================== */

/* Headlines rise out of a mask, line by line */
.mask{display:block;overflow:hidden}
.mask > span{display:block;transform:translateY(110%);opacity:0;
  transition:transform 1.05s cubic-bezier(.16,.84,.32,1),opacity .8s ease}
.in .mask > span,.mask.in > span{transform:none;opacity:1}
.in .mask:nth-of-type(2) > span{transition-delay:.10s}
.in .mask:nth-of-type(3) > span{transition-delay:.20s}

/* A gold hairline that draws across before the heading lands */
.section-head .eyebrow{position:relative;padding-left:0;display:inline-flex;align-items:center;gap:16px}
.section-head .eyebrow::before{content:"";width:0;height:1px;background:currentColor;opacity:.6;
  transition:width 1s cubic-bezier(.16,.84,.32,1)}
.in .eyebrow::before,.eyebrow.in::before{width:56px}

/* Images settle into place rather than appearing */
.frame img,.exec__portrait img{transform:scale(1.06)}
.in .frame img,.in .exec__portrait img,.frame.in img{transform:scale(1);transition:transform 1.6s cubic-bezier(.16,.84,.32,1)}

/* Buttons lift with a weighted, slightly slow ease */
.btn{transition:background .45s cubic-bezier(.16,.84,.32,1),color .45s,border-color .45s,
     transform .45s cubic-bezier(.16,.84,.32,1),box-shadow .45s cubic-bezier(.16,.84,.32,1)}
.btn--yellow:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}

/* Cards: a gold hairline draws along the top edge on approach */
.nblock{position:relative;overflow:hidden}
.nblock::before{content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--yellow),transparent);
  transition:width 1.1s cubic-bezier(.16,.84,.32,1)}
.in .nblock::before{width:100%}
.in .nblock:nth-child(2)::before{transition-delay:.1s}
.in .nblock:nth-child(3)::before{transition-delay:.2s}
.in .nblock:nth-child(4)::before{transition-delay:.3s}

/* Large figures count up visually by sliding into focus */
.thresh__n,.report__big,.acct__pc,.pcell b{
  transition:transform 1.2s cubic-bezier(.16,.84,.32,1),opacity 1s ease}
.js [data-reveal] .thresh__n,.js [data-reveal] .report__big{transform:translateY(24px);opacity:0}
.js [data-reveal].in .thresh__n,.js [data-reveal].in .report__big{transform:none;opacity:1}

/* Table rows arrive in sequence */
.rtable tbody tr{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.32,1)}
.in .rtable tbody tr{opacity:1;transform:none}
.in .rtable tbody tr:nth-child(1){transition-delay:.05s}
.in .rtable tbody tr:nth-child(2){transition-delay:.11s}
.in .rtable tbody tr:nth-child(3){transition-delay:.17s}
.in .rtable tbody tr:nth-child(4){transition-delay:.23s}
.in .rtable tbody tr:nth-child(5){transition-delay:.29s}
.in .rtable tbody tr:nth-child(6){transition-delay:.35s}
.in .rtable tbody tr:nth-child(7){transition-delay:.41s}

/* Executive rows: portrait and text arrive from opposite sides */
.exec__portrait{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.32,1)}
.exec__body{opacity:0;transform:translateY(26px);transition:opacity .9s ease .12s,transform 1s cubic-bezier(.16,.84,.32,1) .12s}

.exec.in .exec__portrait,.exec.in .exec__body{opacity:1;transform:none}

/* The gold rule above each quote draws itself */
.exec__quote::before{width:0;transition:width 1s cubic-bezier(.16,.84,.32,1) .3s}
.exec.in .exec__quote::before{width:74px}

/* A whisper of grain, which keeps large flat areas from looking digital */
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Nav underline sweeps from the left rather than simply growing */
.nav__links a::after{transition:width .5s cubic-bezier(.16,.84,.32,1)}

html[data-motion="off"] .mask > span{transform:none;opacity:1}
.hero .mask > span{transform:none;opacity:1}
html[data-motion="off"] .eyebrow::before{width:56px}
html[data-motion="off"] .frame img,html[data-motion="off"] .exec__portrait img{transform:none}
html[data-motion="off"] .exec__portrait,html[data-motion="off"] .exec__body,
html[data-motion="off"] .rtable tbody tr{opacity:1;transform:none}
html[data-motion="off"] .nblock::before,html[data-motion="off"] .exec__quote::before{width:100%}
html[data-motion="off"] body::after{display:none}


/* ---------- Service visual containers: one shared system ---------- */
.svis__slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.svis__slot span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,242,236,.34);border:1px dashed rgba(244,242,236,.22);border-radius:10px;padding:12px 18px}
.svis{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(169,138,66,.55);box-shadow:0 22px 50px rgba(9,22,40,.45);
  background:radial-gradient(120% 100% at 50% 45%,#172A46,#10233D 55%,#0D1D33);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.svis:hover{border-color:rgba(245,194,66,.8);box-shadow:0 26px 60px rgba(9,22,40,.6),0 0 40px rgba(245,194,66,.12)}
.svis img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02) brightness(.97)}
.svis--bright img{filter:saturate(.9) contrast(1.02) brightness(1)}
.svis::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,29,51,.14),rgba(13,29,51,.02) 45%,rgba(13,29,51,.26))}

/* ---------- Animated globe ---------- */


.globe-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.globe__glow{position:absolute;z-index:1;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(245,194,66,.12),transparent 68%);transform:translateX(6%)}


.spoints{margin:20px 0 24px}
.spoints li{position:relative;padding-left:22px;font-size:14.5px;color:var(--light-soft);margin-bottom:9px}
.spoints li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--yellow)}
.section--light .spoints li{color:var(--ink-soft)}
.section--light .spoints li::before{background:var(--yellow-deep)}

/* ---------- Information panel (disclaimers that read as guidance) ---------- */
.infopanel{border-left:3px solid var(--yellow);background:rgba(23,42,70,.72);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin-top:clamp(26px,3vw,40px)}
.infopanel p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.82);max-width:92ch;margin:0}
.section--light .infopanel{background:rgba(13,29,51,.06);border-left-color:var(--yellow-deep)}
.section--light .infopanel p{color:var(--ink-soft)}


/* ---------- Learn page ---------- */
.linklike{font-family:var(--body);font-weight:600;font-size:15px;color:var(--navy);
  border-bottom:1px solid rgba(13,29,51,.4);padding-bottom:2px;transition:border-color .3s var(--ease)}
.linklike:hover{border-color:var(--navy)}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.qcard{background:var(--white);border-radius:var(--r);padding:clamp(24px,2.3vw,32px);border-top:2px solid var(--yellow);
  color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.qcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(13,29,51,.14)}
.qcard h3{font-family:var(--head);font-weight:500;font-size:21px;line-height:1.24;margin-bottom:12px}
.qcard p{font-size:14.5px;color:var(--ink-soft)}

.lcard{background:var(--navy-soft);border-radius:var(--r);border-top:2px solid rgba(245,194,66,.45);
  padding:clamp(24px,2.3vw,32px);transition:transform .5s var(--ease),border-color .5s var(--ease)}
.lcard:hover{transform:translateY(-6px);border-top-color:var(--yellow)}
.lcard__n{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--yellow);display:block;margin-bottom:14px}
.lcard h3{font-family:var(--head);font-weight:500;font-size:23px;line-height:1.22;margin-bottom:12px;color:var(--light)}
.lcard p{font-size:14.5px;color:var(--light-soft);margin-bottom:18px}
.soon{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,194,66,.85);border:1px solid rgba(245,194,66,.4);border-radius:20px;padding:6px 12px}

/* Webinar */
.webinar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.4vw,52px);align-items:center}
.wcover{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(245,194,66,.45);background:linear-gradient(150deg,#172A46,#0D1D33 62%,#091628);
  display:grid;place-items:center;padding:clamp(26px,3vw,44px);text-align:center}
.wcover::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 42%,rgba(245,194,66,.15),transparent 70%)}
.wcover__lines{position:absolute;inset:0;opacity:.5}
.wcover__in{position:relative;z-index:2;display:grid;gap:16px;justify-items:center}
.wcover__tag{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.wcover__title{font-family:var(--head);font-weight:500;font-size:clamp(20px,2vw,27px);line-height:1.25;color:var(--white);max-width:22ch}
.wcover__logo{height:44px;width:auto;opacity:.9;margin-top:6px}
.wmeta{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:24px 0}
.wmeta dt{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.wmeta dd{margin:0;font-size:15px;color:var(--light-soft)}
.wactions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* Registration modal */
.rmodal{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:20px;overflow-y:auto}
.rmodal[hidden]{display:none}
.rmodal__bg{position:absolute;inset:0;background:rgba(9,22,40,.9);backdrop-filter:blur(5px)}
.rmodal__panel{position:relative;width:min(620px,100%);background:var(--off);color:var(--ink);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,42px);max-height:92vh;overflow-y:auto}
.rmodal__x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(13,29,51,.2);color:var(--ink);font-size:20px;line-height:1}
.rmodal h2{font-family:var(--head);font-weight:500;font-size:clamp(24px,2.4vw,32px);margin-bottom:10px}
.rmodal .field input,.rmodal .field select,.rmodal .field textarea{background:var(--white)}
.rmodal .field input:focus,.rmodal .field select:focus,.rmodal .field textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(245,194,66,.25)}
.err{display:block;color:#B3261E;font-size:13px;margin-top:6px}
.ok{background:rgba(95,207,155,.16);border:1px solid rgba(95,207,155,.5);border-radius:12px;padding:20px;color:#155C3D;font-size:15px}

@media (max-width:1000px){.qcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.webinar{grid-template-columns:1fr}}
@media (max-width:640px){.qcards{grid-template-columns:1fr}.wmeta{grid-template-columns:1fr}}


/* ---------- Footer signature mark ---------- */
.fsign{margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid rgba(245,194,66,.16);display:grid;place-items:center;gap:10px}


.fsign__mark{width:min(340px,62%);height:auto;display:block}


/* Legend beneath the globe */
.glegend{display:grid;gap:9px;margin-top:20px;list-style:none;padding:0}
.glegend li{position:relative;display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--light-soft)}
.glegend__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 3px rgba(245,194,66,.16);transform:translateY(-1px)}
@media (max-width:640px){.glegend li{font-size:11px}}



/* ==================================================================
   THE ACCOUNT JOURNEY
   One continuous pathway through four moments. Sequence runs about
   eleven seconds, rests, then repeats. Complete and still when
   motion is off.
   ================================================================== */
.journey{position:relative;width:100%;aspect-ratio:21/8;border-radius:var(--r-lg);overflow:hidden;
  background:#0D1D33;border:1px solid rgba(245,194,66,.40)}
.journey svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:820px){.journey{aspect-ratio:3/4}}

.jn-glow{fill:rgba(245,194,66,.18);opacity:0;animation:jnGlow 11s ease-in-out infinite}
@keyframes jnGlow{0%{opacity:0}14%{opacity:1}82%{opacity:1}100%{opacity:0}}

.jn-path{fill:none;stroke:#F5C242;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:jnDraw 11s cubic-bezier(.4,0,.3,1) infinite}
@keyframes jnDraw{
  0%{stroke-dashoffset:var(--len)}
  55%{stroke-dashoffset:0}
  88%{stroke-dashoffset:0;opacity:1}
  96%,100%{stroke-dashoffset:0;opacity:0}
}
.jn-rail{fill:none;stroke:rgba(244,242,236,.30);stroke-width:1}

.jn-stage{opacity:0;animation:jnIn 11s ease-in-out infinite}
@keyframes jnIn{0%,6%{opacity:0}14%{opacity:1}88%{opacity:1}96%,100%{opacity:0}}

.jn-line{stroke:rgba(244,242,236,.30);stroke-width:1.2;stroke-linecap:round;fill:none}
.jn-lit{stroke:#FFD24A;stroke-width:1.6;stroke-linecap:round;fill:none;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  animation:jnLit 11s ease-out infinite}
@keyframes jnLit{0%,14%{stroke-dashoffset:var(--l)}22%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0}}

.jn-panel{fill:#172A46;stroke:rgba(245,194,66,.40);stroke-width:1}
.jn-panel--a{animation:jnSepA 11s ease-in-out infinite}
.jn-panel--b{animation:jnSepB 11s ease-in-out infinite}
@keyframes jnSepA{0%,26%{transform:translateY(0)}38%,88%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes jnSepB{0%,26%{transform:translateY(0)}38%,88%{transform:translateY(7px)}100%{transform:translateY(0)}}

.jn-curve{fill:none;stroke:#F5C242;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:120;stroke-dashoffset:120;animation:jnCurve 11s ease-in-out infinite}
@keyframes jnCurve{0%,44%{stroke-dashoffset:120}58%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0}}
.jn-ring{fill:none;stroke:rgba(245,194,66,.40);stroke-width:1;
  opacity:0;animation:jnRing 11s ease-in-out infinite}
@keyframes jnRing{0%,50%{opacity:0;r:14}62%{opacity:1;r:24}88%{opacity:1;r:24}96%,100%{opacity:0}}
.jn-core{fill:#F5C242}

.jn-bar{stroke:#FFD24A;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:jnBar 11s ease-out infinite}
@keyframes jnBar{0%,66%{stroke-dashoffset:var(--l)}76%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0}}
.jn-mark{fill:#F4F2EC;opacity:0;animation:jnMark 11s ease-out infinite}
@keyframes jnMark{0%,72%{opacity:0}80%{opacity:.9}88%{opacity:.9}96%,100%{opacity:0}}

.jn-num{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;fill:#F5C242}
.jn-word{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.02em;fill:#F4F2EC}

html[data-motion="off"] .jn-glow{animation:none;opacity:1}
html[data-motion="off"] .jn-path,
html[data-motion="off"] .jn-lit,
html[data-motion="off"] .jn-curve,
html[data-motion="off"] .jn-bar{animation:none;stroke-dashoffset:0;opacity:1}
html[data-motion="off"] .jn-stage,
html[data-motion="off"] .jn-ring,
html[data-motion="off"] .jn-mark{animation:none;opacity:1}
html[data-motion="off"] .jn-panel--a{animation:none;transform:translateY(-7px)}
html[data-motion="off"] .jn-panel--b{animation:none;transform:translateY(7px)}

/* ---- the four explanations, aligned under their stages ---- */
.jsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px);
  margin-top:clamp(26px,3vw,40px)}
.jstep__n{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--yellow);margin-bottom:12px}
.jstep h3{font-family:var(--head);font-weight:500;font-size:clamp(19px,1.7vw,23px);
  line-height:1.24;margin-bottom:10px;color:var(--light)}
.jstep p{font-size:14.5px;line-height:1.7;color:#B8C0CC;max-width:34ch}
.section--light .jstep h3{color:var(--ink)}
.section--light .jstep p{color:var(--ink-soft)}
@media (max-width:900px){.jsteps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.jsteps{grid-template-columns:1fr}.jstep p{max-width:none}}


/* Mauritius VCC: photograph beside the proposal card */
.vccrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(20px,2.4vw,34px);
  align-items:stretch;margin-bottom:clamp(26px,3vw,40px)}
.vccrow__img{border-radius:var(--r);overflow:hidden;min-height:100%}
.vccrow__img img{width:100%;height:100%;object-fit:cover;display:block}
.vccrow .card{display:flex;align-items:center}
@media (max-width:860px){
  .vccrow{grid-template-columns:1fr}
  .vccrow__img{aspect-ratio:4/3}
}


/* Selected account examples: the return reads first */
.acct__return{font-family:var(--head);font-weight:500;font-size:clamp(21px,2vw,27px);
  line-height:1.1;color:var(--yellow-deep);margin:2px 0 14px}
.section--light .acct__return{color:var(--yellow-deep)}
.acct .card__body h3{margin-bottom:2px}


/* Case Studies request panel: navy so the gold button reads */
.cta__box--dark{background:var(--navy-soft);color:var(--light);border:1px solid rgba(245,194,66,.35)}
.cta__box--dark h2{color:var(--light)}
.cta__box--dark p{color:var(--light-soft)}


/* Library cards: reading time and article button */
.art__meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);
  opacity:.75;margin:14px 0 18px}
.art__btn{opacity:.55;cursor:default;pointer-events:none}


/* ==================================================================
   ARTICLE PAGES
   Narrow reading measure, a reserved visual band at a fixed ratio so
   the static graphic can become an animation later without the layout
   shifting, and consistent furniture across all three articles.
   ================================================================== */
.art{padding-bottom:clamp(40px,5vw,72px)}
.art__head{max-width:52rem;margin:0 auto clamp(26px,3vw,40px)}
.art__kicker{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px}
.art__cat{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow)}
.art__date{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--light-soft);opacity:.8}
.art__title{font-family:var(--head);font-weight:400;font-size:clamp(32px,4.6vw,58px);line-height:1.08;margin-bottom:18px}
.art__stand{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--light-soft);max-width:46rem}

/* the visual band: fixed ratio, so animation can replace the static art later */
.art__fig{position:relative;width:100%;aspect-ratio:16/7;border-radius:var(--r-lg);overflow:hidden;
  background:#0D1D33;border:1px solid rgba(245,194,66,.32);margin:clamp(24px,3vw,40px) 0}
.art__fig svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:720px){.art__fig{aspect-ratio:4/3}}

.art__body{max-width:38rem;margin:0 auto}
.art__body h2{font-family:var(--head);font-weight:500;font-size:clamp(23px,2.3vw,30px);
  line-height:1.2;margin:clamp(30px,3.4vw,46px) 0 14px}
.art__body h3{font-family:var(--head);font-weight:500;font-size:clamp(19px,1.8vw,22px);margin:26px 0 10px}
.art__body p{font-size:16.5px;line-height:1.78;color:var(--light-soft);margin-bottom:1.1em}
.art__body ul,.art__body ol{margin:0 0 1.3em;padding-left:0}
.art__body li{position:relative;padding-left:24px;font-size:16px;line-height:1.72;
  color:var(--light-soft);margin-bottom:.6em}
.art__body ul li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:1px;background:var(--yellow)}
.art__body ol{counter-reset:n}
.art__body ol li{counter-increment:n;padding-left:32px}
.art__body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11.5px;color:var(--yellow)}
.art__body strong{color:var(--light);font-weight:600}

.pullq{max-width:42rem;margin:clamp(28px,3.4vw,44px) auto;padding-left:26px;
  border-left:2px solid var(--yellow)}
.pullq p{font-family:var(--head);font-style:italic;font-size:clamp(20px,2.1vw,27px);
  line-height:1.42;color:var(--light);margin:0}

.checklist{max-width:38rem;margin:clamp(26px,3vw,40px) auto;background:var(--navy-soft);
  border-radius:var(--r);padding:clamp(24px,2.6vw,34px)}
.checklist h3{font-family:var(--head);font-weight:500;font-size:20px;margin-bottom:16px;color:var(--light)}

.art__disc{max-width:38rem;margin:clamp(26px,3vw,40px) auto 0;padding:20px 24px;
  background:#24334B;border-left:3px solid var(--yellow);border-radius:0 var(--r) var(--r) 0}
.art__disc p{font-size:14px;line-height:1.72;color:rgba(255,255,255,.82);margin:0}

.artcta{max-width:38rem;margin:clamp(30px,3.4vw,46px) auto 0;text-align:center}
.artcta h3{font-family:var(--head);font-weight:500;font-size:clamp(22px,2.2vw,28px);margin-bottom:12px}
.artcta p{font-size:14.5px;color:var(--light-soft);max-width:46ch;margin:0 auto 20px}

.artmore{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px);
  max-width:52rem;margin:clamp(36px,4vw,60px) auto 0}
.artmore a{display:block;background:var(--navy-soft);border-radius:var(--r);padding:24px 26px;
  border:1px solid rgba(255,255,255,.08);transition:border-color .4s var(--ease),transform .4s var(--ease)}
.artmore a:hover{border-color:rgba(245,194,66,.5);transform:translateY(-3px)}
.artmore span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);display:block;margin-bottom:8px}
.artmore h4{font-family:var(--head);font-weight:500;font-size:19px;line-height:1.26;color:var(--light)}
@media (max-width:640px){.artmore{grid-template-columns:1fr}}


/* ==================================================================
   ARTICLE GRAPHIC ANIMATIONS
   Motion begins when the figure enters the viewport and pauses when it
   leaves. With motion off, or when the visitor's device asks for
   reduced motion, the final state is shown immediately.
   Nothing here affects anything outside .art__fig.
   ================================================================== */

/* ---- resting state: the finished picture, so nothing ever renders blank ---- */
.art__fig [class^="cx-"],.art__fig [class^="tr-"],.art__fig [class^="gd-"]{opacity:1}

/* ---------- 1. custody diagram ---------- */
.art__fig.is-live #cx-owner,
.art__fig.is-live #cx-custody,
.art__fig.is-live #cx-auth{opacity:0;animation:cxIn .9s cubic-bezier(.16,.84,.32,1) forwards}
.art__fig.is-live #cx-owner{animation-delay:.1s}
.art__fig.is-live #cx-custody{animation-delay:.45s}
.art__fig.is-live #cx-auth{animation-delay:.8s}
@keyframes cxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.art__fig.is-live #cx-link-owner,
.art__fig.is-live #cx-link-auth,
.art__fig.is-live #cx-link-stmt{stroke-dasharray:420;stroke-dashoffset:420;
  animation:cxDraw 1.4s cubic-bezier(.16,.84,.32,1) forwards}
.art__fig.is-live #cx-link-owner{animation-delay:.9s}
.art__fig.is-live #cx-link-auth{animation-delay:1.2s}
.art__fig.is-live #cx-link-stmt{animation-delay:1.6s}
@keyframes cxDraw{to{stroke-dashoffset:0}}

.art__fig.is-live #cx-flow-a{animation:cxFlowA 4.5s 2.2s linear infinite}
.art__fig.is-live #cx-flow-b{animation:cxFlowB 5.5s 2.6s linear infinite}
@keyframes cxFlowA{0%{transform:translateX(-65px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(65px);opacity:0}}
@keyframes cxFlowB{0%{transform:translateX(-65px);opacity:0}12%{opacity:.8}88%{opacity:.8}100%{transform:translateX(65px);opacity:0}}

/* hover, tap and keyboard focus lift each block */
.cx-block{cursor:pointer;transition:opacity .35s var(--ease)}
.cx-block rect{transition:stroke .35s var(--ease),fill .35s var(--ease)}
.cx-block .cx-role{opacity:.55;transition:opacity .35s var(--ease)}
.cx-block:hover rect,.cx-block:focus-visible rect,.cx-block.is-open rect{stroke:#FFD24A}
.cx-block:hover .cx-role,.cx-block:focus-visible .cx-role,.cx-block.is-open .cx-role{opacity:1}
.cx-block:focus{outline:none}
.cx-block:focus-visible rect{stroke-width:2}

/* ---------- 2. performance dashboard ---------- */
.art__fig.is-live .tr-gain{transform-box:fill-box;transform-origin:bottom;
  transform:scaleY(0);animation:trGrow .55s cubic-bezier(.16,.84,.32,1) forwards}
.art__fig.is-live .tr-loss{transform-box:fill-box;transform-origin:top;
  transform:scaleY(0);animation:trGrow .55s cubic-bezier(.16,.84,.32,1) forwards}
@keyframes trGrow{to{transform:scaleY(1)}}
/* the seven gains arrive first, then the three losses */
.art__fig.is-live #tr-0{animation-delay:.15s}
.art__fig.is-live #tr-1{animation-delay:.28s}
.art__fig.is-live #tr-2{animation-delay:.41s}
.art__fig.is-live #tr-4{animation-delay:.54s}
.art__fig.is-live #tr-5{animation-delay:.67s}
.art__fig.is-live #tr-7{animation-delay:.80s}
.art__fig.is-live #tr-8{animation-delay:.93s}
.art__fig.is-live #tr-3{animation-delay:1.5s}
.art__fig.is-live #tr-6{animation-delay:1.75s}
.art__fig.is-live #tr-9{animation-delay:2.0s}

.art__fig.is-live #tr-curve{stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:trDraw 2.6s 1.2s cubic-bezier(.4,0,.3,1) forwards}
@keyframes trDraw{to{stroke-dashoffset:0}}
.art__fig.is-live #tr-drawdown{opacity:0;animation:trFade .8s 3.4s ease forwards}
.art__fig.is-live #tr-labels{opacity:0;animation:trFade .8s 3.9s ease forwards}
@keyframes trFade{to{opacity:1}}

/* ---------- 3. gold composition ---------- */
.gd-pt{offset-distance:0%;offset-rotate:0deg}
.art__fig.is-live #gd-pt-rates{offset-path:path("M200 245 A360 150 0 1 1 920 245 A360 150 0 1 1 200 245");animation:gdRun 34s 0s linear infinite}
.art__fig.is-live #gd-pt-usd{offset-path:path("M410 245 A150 360 0 1 1 710 245 A150 360 0 1 1 410 245");animation:gdRun 46s 2s linear infinite}
.art__fig.is-live #gd-pt-geo{offset-path:path("M230 245 A330 330 0 1 1 890 245 A330 330 0 1 1 230 245");animation:gdRun 40s 4s linear infinite}
.art__fig.is-live #gd-pt-demand{offset-path:path("M310 245 A250 250 0 1 1 810 245 A250 250 0 1 1 310 245");animation:gdRun 28s 6s linear infinite}
@keyframes gdRun{to{offset-distance:100%}}

.art__fig.is-live #gd-core{transform-box:fill-box;transform-origin:center;
  animation:gdSway 18s ease-in-out infinite alternate}
@keyframes gdSway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.art__fig.is-live #gd-map{transform-box:fill-box;transform-origin:center;
  animation:gdDrift 120s linear infinite}
@keyframes gdDrift{to{transform:rotate(360deg)}}
.art__fig.is-live .gd-lab{opacity:0;animation:trFade .9s ease forwards}
.art__fig.is-live .gd-lab:nth-of-type(1){animation-delay:.4s}
.art__fig.is-live .gd-lab:nth-of-type(2){animation-delay:.7s}
.art__fig.is-live .gd-lab:nth-of-type(3){animation-delay:1s}
.art__fig.is-live .gd-lab:nth-of-type(4){animation-delay:1.3s}
.art__fig.is-live #gd-price{stroke-dasharray:1100;stroke-dashoffset:1100;
  animation:trDraw 3.2s .6s cubic-bezier(.4,0,.3,1) forwards}

/* ---- paused when scrolled away, and with motion off nothing animates ---- */
.art__fig.is-paused *{animation-play-state:paused !important}
html[data-motion="off"] .art__fig *{animation:none !important;
  opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important}
html[data-motion="off"] .cx-block .cx-role{opacity:1 !important}


/* Six questions: numbering, equal heights and a restrained sequential reveal.
   Card dimensions, palette and typography system are unchanged. */
.qcard{display:flex;flex-direction:column;height:100%;padding:clamp(28px,2.6vw,36px)}
.qcard__n{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  color:var(--yellow-deep);display:block;margin-bottom:12px}
.qcard h3{font-size:22px;color:var(--ink)}
.qcards > .qcard{opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
             box-shadow .45s var(--ease),border-color .45s var(--ease)}
.qcards.in > .qcard,[data-stagger].in > .qcard{opacity:1;transform:none}
.qcards.in > .qcard:nth-child(1){transition-delay:.05s}
.qcards.in > .qcard:nth-child(2){transition-delay:.17s}
.qcards.in > .qcard:nth-child(3){transition-delay:.29s}
.qcards.in > .qcard:nth-child(4){transition-delay:.41s}
.qcards.in > .qcard:nth-child(5){transition-delay:.53s}
.qcards.in > .qcard:nth-child(6){transition-delay:.65s}
.qcards.in > .qcard{box-shadow:0 0 0 rgba(245,194,66,0)}
.qcards.in > .qcard{animation:qGlow 1.6s var(--ease) both}
.qcards.in > .qcard:nth-child(2){animation-delay:.17s}
.qcards.in > .qcard:nth-child(3){animation-delay:.29s}
.qcards.in > .qcard:nth-child(4){animation-delay:.41s}
.qcards.in > .qcard:nth-child(5){animation-delay:.53s}
.qcards.in > .qcard:nth-child(6){animation-delay:.65s}
@keyframes qGlow{
  0%{box-shadow:0 0 0 rgba(245,194,66,0)}
  45%{box-shadow:0 6px 26px rgba(245,194,66,.28)}
  100%{box-shadow:0 2px 10px rgba(13,29,51,.06)}
}
.qcard:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,29,51,.12)}

.qpull{max-width:44rem;margin:clamp(30px,3.4vw,46px) auto 0;padding-left:24px;
  border-left:2px solid var(--yellow-deep)}
.qpull p{font-family:var(--head);font-style:italic;font-size:clamp(20px,2vw,26px);
  line-height:1.42;color:var(--ink);margin:0}

@media (max-width:640px){.qcards{grid-template-columns:1fr}}

html[data-motion="off"] .qcards > .qcard{opacity:1;transform:none;animation:none;transition:none}



/* The library cards read as clickable: the whole card lifts, the title
   shifts to the brand colour and the arrow moves. */
.artcard{cursor:pointer;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.artcard:hover,.artcard:focus-within{transform:translateY(-4px);box-shadow:0 16px 36px rgba(13,29,51,.14)}
.artcard:hover h3{color:var(--yellow-deep)}
.artcard h3{transition:color .35s var(--ease)}
.artcard .btn--outline{border-color:rgba(132,97,13,.45);color:var(--yellow-deep)}
.artcard:hover .btn--outline{border-color:var(--yellow-deep);background:rgba(245,194,66,.12)}
.artcard .art__arrow{display:inline-block;margin-left:8px;transition:transform .35s var(--ease)}
.artcard:hover .art__arrow{transform:translateX(4px)}



/* ==================================================================
   THE EXPLAINER SEQUENCE
   Three connected cards, each with its own visual identity, using the
   existing card, type and motion system.
   ================================================================== */
.seqpath{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:center;
  margin:0 0 clamp(24px,3vw,38px);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--light-soft)}
.seqpath i{color:var(--yellow);font-style:normal}
.section--light .seqpath{color:var(--ink-soft)}

.seqcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);align-items:stretch}
.seqcard{display:flex;flex-direction:column;height:100%;cursor:pointer;overflow:hidden;
  background:var(--navy-soft);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.seqcard:hover,.seqcard:focus-within{transform:translateY(-4px);border-color:rgba(245,194,66,.5);
  box-shadow:0 18px 40px rgba(9,22,40,.4)}
.seqcard__top{display:flex;align-items:baseline;gap:12px;padding:20px 24px 0}
.seqcard__n{font-family:var(--head);font-size:30px;font-weight:500;color:var(--yellow);line-height:1}
.seqcard__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--light-soft)}

/* each card carries its own mark, so the three are connected but not identical */
.seqcard__art{height:96px;margin:16px 24px 0;border-radius:10px;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#1B3B63,#10233D 70%)}
.seqcard__art::before,.seqcard__art::after{content:"";position:absolute}
.seq--gold .seqcard__art::before{width:54px;height:54px;border-radius:50%;top:21px;left:40px;
  background:linear-gradient(150deg,#FFD24A,#D9A62F)}
.seq--gold .seqcard__art::after{left:118px;top:26px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(244,242,236,.35)}
.seq--exposure .seqcard__art::before{left:40px;top:30px;width:150px;height:10px;border-radius:5px;
  background:rgba(244,242,236,.22)}
.seq--exposure .seqcard__art::after{left:40px;top:52px;width:104px;height:10px;border-radius:5px;
  background:var(--yellow)}
.seq--account .seqcard__art::before{left:36px;top:26px;right:36px;height:1px;background:rgba(244,242,236,.22);
  box-shadow:0 16px 0 rgba(244,242,236,.16),0 32px 0 rgba(244,242,236,.10)}
.seq--account .seqcard__art::after{left:36px;top:24px;width:52px;height:5px;border-radius:3px;background:var(--yellow)}

.seqcard__body{display:flex;flex-direction:column;flex:1;padding:20px 24px 26px}
.seqcard__cat{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);display:block;margin-bottom:10px}
.seqcard__body h3{font-family:var(--head);font-weight:500;font-size:22px;line-height:1.22;
  color:var(--light);margin-bottom:8px;transition:color .35s var(--ease)}
.seqcard:hover .seqcard__body h3{color:var(--yellow)}
.seqcard__sub{font-size:13.5px;line-height:1.5;color:var(--light-soft);opacity:.85;margin-bottom:12px}
.seqcard__body > p{font-size:14.5px;line-height:1.68;color:var(--light-soft);margin-bottom:14px}
.seqcard__read{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--light-soft);
  opacity:.7;margin-top:auto;margin-bottom:16px}
.seqcard .btn{align-self:flex-start}
.seqcard:hover .art__arrow{transform:translateX(4px)}


.seqcards{grid-template-columns:repeat(2,1fr)}
@media (min-width:1180px){.seqcards{grid-template-columns:repeat(4,1fr)}}
.seqcard[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
.seqcard__soon{opacity:.7;cursor:default}
.seq--metrics .seqcard__art::before{left:40px;top:60px;width:22px;height:24px;border-radius:3px;background:var(--yellow)}
.seq--metrics .seqcard__art::after{left:70px;top:34px;width:22px;height:50px;border-radius:3px;background:rgba(244,242,236,.22);
  box-shadow:30px 16px 0 rgba(244,242,236,.16),60px -6px 0 rgba(245,194,66,.5)}
@media (max-width:960px){.seqcards{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}

/* ---------- callout panels inside the articles ---------- */
.callout{background:var(--navy-soft);border-left:3px solid var(--yellow);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:clamp(24px,2.6vw,34px) 0}
.callout p{font-size:15.5px;line-height:1.72;color:var(--light-soft);margin:0 0 .7em}
.callout p:last-child{margin-bottom:0}
.callout .cal__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:8px}
.art__body code{font-family:var(--mono);font-size:.92em;color:var(--light)}

/* ---------- previous / next navigation ---------- */
.artnav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);
  max-width:52rem;margin:clamp(34px,4vw,54px) auto 0}
.artnav__i{display:block;background:var(--navy-soft);border-radius:var(--r);padding:20px 22px;
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.artnav__i:hover{border-color:rgba(245,194,66,.5);transform:translateY(-3px)}
.artnav__i span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);display:block;margin-bottom:7px}
.artnav__i h4{font-family:var(--head);font-weight:500;font-size:17px;line-height:1.26;color:var(--light)}
.artnav__i--soon{opacity:.45;pointer-events:none}
.artnav__i--soon span{color:var(--light-soft)}
@media (max-width:760px){.artnav{grid-template-columns:1fr}}

.artback{text-align:center;margin-top:clamp(24px,3vw,36px)}
.artback a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--light-soft);
  transition:color .3s var(--ease)}
.artback a:hover{color:var(--yellow)}


.detail__hours{display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;
  line-height:1.65;letter-spacing:.04em;color:var(--light-soft);opacity:.85}
.detail a{color:var(--yellow);border-bottom:1px solid rgba(245,194,66,.32);
  transition:border-color .3s var(--ease)}
.detail a:hover{border-color:var(--yellow)}


/* Client reviews: equal weight, generous spacing, no decoration beyond the mark */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);align-items:stretch}
.tcard{display:flex;flex-direction:column;height:100%;margin:0;background:var(--white);
  border-radius:var(--r);padding:clamp(30px,3vw,42px) clamp(26px,2.6vw,36px);
  border-top:2px solid var(--yellow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(13,29,51,.12)}
.tcard__mark{font-family:var(--head);font-size:54px;line-height:.6;color:var(--yellow);
  display:block;margin-bottom:14px}
.tcard blockquote{margin:0;flex:1}
.tcard blockquote p{font-family:var(--head);font-size:clamp(17px,1.5vw,20px);line-height:1.55;
  color:var(--ink);margin:0}
.tcard figcaption{margin-top:24px;padding-top:18px;border-top:1px solid rgba(13,29,51,.10);
  font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ink)}
.tnote{max-width:64rem;margin:clamp(26px,3vw,40px) auto 0;text-align:center;
  font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
@media (max-width:900px){.tcards{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}

/* ---------- Scroll progress bar ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:transparent;pointer-events:none}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--yellow-lift));transition:width .1s linear}

/* ---------- Motion: reveal on scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(52px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}

/* Directional variants, so split rows arrive from the side they sit on */
.js [data-reveal="left"]{transform:translateX(-70px)}
.js [data-reveal="right"]{transform:translateX(70px)}
.js [data-reveal="scale"]{transform:scale(.9)}
.js [data-reveal].in{transform:none}

/* Photographs wipe open rather than just fading */
.js [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.js [data-reveal="wipe"].in{clip-path:inset(0 0 0 0)}

/* Headings lift line by line */
.rise{display:block;overflow:hidden}
.js .rise > span{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.js .in .rise > span,.js .rise.in > span{transform:none}
.rise:nth-child(2) > span{transition-delay:.08s}

/* Yellow buttons catch a light sweep on hover */
.btn--yellow{position:relative;overflow:hidden}
.btn--yellow::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn--yellow:hover::after{left:130%}

/* Hero content drifts slightly slower than the page */
.hero__inner{will-change:transform}
.js [data-stagger] > *{opacity:0;transform:translateY(48px) scale(.97);filter:blur(5px);transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.js [data-stagger].in > *{opacity:1;transform:none;filter:none}
[data-stagger].in > *:nth-child(1){transition-delay:.05s}
[data-stagger].in > *:nth-child(2){transition-delay:.14s}
[data-stagger].in > *:nth-child(3){transition-delay:.23s}
[data-stagger].in > *:nth-child(4){transition-delay:.32s}
[data-stagger].in > *:nth-child(5){transition-delay:.41s}
[data-stagger].in > *:nth-child(6){transition-delay:.50s}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pillars,.steps{grid-template-columns:repeat(2,1fr)}
  .reasons{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .fbrand{grid-column:1/-1}
}
@media (max-width:1180px){
  .burger{display:flex;order:3}
  .nav__cta{display:none}
  .nav__links{
    position:fixed;inset:132px 0 auto 0;flex-direction:column;gap:0;margin:0;
    background:var(--navy-deep);padding:10px var(--gutter) 30px;
    border-top:1px solid rgba(255,255,255,.1);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease);
    max-height:calc(100vh - 136px);overflow-y:auto;
  }
  .nav__links.open{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:17px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__links a::after{display:none}
  .video,.cards--3,.cards--2,.registry,.split,.contact{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .quote{flex-basis:100%;margin-right:0}
  .cta__box{flex-direction:column;align-items:flex-start}
}
@media (max-width:680px){
  .pillars,.steps,.reasons,.team,.fgrid,.two{grid-template-columns:1fr}
  .hero__actions .btn{flex:1 1 100%}
  .partner{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ==================================================================
   MOTION OFF
   Applied when the visitor's system asks for reduced motion, or when
   they press the Motion button. One block, at the end of the sheet,
   so it can only ever switch animation off and never affect layout.
   ================================================================== */
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation:none !important;
  transition-duration:.001ms !important;
}
html[data-motion="off"] [data-reveal],
html[data-motion="off"] [data-stagger] > *{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
}
html[data-motion="off"] .hero [data-seq]{opacity:1 !important;transform:none !important}
html[data-motion="off"] .rise > span{transform:none !important}
html[data-motion="off"] .progress{display:none}
html[data-motion="off"] .pulse-rule{transform:none}

/* ---- Keyframes restored ---- */
@keyframes heroZoom{from{transform:scale(1.03) translate3d(-0.6%,0,0)}to{transform:scale(1.03) translate3d(0.6%,0,0)}}
@keyframes pagein{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes seqIn{to{opacity:1;transform:none}}
@keyframes sun{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
@keyframes hz{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
@keyframes windows{0%,100%{opacity:.42}50%{opacity:.56}}
@keyframes beacon{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.8;transform:scale(1.06)}}
@keyframes ripple{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:.85}}
@keyframes fly{0%{transform:translate(0,0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translate(112vw,-5vh);opacity:0}}

/* ==================================================================
   LEGAL PAGES
   A single reading column, generous leading and clear numbered
   headings. Same type, colour and spacing system as the articles.
   ================================================================== */
.legal{padding-bottom:clamp(40px,5vw,72px)}
.legal__head{max-width:46rem;margin:0 auto clamp(28px,3.2vw,44px)}
.legal__eff{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--light-soft);opacity:.8}
.legal__body{max-width:40rem;margin:0 auto}
.legal__body h2{font-family:var(--head);font-weight:500;font-size:clamp(21px,2vw,26px);
  line-height:1.24;color:var(--light);margin:clamp(30px,3.2vw,44px) 0 12px;
  padding-top:clamp(24px,2.6vw,32px);border-top:1px solid rgba(245,194,66,.18)}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body h3{font-family:var(--head);font-weight:500;font-size:18.5px;margin:24px 0 8px;color:var(--light)}
.legal__body p{font-size:15.5px;line-height:1.78;color:var(--light-soft);margin-bottom:1.05em}
.legal__body ul,.legal__body ol{margin:0 0 1.3em;padding-left:0}
.legal__body li{position:relative;padding-left:24px;font-size:15px;line-height:1.72;
  color:var(--light-soft);margin-bottom:.55em}
.legal__body ul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--yellow)}
.legal__body ol{counter-reset:ln}
.legal__body ol li{counter-increment:ln;padding-left:30px}
.legal__body ol li::before{content:counter(ln) ".";position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:12px;color:var(--yellow)}
.legal__body strong{color:var(--light);font-weight:600}
.legal__body a{color:var(--yellow);border-bottom:1px solid rgba(245,194,66,.3)}
.legal__body table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:14.5px}
.legal__body th,.legal__body td{text-align:left;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);color:var(--light-soft);vertical-align:top}
.legal__body th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--yellow)}

.legal__nav{max-width:40rem;margin:clamp(34px,4vw,56px) auto 0;padding-top:clamp(26px,3vw,36px);
  border-top:1px solid rgba(245,194,66,.18)}
.legal__links{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:14px}
.legal__links a{font-family:var(--body);font-size:13.5px;color:var(--light-soft);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:9px 16px;
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.legal__links a:hover{border-color:var(--yellow);color:var(--yellow)}

/* ==================================================================
   TRANSLATION
   The GTranslate widget renders its own switcher; it is taken out of
   the layout but left in the accessibility tree's flow so the engine
   still initialises. Google's toolbar and tooltips are suppressed so
   they cannot push the fixed header down.
   ================================================================== */
.gtranslate_wrapper{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
iframe.skiptranslate,.goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt{display:none !important}
body{top:0 !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}

/* Machine-translation notice, shown only while a translation is active */
.mtnote{background:var(--navy-soft);border-bottom:1px solid rgba(245,194,66,.28)}
.mtnote p{margin:0;padding:11px 0;font-size:13px;line-height:1.6;color:var(--light-soft)}
.mtnote p::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--yellow);margin-inline-end:10px;vertical-align:middle}

/* ---------- Right to left (Arabic) ---------- */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .nav__inner,
html[dir="rtl"] .nav__actions,
html[dir="rtl"] .filmband__grid,
html[dir="rtl"] .cta__box{flex-direction:row-reverse}
html[dir="rtl"] .lang__menu{right:auto;left:0}
html[dir="rtl"] .lang__menu button{text-align:right}
html[dir="rtl"] .section-head--center{text-align:center}
html[dir="rtl"] .art__body,html[dir="rtl"] .legal__body,
html[dir="rtl"] .art__head,html[dir="rtl"] .legal__head{text-align:right}
html[dir="rtl"] .art__body li,html[dir="rtl"] .legal__body li,
html[dir="rtl"] .speclist li,html[dir="rtl"] .checklist li{padding-left:0;padding-right:24px}
html[dir="rtl"] .art__body li::before,html[dir="rtl"] .legal__body li::before,
html[dir="rtl"] .speclist li::before,html[dir="rtl"] .checklist li::before{left:auto;right:0}
html[dir="rtl"] .art__body ol li,html[dir="rtl"] .legal__body ol li{padding-right:32px}
html[dir="rtl"] .pullq{border-left:0;border-right:2px solid var(--yellow);
  padding-left:0;padding-right:26px}
html[dir="rtl"] .art__disc{border-left:0;border-right:3px solid var(--yellow);
  border-radius:var(--r) 0 0 var(--r)}
html[dir="rtl"] .legal__body th,html[dir="rtl"] .legal__body td{text-align:right}
html[dir="rtl"] .feat{border-right:0;border-left:1px solid rgba(255,255,255,.14)}
html[dir="rtl"] .feat:last-child{border-left:0}
html[dir="rtl"] .section--light .feat{border-left-color:rgba(18,32,57,.16)}
html[dir="rtl"] .filmreplay{right:auto;left:clamp(16px,2.4vw,28px)}
html[dir="rtl"] .findus figcaption{text-align:right}
/* Figures, tickers, codes and addresses stay left to right */
html[dir="rtl"] .ticker,html[dir="rtl"] .ticker__track,
html[dir="rtl"] .flic,html[dir="rtl"] .fcopy,
html[dir="rtl"] .trade__row,html[dir="rtl"] .booking__hours dd{direction:ltr;text-align:left}

/* ==================================================================
   LONG-FORM BANDS
   Articles and legal pages used to be a single navy block, which made
   them read flatter than the rest of the site. They now run
   navy header -> ivory reading band -> navy close, so the body text
   sits on the same ivory the other pages alternate into.
   ================================================================== */
.art--open,.legal--open{padding-bottom:clamp(34px,4vw,58px)}
.art--read,.legal--read{padding-block:clamp(48px,5.4vw,84px)}
.art--close,.legal--close{padding-top:clamp(40px,4.4vw,66px)}
.art--read .art__body,.legal--read .legal__body{margin-top:0}
.art--read .art__body h2:first-child,
.legal--read .legal__body h2:first-child{margin-top:0}

/* --- article body on ivory --- */
.section--light .art__body h2,
.section--light .art__body h3,
.section--light .art__body strong{color:var(--ink)}
.section--light .art__body p,
.section--light .art__body li{color:var(--ink-soft)}
.section--light .art__body ul li::before{background:var(--yellow-deep)}
.section--light .art__body ol li::before{color:var(--yellow-deep)}
.section--light .art__body a{color:var(--yellow-deep);border-bottom-color:rgba(132,97,13,.35)}

.section--light .pullq{border-left-color:var(--yellow-deep)}
.section--light .pullq p{color:var(--ink)}
.section--light .checklist{background:var(--white);border:1px solid rgba(18,32,57,.1)}
.section--light .checklist h3{color:var(--ink)}
.section--light .checklist li{color:var(--ink-soft)}
.section--light .checklist li::before{background:var(--yellow-deep)}
.section--light .art__disc{background:var(--white);border-left-color:var(--yellow-deep)}
.section--light .art__disc p{color:var(--ink-soft)}

/* --- legal body on ivory --- */
.section--light .legal__body h2,
.section--light .legal__body h3,
.section--light .legal__body strong{color:var(--ink)}
.section--light .legal__body h2{border-top-color:rgba(18,32,57,.14)}
.section--light .legal__body p,
.section--light .legal__body li{color:var(--ink-soft)}
.section--light .legal__body ul li::before{background:var(--yellow-deep)}
.section--light .legal__body ol li::before{color:var(--yellow-deep)}
.section--light .legal__body a{color:var(--yellow-deep);border-bottom-color:rgba(132,97,13,.35)}
.section--light .legal__body th{color:var(--yellow-deep)}
.section--light .legal__body th,
.section--light .legal__body td{border-bottom-color:rgba(18,32,57,.12);color:var(--ink-soft)}


/* Form result messages. Success appears only when Web3Forms confirms. */
.formmsg{margin-top:16px;padding:14px 18px;border-radius:10px;font-size:14.5px;line-height:1.6}
.formmsg--ok{background:rgba(95,207,155,.14);border:1px solid rgba(95,207,155,.45);color:#BFEBD6}
.formmsg--err{background:rgba(240,138,138,.12);border:1px solid rgba(240,138,138,.45);color:#F3C9C9}
.rmodal .formmsg--ok{background:rgba(21,92,61,.10);border-color:rgba(21,92,61,.35);color:#155C3D}
.rmodal .formmsg--err{background:rgba(179,38,30,.08);border-color:rgba(179,38,30,.35);color:#B3261E}
.hp{position:absolute!important;left:-9999px!important}
.field [aria-invalid="true"]{border-color:#F08A8A}
button[disabled]{opacity:.6;cursor:progress}

/* ---------- Contact: the office photograph and the map ---------- */
.findus{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,30px)}
.findus figure{margin:0}
.findus__photo,.findus__map{border-radius:var(--r);overflow:hidden;background:var(--navy-soft)}
.findus__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.findus__map iframe{display:block;width:100%;aspect-ratio:4/3;border:0}
.findus figcaption{padding:14px 18px;background:var(--white);font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
.findus figcaption a{color:var(--yellow-deep);border-bottom:1px solid rgba(132,97,13,.35)}

/* ---------- Booking panel ----------
   The markup existed but had no styling, so the panel inherited nothing.
   The calendar frame keeps its own height; the fallback note sits on a
   raised navy panel like the other cards on navy. */
.booking{max-width:60rem;margin:0 auto}
/* Calendly sets its iframe to height:100%. A parent with only min-height
   gives a percentage height nothing to resolve against, so the iframe
   collapsed to the event header and the slot picker never appeared.
   The panel therefore carries a definite height. */
.booking__cal{height:720px;border-radius:var(--r);overflow:hidden;background:var(--navy-soft)}
.booking__cal iframe{display:block;width:100% !important;height:100% !important;border:0}
.booking__off{background:var(--navy-soft);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:clamp(26px,3vw,40px)}
.booking__note{font-size:15.5px;line-height:1.75;color:var(--light-soft);max-width:52ch;margin:0}
.booking__note a{color:var(--yellow);border-bottom:1px solid rgba(245,194,66,.35)}
.booking__hours{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px;
  margin:clamp(22px,2.6vw,32px) 0 0;padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(245,194,66,.18)}
.booking__hours dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:7px}
.booking__hours dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--light-soft)}
@media (max-width:680px){
  .booking__cal{height:1080px}
  .booking__hours{grid-template-columns:1fr}
}
/* if the photograph has not been added yet, the frame stays composed */
.findus__photo.is-empty::before{content:"Office photograph";display:grid;place-items:center;
  aspect-ratio:4/3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,242,236,.34);
  background:repeating-linear-gradient(135deg,#172A46,#172A46 12px,#16283f 12px,#16283f 24px)}
@media (max-width:820px){.findus{grid-template-columns:1fr}}