/* London skyline masthead; existing navigation and access rules are retained. */
html[data-compass-theme="tabler"] header.top.skyline-header {
  isolation:isolate;box-sizing:border-box;height:145px;min-height:145px;
  padding:0!important;border-bottom:1px solid #173d59!important;
  box-shadow:0 2px 6px #061a3026!important;
}
header.top.skyline-header::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--portal-header-image,url("/assets/london-skyline.jpg")) center var(--portal-header-image-position,33%) / cover no-repeat;
  opacity:var(--portal-header-image-opacity,1);
}
html[data-compass-theme="tabler"] header.top.skyline-header .brandrow {
  height:93px;min-height:93px;box-sizing:border-box;padding:18px 0 30px!important;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:calc(100% - 40px);max-width:1540px;margin:0 auto;
}
html[data-compass-theme="tabler"] header.top.skyline-header .headtitle {
  display:flex;align-items:center;gap:13px;white-space:nowrap;
  font:400 26px/1.2 var(--site-font)!important;letter-spacing:-.5px;
}
html[data-compass-theme="tabler"] header.top.skyline-header .headtitle .compass-mark {
  display:block;width:34px;height:34px;flex:0 0 34px;
}
html[data-compass-theme="tabler"] header.top.skyline-header .headtitle-label {
  border-left:1px solid #fff;padding-left:13px;font:inherit!important;color:var(--portal-headerText,#fff)!important;
}
html[data-compass-theme="tabler"] header.top.skyline-header .right {
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px;min-width:0;
}
html[data-compass-theme="tabler"] header.top.skyline-header #search {
  order:1;flex:0 1 312.5px;width:312.5px;min-width:130px;height:38px;min-height:38px;
  padding:8px 15px 8px 37px!important;border:1px solid #7aa5c433!important;border-radius:24px!important;
  color:var(--portal-headerText,#fff)!important;font-size:12px!important;
  background:#062842cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7d9e6' stroke-width='1.7'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") 13px center / 16px no-repeat!important;
}
html[data-compass-theme="tabler"] header.top.skyline-header #search::placeholder {color:#c2d5e4!important;opacity:1;}
html[data-compass-theme="tabler"] header.top.skyline-header :is(#previewUserButton,#approvalNotifications,#adminButton,#signOut) {
  flex:0 0 auto;width:auto;min-width:36px;max-width:none;height:38px;min-height:38px;max-height:38px;
  padding:8px!important;border:1px solid transparent!important;background:#06284255!important;
  color:var(--portal-headerText,#fff)!important;box-shadow:none!important;font-size:12px;
}
html[data-compass-theme="tabler"] header.top.skyline-header :is(#previewUserButton,#approvalNotifications,#adminButton,#signOut):hover {background:#0c526bba!important;}
header.top.skyline-header #approvalNotifications {order:2;}
header.top.skyline-header #adminButton {order:3;}
html[data-compass-theme="tabler"] header.top.skyline-header #adminButton {width:78px;min-width:78px;flex-basis:78px;}
header.top.skyline-header #signOut {order:4;}
html[data-compass-theme="tabler"] header.top.skyline-header #previewUserButton {
  order:5;width:38px;min-width:38px;border-radius:50%!important;border-color:#568ca9!important;
  background:#052a43!important;font-size:12px;font-weight:700;opacity:1;
}
header.top.skyline-header #headerOpportunity104 {order:0;white-space:nowrap;}
header.top.skyline-header .header-opportunity-label {font-size:12px!important;font-weight:600;line-height:1.2;}
html[data-compass-theme="tabler"] header.top.skyline-header .navigation-frame328 {margin:0 auto;width:calc(100% - 40px);max-width:1540px;height:52px;}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar {
  display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;justify-content:stretch!important;
  width:100%;height:52px;gap:4px!important;overflow-x:auto!important;scrollbar-width:thin;scrollbar-color:#5bd6cb66 transparent;
}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar > button {
  width:100%!important;min-width:0!important;max-width:none!important;min-height:45px;margin:0 0 7px!important;
  padding:9px 8px!important;gap:5px;justify-content:center;white-space:nowrap;
  border:0!important;border-radius:5px 5px 0 0!important;
  background:var(--portal-navigation-buttons,rgb(6 40 66 / 57%))!important;color:var(--portal-headerText,#edf6fc)!important;font-size:clamp(11px,.85vw,14px)!important;font-weight:500!important;
  line-height:20px;text-shadow:0 1px 3px #021528;
}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar > button:is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"]) {
  background:var(--portal-navigation-buttons-active,rgb(7 67 85))!important;color:var(--portal-headerText,#fff)!important;
}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar > button:hover {background:var(--portal-navigation-buttons-hover,rgb(11 69 87))!important;}
/* Border, active lower line and keyboard focus are independently controlled. */
html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar > button,
.portal-site-preview .portal-preview-nav>span {
  box-shadow:none!important;
}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars .bb-top-navigation-icon {width:20px;height:20px;flex:0 0 20px;color:var(--portal-navigation-icon,#fff)!important;}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars > button:is(.active,.is-active,[aria-expanded="true"]) .bb-top-navigation-icon {color:var(--portal-navigation-icon,#65e0d4)!important;}
header.top.skyline-header .bb-top-navigation-label {white-space:nowrap;}
header.top.skyline-header .bb-top-navigation-label br {display:none;}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars .sales-dashboard-menu-caret {width:10px;margin-left:1px!important;}
html[data-compass-theme="tabler"] header.top.skyline-header :focus-visible {outline:2px solid #7dece1!important;outline-offset:-3px;}
@media(max-width:1279px) {
  html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar {grid-auto-columns:208px;}
  html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar > button {padding-inline:10px!important;}
}
@media(max-width:1100px) {
  html[data-compass-theme="tabler"] header.top.skyline-header .brandrow {gap:14px;}
  html[data-compass-theme="tabler"] header.top.skyline-header .right {gap:6px;}
  header.top.skyline-header #headerOpportunity104 {max-width:155px;font-size:11px;}
}
@media(max-width:800px) {
  html[data-compass-theme="tabler"] header.top.skyline-header {height:143px;min-height:143px;}
  html[data-compass-theme="tabler"] header.top.skyline-header .brandrow {height:91px;min-height:91px;padding:8px 0!important;flex-wrap:wrap;gap:7px;align-content:flex-start;}
  html[data-compass-theme="tabler"] header.top.skyline-header .headgroup {flex:1 1 100%;}
  html[data-compass-theme="tabler"] header.top.skyline-header .headtitle {font-size:22px!important;}
  html[data-compass-theme="tabler"] header.top.skyline-header .headtitle .compass-mark {width:30px;flex-basis:30px;height:30px;}
  html[data-compass-theme="tabler"] header.top.skyline-header .right {flex:1 1 100%;width:100%;justify-content:flex-start;}
  html[data-compass-theme="tabler"] header.top.skyline-header #search {flex:1 1 130px;width:auto;min-width:80px;}
  html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar > button {font-size:12px!important;}
  header.top.skyline-header #headerOpportunity104 {position:absolute;right:0;top:8px;width:34px;min-width:34px;max-width:34px;height:34px;min-height:34px;padding:7px!important;justify-content:center;}
  header.top.skyline-header .header-opportunity-label {display:none;}
}
@media(max-width:650px) {
  html[data-compass-theme="tabler"] header.top.skyline-header :is(.brandrow,.navigation-frame328){width:calc(100% - 32px);}
}
@media(max-width:460px) {
  html[data-compass-theme="tabler"] header.top.skyline-header #adminButton {font-size:11px;padding-inline:5px!important;}
  html[data-compass-theme="tabler"] header.top.skyline-header .right {gap:4px;}
}

/* Draft preview uses the same image controls without changing the saved site. */
.portal-header-settings {margin:20px 0;padding-top:16px;}
.portal-header-settings h4 {margin:0 0 14px;}
.portal-header-settings .field {margin:12px 0;}
.portal-header-settings output {float:right;font-variant-numeric:tabular-nums;}
.portal-header-settings input[type="range"] {width:100%;accent-color:#0674dc;}
.portal-site-preview .portal-preview-header {isolation:isolate;position:relative;padding:0 16px;height:145px;box-sizing:border-box;}
.portal-site-preview .portal-preview-header::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--portal-header-image,url("/assets/london-skyline.jpg")) center var(--portal-header-image-position,33%) / cover no-repeat;
  opacity:var(--portal-header-image-opacity,1);
}
.portal-site-preview .portal-preview-top {height:93px;box-sizing:border-box;padding:18px 0 30px;gap:13px;background:transparent;}
.portal-site-preview .portal-preview-top>strong {border-left:1px solid #fff;padding-left:13px;font-size:26px;font-weight:400;}
.portal-site-preview .portal-preview-logo,.portal-site-preview .portal-preview-logo svg {width:34px;height:34px;}
.portal-site-preview .portal-preview-tools {gap:8px;font-size:11px;}
.portal-site-preview .portal-preview-tool {background:#06284255;border:1px solid transparent;height:36px;box-sizing:border-box;display:flex;align-items:center;}
.portal-site-preview .portal-preview-account {border-radius:50%;background:#052a43;border:1px solid #568ca9;width:36px;justify-content:center;font-weight:700;}
.portal-site-preview .portal-preview-bell svg {width:18px;height:18px;}
.portal-site-preview .portal-preview-search {background:#062842cc;color:#c2d5e4;border-radius:24px;width:225px;}
.portal-site-preview .portal-preview-nav {gap:4px;height:52px;background:transparent;font-size:10px;}
.portal-site-preview .portal-preview-nav>span {box-sizing:border-box;padding:9px 5px;margin-bottom:7px;min-width:0;gap:4px;justify-content:center;white-space:nowrap;background:var(--portal-navigation-buttons,rgb(6 40 66 / 57%));border-radius:5px 5px 0 0;border:0;}
.portal-site-preview .portal-preview-nav>span:first-child {background:var(--portal-navigation-buttons-active,rgb(7 67 85));}
.portal-site-preview .portal-preview-nav>span>svg {color:var(--portal-navigation-icon,#fff);}
.portal-site-preview .portal-preview-nav svg {width:18px;height:18px;flex:0 0 18px;}

/* Paint borders above the background so gradients and transparency never fill
   the button centre or change navigation geometry. */
header.top.skyline-header #pillars.pillarbar>button,
.portal-site-preview .portal-preview-nav>span,
.theme-border-preview {position:relative;}
header.top.skyline-header #pillars.pillarbar>button::before,
.portal-site-preview .portal-preview-nav>span::before,
.theme-border-preview::before {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;padding:var(--portal-navigation-button-border-width,0px);
  background:var(--portal-navigation-button-border,#4cdbcd);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
header.top.skyline-header #pillars.pillarbar>button::after,
.portal-site-preview .portal-preview-nav>span::after {content:none!important;}
html[data-compass-theme="tabler"] header.top.skyline-header #pillars.pillarbar>button:is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"])::after,
.portal-site-preview .portal-preview-nav>span:first-child::after {
  content:""!important;position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--portal-navigation-button-lower-line,#4cdbcd);pointer-events:none;z-index:2;
}
.theme-dialog-preview.theme-border-preview {
  display:flex;align-items:center;justify-content:center;border:0;
  background:var(--portal-navigation-buttons,#062842);color:#fff;
}
.theme-border-preview::before {inset:0;}