/* Version 11: transparent drawings on continuous section backgrounds.
   When a picture and its headline no longer fit beside each other,
   the picture leads the section. The approved typography is retained. */
:root{--page-gutter:max(clamp(20px,5vw,88px),env(safe-area-inset-left),env(safe-area-inset-right));--content-limit:1360px;--header-height:92px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.wrap{width:min(calc(100% - 2 * var(--page-gutter)),var(--content-limit));max-width:none;padding-inline:0}
.hdr,.hdr.light{padding-inline:max(var(--page-gutter),calc((100% - var(--content-limit)) / 2))}
.hero{padding:150px 0 42px;flex-direction:column;gap:64px;background:radial-gradient(ellipse at 72% 38%,#123651 0%,#0b243b 36%,#07182a 74%)}
.hero__inner{width:min(calc(100% - 2 * var(--page-gutter)),var(--content-limit));max-width:none;padding:0;margin-inline:auto;z-index:2}
.hero-visual{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.hero-visual .hero-scene{position:absolute;inset:0;z-index:0;width:100%;max-width:none;height:100%;transform:none;object-fit:cover;object-position:58% center;mask-image:none}
.hero::after{z-index:1;pointer-events:none;background:linear-gradient(90deg,#07182af0 0%,#07182aa6 28%,#07182a00 65%),linear-gradient(0deg,#07182a 0%,#07182a00 25%)}
.hero .pillars{z-index:2;flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;width:min(calc(100% - 2 * var(--page-gutter)),var(--content-limit));margin:0 auto;padding:0;background:transparent}
.hero .pillars>.pillar{padding:0;border:0;background:transparent}
.hero .pillar h3 a{border-bottom:0}
.ftr{padding-inline:max(var(--page-gutter),calc((100% - var(--content-limit)) / 2))}
.ftr__grid,.ftr__reg,.disc{max-width:none}
.document-nav{right:0}
.documents-page .top p:not(.crumb){max-width:calc(69% - 40px)}
.documents-page .act h3{max-width:none}
.access-heading{max-width:1240px;margin-inline:auto;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
.desk-art{max-width:560px;justify-self:center}
.cell p,.am__cell p,.fin__cell p,.product p{max-width:55ch}

/* Keep the Wealth illustration and headline together in a centered spread.
   The section colours extend to the edges; neither content column stretches. */
#management{display:grid;grid-template-columns:minmax(var(--page-gutter),1fr) minmax(0,620px) minmax(0,740px) minmax(var(--page-gutter),1fr);align-items:stretch;background:#e6eaed}
#management>.management-art{grid-column:2;grid-row:1;position:relative;min-width:0;min-height:0;height:100%;background:transparent}
.management-art::before{display:none}
.management-art picture{position:absolute;inset:0;z-index:1;display:block;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 65%,transparent 100%)}
.management-art img{object-fit:contain}
#management>.wrap{grid-column:3;grid-row:1;width:100%;max-width:none;margin:0;padding:64px clamp(32px,4vw,60px)}

/* Three independent Wealth treatments. Only this section changes. */
.wealth-views{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 32px}
.wealth-views[hidden]{display:none}
.wealth-views button{font:500 12px/1.4 var(--font);color:var(--accent);background:transparent;border:1px solid #899aaa60;padding:10px 12px;min-height:40px;cursor:pointer}
.wealth-views button:hover,.wealth-views button:focus-visible{color:var(--ink);border-color:var(--accent)}
.wealth-views button[aria-pressed=true]{color:var(--ink);background:var(--accent-soft);border-color:var(--accent)}
html[data-wealth-view=navy] #management{background:radial-gradient(ellipse at 24% 46%,#14334c99 0%,#0e263b55 35%,#081b2f00 70%),#081b2f;color:var(--platinum-white)}
html[data-wealth-view=navy] #management .kicker{color:var(--silver-light)}
html[data-wealth-view=navy] #management .kicker::after{background:var(--silver-light)}
html[data-wealth-view=navy] #management h2 span{color:var(--silver-light)}
html[data-wealth-view=navy] #management .lede,
html[data-wealth-view=navy] #management .am__cell p{color:#b5c4cf}
html[data-wealth-view=navy] #management .am__cell{background:transparent;border:0;border-top:1px solid #ffffff28;box-shadow:none;padding-inline:0}
html[data-wealth-view=navy] #management .hint{color:#9cadbc}
html[data-wealth-view=navy] .wealth-views button{color:var(--silver-light);border-color:#a5b6c655}
html[data-wealth-view=navy] .wealth-views button:hover,
html[data-wealth-view=navy] .wealth-views button:focus-visible{color:#fff;border-color:var(--silver-light)}
html[data-wealth-view=navy] .wealth-views button[aria-pressed=true]{color:#10283e;background:var(--accent-soft);border-color:var(--accent-soft)}
html[data-wealth-view=light] #management,
html[data-wealth-view=light] #management>.management-art,
html[data-wealth-view=light] .management-art::before{background:var(--paper)}

.clients-heading{max-width:1360px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:32px}
.clients-copy{grid-column:1;grid-row:1;min-width:0}
.clients-visual{position:relative;grid-column:2;grid-row:1;display:block;width:100%;max-width:760px;aspect-ratio:900/480;justify-self:center}
.clients-visual .clients-art{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:contain;opacity:.95;mask-image:none}
#clients .panel__for{max-width:none;min-height:var(--client-intro-height,0px)}
/* Keep the complete client overview in view on laptop and desktop screens. */
@media(min-width:1060px){
  .clients-visual{max-height:clamp(180px,calc(100svh - var(--header-height) - var(--wp-adminbar-height,0px) - 450px),390px)}
  #clientTabs{margin-top:24px}
  #clients .panel__for{margin-block:18px}
  #clients .product{padding-block:18px}
  #clients .panel__cta{margin-top:20px}
}

/* Alternate the composition: a light frontier on the left, the start on the right. */
.onboarding-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:64px;max-width:1240px;margin-inline:auto}
.onboarding-frontier{width:min(100%,440px);aspect-ratio:640/650;margin:0;justify-self:center}
.onboarding-frontier img{display:block;width:100%;height:100%;object-fit:contain}
.onboarding-copy{min-width:0;text-align:right}
.onboarding-copy .kicker{justify-content:flex-end}

/* Contact details return to the left; the conversation form sits on the right. */
.contact{display:grid;max-width:1200px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:60px;row-gap:0;align-items:start}
.contact-intro{display:block;min-width:0}
.contact-heading{text-align:left}
.contact-heading .kicker{justify-content:flex-start}
.contact-heading h2{text-align:left}
.contact-heading .lede{margin-inline:0}
.contact-form{min-width:0}
.contact-form .enquiry-form{margin-top:0}
.hdr .nav.is-open{max-height:calc(100svh - 92px);overflow-y:auto;overscroll-behavior:contain}

/* Keep the scene and headline in place; give the expertise links their own
   breathing room below the horizon on the same uninterrupted blue canvas. */
@media(min-width:1060px){
  .hero{--hero-art-height:clamp(780px,calc(100svh - 60px),1000px);--hero-breathing-room:148px;height:calc(var(--hero-art-height) + var(--hero-breathing-room));min-height:0;max-height:none;gap:calc(64px + var(--hero-breathing-room))}
  .hero-visual{bottom:var(--hero-breathing-room);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - clamp(140px,20vh,240px)),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - clamp(140px,20vh,240px)),transparent 100%)}
  .hero .pillars{width:min(calc(100% - 2 * var(--page-gutter) - 64px),1120px)}
}
@media(min-width:1440px) and (orientation:landscape){
  .hero{--hero-art-height:max(780px,calc(100svh - 60px))}
}

/* Two readable columns need about 900 px inside the page gutters. */
@media(max-width:1059px){
  .documents-page .top p:not(.crumb){max-width:none}
  .access-heading{max-width:740px;grid-template-columns:minmax(0,1fr);gap:32px}
  .access-heading>.desk-art{grid-row:1;max-width:640px;justify-self:center}
  .access-heading>div{grid-row:2}
  #management{display:flex;flex-direction:column;align-items:stretch;background:#e6eaed}
  html[data-wealth-view=navy] #management{background:radial-gradient(ellipse 100% 55% at 50% 20%,#14334c99 0%,#0e263b55 35%,#081b2f00 82%),#081b2f}
  #management>.management-art{width:100%;height:auto;min-height:0;flex:none;padding-top:28px;background:transparent}
  .management-art::before{display:none}
  .management-art picture{position:relative;inset:auto;width:100%;max-width:640px;aspect-ratio:592/580;margin-inline:auto;mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 66%,transparent 100%)}
  .management-art img{object-fit:contain;object-position:center}
  #management>.wrap{width:min(calc(100% - 2 * var(--page-gutter)),740px);max-width:none;padding:48px 0;margin-inline:auto}
  .clients-heading{grid-template-columns:minmax(0,1fr);gap:28px}
  .clients-visual{grid-column:1;grid-row:1;width:calc(100% + 2 * var(--page-gutter));max-width:780px;aspect-ratio:685/446;justify-self:center}
  .clients-visual .clients-art{opacity:1}
  .clients-copy{grid-column:1;grid-row:2}
  .contact{max-width:740px;grid-template-columns:minmax(0,1fr);gap:40px}
  .onboarding-heading{max-width:740px;grid-template-columns:minmax(0,1fr);gap:28px}
  .onboarding-frontier{width:min(100%,440px)}
  .contact-heading{max-width:600px;margin-inline:0}
}

/* Preserve the accepted mobile hero: full chart first, then the headline. */
@media(max-width:1059px){
  .hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;max-height:none;padding:40px 0 48px;gap:0;background:radial-gradient(ellipse 100% 55% at 50% 23%,#123651 0%,#0b243b 36%,#07182a 82%)}
  .hero-visual{position:relative;inset:auto;width:100%;max-width:620px;height:auto;aspect-ratio:900/780;margin-inline:auto;margin-bottom:16px;flex:none}
  /* Only the peripheral diagram lines fade; there is no opaque image canvas. */
  .hero-visual .hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 92%,transparent);mask-composite:intersect}
  .hero-visual::after{display:none}
  .hero::after{display:none}
  .hero__inner{margin-inline:auto;padding:30px 0 0;width:min(calc(100% - 2 * var(--page-gutter)),740px);max-width:none}
  .hero h1{font-size:clamp(40px,7vw,60px);max-width:none}
  .hero .eyebrow{max-width:none}
  .hero__sub{max-width:45ch}
  .hero .pillars{width:min(calc(100% - 2 * var(--page-gutter)),740px);margin-top:64px;gap:28px}
}
@media(max-width:759px){
  :root{--header-height:78px}
  .hero{padding-top:24px}
  .hdr .nav.is-open{max-height:calc(100svh - 78px)}
  .hero__inner{padding-top:24px}
  .hero .eyebrow{font-size:11px}
  .hero__sub{font-size:17px}
  .hero__cta{gap:20px 24px}
  .hero .pillars{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero .pillar{grid-template-columns:26px minmax(0,1fr)}
  .clients-heading{gap:24px}
  .onboarding-heading{gap:24px}
}

/* Touch targets, native mobile keyboards and room for device safe areas. */
@media(pointer:coarse){
  .menu-toggle,.choice span,.tab,.palette-switch button{min-height:44px}
  .menu-toggle{min-width:44px}
  .text-link,.pillar h3 a,.ftr a:not(.brand){display:inline-flex;align-items:center;min-height:44px}
  .pillar h3 a{display:flex}
  .ftr a:not(.brand){display:flex;width:fit-content;max-width:100%}
  .field input,.field textarea{font-size:16px}
  .channels .ch,.btn{touch-action:manipulation}
}
/* The viewport may extend around a notch; backgrounds fill it, content does not. */
.hdr,.hdr.light{height:calc(var(--header-height) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
.hdr .nav.is-open{top:calc(var(--header-height) + env(safe-area-inset-top) - 1px);max-height:calc(100svh - var(--header-height) - env(safe-area-inset-top))}
[id]{scroll-margin-top:calc(var(--header-height) + env(safe-area-inset-top) + 24px)}
#financing{scroll-margin-top:calc(var(--header-height) + env(safe-area-inset-top) + 24px)}
#top{scroll-margin-top:0}
@media(max-width:1059px){
  .hdr .nav.is-open{padding-inline:var(--page-gutter)}
  .hdr .nav a{min-height:44px;display:flex;align-items:center;width:100%}
}
@media(max-width:759px){
  .hdr,.hdr.light{padding-inline:var(--page-gutter)}
  .ftr{padding-bottom:max(28px,env(safe-area-inset-bottom))}
}
@media(max-width:599px){
  #clientTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;white-space:normal;align-items:stretch}
  #clientTabs .tab{min-width:0;white-space:normal;text-align:left;padding-block:14px}
}
@media(max-width:1059px) and (max-height:600px) and (orientation:landscape){
  :root{--header-height:68px}
  .hero{padding-top:70px;gap:100px;min-height:700px;justify-content:space-between}
  .hero-visual{position:absolute;inset:0 0 auto;width:100%;max-width:none;height:560px;aspect-ratio:auto;margin:0}
  .hero-visual .hero-scene{object-fit:cover;object-position:58% center;mask-image:linear-gradient(#000 70%,transparent 100%)}
  .hero::after{display:block;position:absolute;inset:0;background:linear-gradient(90deg,#07182a77,transparent 60%)}
  .hero__inner{padding-top:0}
  .hero h1{font-size:clamp(36px,5vw,48px);max-width:12ch}
  .hero__sub{max-width:28ch;font-size:17px}
  .hero .pillars{margin-top:80px}
  .hero__cta{margin-top:26px}
  .management-art picture{width:calc(clamp(280px,80svh,400px) * 1.02069)}
  .clients-visual{max-width:680px}
  .onboarding-frontier{width:340px;max-width:100%}
  .hdr .nav.is-open{padding-block:10px}
  .hdr .nav a{padding-block:8px}
  #clients .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
}