/* Harbour layers: pure sky, skyline-bound UX, original-resolution foreground, rounded content card. */
:root{
  --intro-height:100vh;
  --intro-scroll: 100vh;                         /* scrolling distance of the intro; the page (C) follows straight from the viewport bottom */
  --layer-w: max(100vw, 172vh);                  /* one width for both layers: full crop on 16:9, gently cropped on squarer screens */
  --city-start: 0vh;                             /* extra lift of B at rest (0 = B's bottom edge sits exactly on the viewport bottom) */
  --word-start: -18vh;                           /* wordmark centre relative to the viewport centre (negative = higher) */
  --x-drop: 3vh;                               /* the X sits a little lower than the U (its feet have more room) */
  --ux-blue:#1060ff;
}
.intro-wrap{position:relative;height:calc(var(--intro-height) + var(--intro-scroll));z-index:0}
.intro-stage{position:sticky;top:0;height:var(--intro-height);overflow:hidden;isolation:isolate;
  background:#9bcddd}
.intro-layer{position:absolute;top:0;left:calc((100vw - var(--layer-w)) / 2);width:var(--layer-w);will-change:transform;pointer-events:none}
.intro-layer img{width:100%;height:auto;display:block;user-select:none}
.intro-sky{z-index:1}
.intro-word{z-index:2;position:absolute;left:0;right:0;top:var(--word-start);height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;will-change:transform,opacity;pointer-events:none}
.intro-word .ux{display:flex;align-items:flex-start;font-family:Poppins,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:clamp(140px,26vw,460px);line-height:.85;letter-spacing:-.03em;color:var(--ux-blue);text-shadow:0 20px 60px rgba(4,30,80,.18)}
.intro-word .ux .x{transform:translateY(var(--x-drop))}
.intro-word .ux-sub{order:-1;margin-bottom:1vh;font-size:clamp(12px,1.05vw,16px);letter-spacing:.34em;font-weight:600;color:#fff;text-shadow:0 2px 14px rgba(10,40,90,.35)}
.intro-city{z-index:3}
.intro-cue{position:absolute;z-index:4;left:50%;bottom:3.5vh;transform:translateX(-50%);color:#fff;font-size:11px;letter-spacing:.24em;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.9;transition:opacity .3s;text-shadow:0 1px 8px rgba(0,20,50,.6)}
.intro-cue i{display:block;width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
html.intro-active .intro-cue.is-hidden{opacity:0}

/* C: the existing page is lifted over the pinned stage */
body.has-intro main,body.has-intro .footer{position:relative;z-index:2}
body.has-intro main{margin-top:calc(-1 * var(--intro-scroll));background:#fff;border-radius:56px 56px 0 0;overflow:clip;box-shadow:0 -12px 40px rgba(11,36,62,.08)}
/* the original top banner is removed: the journey now opens the page, so leave room for the fixed header */
body.has-intro .journey{padding-top:calc(var(--header) + 34px)}
body.has-intro .journey-rule{top:calc(var(--header) + 110px)}
/* the fixed header stays visible throughout, including over the intro */

@media(max-width:760px){
  :root{--intro-height:min(100svh,calc(var(--header) + 125vw));--intro-scroll:var(--intro-height)}
  body.has-intro main{border-radius:28px 28px 0 0}
  :root{--layer-w:max(100vw, 151vh);--city-start:0vh;--word-start:-18vh;--x-drop:3vh}
  .intro-word .ux{font-size:clamp(120px,40vw,240px)}
  .intro-word .ux-sub{font-size:10px;letter-spacing:.26em}
}
@media(prefers-reduced-motion:reduce){
  .intro-cue i{animation:none}
}

/* Skyline-bound typography. SVG text uses measured font baselines at every size. */
.intro-sky{inset:0;width:100%;height:110%;left:0}
.intro-sky picture,.intro-sky img{width:100%;height:100%;display:block;object-fit:cover}
.intro-word{inset:0;height:100%;display:block}
.intro-word .ux{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block;fill:var(--ux-blue);letter-spacing:0;text-shadow:none}
.intro-word .ux .x{transform:none}
.intro-word .ux{will-change:transform}
.intro-word .ux-sub{position:absolute;white-space:nowrap;transform:translateX(-50%);margin:0;font-size:clamp(9px,1vw,15px);letter-spacing:.24em}

/* Responsive harbour photo; portrait phones receive a separate focal crop. */
:root{--intro-height:100svh;--intro-scroll:0px}
.intro-wrap{height:var(--intro-height)}
.intro-stage{position:relative;height:100%;background:#1b212d}
.intro-picture{position:absolute;inset:var(--header) 0 0;display:block;overflow:hidden}
.intro-image{display:block;width:100%;height:100%;object-fit:cover;object-position:54% 100%}
.intro-shade{position:absolute;inset:var(--header) 0 0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#1b212d45,transparent 65%,#1b212d70)}
@media(max-width:760px) and (orientation:portrait){.intro-image{object-position:50% 100%}}
@media(min-aspect-ratio:2/1){.intro-image{object-position:54% 50%}}
.intro-word{z-index:2;will-change:auto}
.intro-word .ux-sub{left:50%;top:calc(var(--header) + 22px)}
.intro-cue{bottom:28px;font-size:12px;white-space:nowrap}
.intro-services {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--header) + 64px);
  transform: translateX(-50%);
  display: grid;
  gap: 12px;
  width: min(320px,calc(100% - 40px));
  margin: 0;
  padding: 20px 24px;
  list-style: none;
  color: #fff;
  font-size: clamp(20px,1.7vw,26px);
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 2px #000e,0 2px 6px #000b,0 4px 14px #0008;
  isolation: isolate;
}
.intro-services li {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
}
.intro-services a,
.intro-services li>span {
  --service-tracking: 0em;
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-width: 0;
  padding-block: 5px;
  /* Balance the trailing letter space so the visible text stays centred. */
  padding-inline-start: var(--service-tracking);
  color: inherit;
  font-weight: 700;
  letter-spacing: var(--service-tracking);
  white-space: nowrap;
  opacity: .85;
  transition: letter-spacing .5s cubic-bezier(.22,1,.36,1),
    padding-inline-start .5s cubic-bezier(.22,1,.36,1),
    font-weight .5s cubic-bezier(.22,1,.36,1),
    opacity .5s cubic-bezier(.22,1,.36,1);
}
.intro-services a{border-radius:3px;text-decoration:none}
.intro-services li:hover>a,
.intro-services li:hover>span,
.intro-services a:focus-visible {
  --service-tracking: .35em;
  font-weight: 800;
  opacity: 1;
}
@media(max-width:760px) {
  .intro-services {
    top: calc(var(--header) + 58px);
    gap: 8px;
    padding: 16px 20px;
    font-size: 20px;
  }
}
@media(max-height:540px) {
  .intro-services {
    top: calc(var(--header) + 52px);
    gap: 0;
    padding: 8px 20px;
    font-size: 16px;
    line-height: 1.4;
  }
  .intro-services a,.intro-services li>span{padding-block:3px}
  .intro-cue{bottom:14px}
}
@media(max-height:400px) {
  .intro-services{padding-block:6px}
  .intro-services a,.intro-services li>span{padding-block:2px}
  .intro-cue i{display:none}
}
@media(hover:none) {
  .intro-services a,.intro-services li>span{opacity:1}
}
@media(prefers-reduced-motion:reduce){.intro-services a,.intro-services li>span{transition:none}}
.app-coming-soon{display:inline-flex;align-items:center;justify-content:center;margin-top:28px;min-height:48px;padding:12px 22px;border:1px solid #e4e4e4;border-radius:999px;background:#f7f8fa;color:#697485;font-size:15px;font-weight:700;line-height:1.3}
/* Contact information: aligned columns without the removed promotional heading. */
#contact .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,7vw,100px);align-items:start;padding:36px 0;border-top:1px solid #cddff6}
#contact .contact-intro>p{margin:0 0 24px;font-size:16px;line-height:1.9}
#contact .contact-phone{margin-top:0;font-size:clamp(25px,2.7vw,38px);letter-spacing:-.02em;gap:18px;white-space:nowrap}
#contact .contact-details{margin:0}
#contact .contact-details>div{grid-template-columns:70px minmax(0,1fr);gap:20px;padding-block:22px}
#contact .contact-details>div:first-child{padding-top:0}
@media(max-width:760px){#contact .contact-grid{grid-template-columns:1fr;gap:32px;padding:26px 0}#contact .contact-intro>p{font-size:14px;margin-bottom:16px}#contact .contact-details>div{grid-template-columns:58px minmax(0,1fr);gap:16px}}
:is(.header,.app-content) .securities-cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:8px 12px 8px 22px;border:1px solid #cddff6;border-radius:18px;background:#edf3fe;color:#274674;font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;transition:background .25s,box-shadow .25s}
:is(.header,.app-content) .securities-cta:hover,:is(.header,.app-content) .securities-cta:focus-visible{background:linear-gradient(110deg,#d5edff,#e4eeff);box-shadow:0 12px 28px #5787ce1c}
:is(.header,.app-content) .securities-cta-arrow{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid #9fbae6;border-radius:50%;color:#5479c6;position:relative;isolation:isolate;overflow:hidden;transition:color .25s}
:is(.header,.app-content) .securities-cta-arrow::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(120deg,#427be0,#6a59d5);transform:scale(0);transition:transform .3s ease}
:is(.header,.app-content) .securities-cta-arrow svg{width:18px;height:18px;transition:transform .3s ease}
:is(.header,.app-content) .securities-cta:is(:hover,:focus-visible) .securities-cta-arrow{color:#fff}
:is(.header,.app-content) .securities-cta:is(:hover,:focus-visible) .securities-cta-arrow::before{transform:scale(1)}
:is(.header,.app-content) .securities-cta:is(:hover,:focus-visible) .securities-cta-arrow svg{transform:rotate(45deg)}
@media(max-width:760px){.header{gap:12px}.header .securities-cta{font-size:11px;padding:11px 12px;gap:6px}.header .securities-cta span{font-size:16px}.header .brand{min-width:0;flex-shrink:1}.header .brand small{white-space:normal;max-width:135px}.intro-word .ux-sub{font-size:9px;letter-spacing:.16em}}
@media(max-width:760px){.header .brand>span{display:none}.header .securities-cta{padding:6px 8px 6px 12px;border-radius:14px}.header .securities-cta-arrow{width:32px;height:32px;flex-basis:32px}.header .securities-cta-arrow svg{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){:is(.header,.app-content) .securities-cta,:is(.header,.app-content) .securities-cta-arrow,:is(.header,.app-content) .securities-cta-arrow::before,:is(.header,.app-content) .securities-cta-arrow svg{transition:none}}

/* Header capsule: rotating blue light around a solid, readable centre. */
@property --ang {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@keyframes securities-border-spin {
  to { --ang: 360deg; }
}
.header .securities-cta,
.header .securities-cta:is(:hover,:focus-visible) {
  --ang: 0deg;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  gap: 0;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: conic-gradient(from var(--ang),var(--blue),#2ba8f7,#cadcff,#fff,#cadcff,var(--blue));
  color: var(--ink);
  box-shadow: none;
  animation: securities-border-spin 3s linear infinite;
}
.header .securities-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  filter: blur(8px);
  opacity: .45;
  pointer-events: none;
  transition: opacity .25s;
}
.header .securities-cta .securities-cta-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 12px 8px 22px;
  border-radius: inherit;
  background: #edf3fe;
  font-size: inherit;
}
.header .securities-cta:is(:hover,:focus-visible) {
  animation-duration: 1.2s;
}
.header .securities-cta:is(:hover,:focus-visible)::before {
  opacity: .7;
}
.header .securities-cta .securities-cta-arrow {
  border-color: #cadcff;
  color: var(--blue);
}
.header .securities-cta .securities-cta-arrow::before {
  background: linear-gradient(120deg,var(--blue),#2ba8f7);
}
.header .securities-cta:is(:hover,:focus-visible) .securities-cta-arrow {
  color: #fff;
}
@media(max-width:760px) {
  .header .securities-cta .securities-cta-inner {
    gap: 6px;
    padding: 6px 8px 6px 12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .header .securities-cta,
  .header .securities-cta:is(:hover,:focus-visible) {
    animation: none;
  }
  .header .securities-cta::before {
    transition: none;
  }
}