/* ==========================================================================
   Brand lockup — matched to the main homepage top bar.

   The homepage (css/style.css) renders the logo at 92px with the wordmark in
   Marcellus at clamp(1.18rem,2.25vw,2.05rem), filled with a metallic blue
   gradient sampled from the logo artwork, and the line beneath it in the
   logo's green.

   The two sub-sites had their own smaller scales — Company Setup used a fixed
   1.16rem wordmark with a 100px logo, Financial used clamp(.92rem,1.42vw,1.3rem)
   with a 46px logo. This file brings both onto the homepage's scale and fill.

   Loaded AFTER startup.css / financial.css so these rules win. Colours are
   written as literal hex rather than var() because the two sub-site
   stylesheets define different values under the same token names.
   ========================================================================== */

/* ---- Logo: same height as the homepage bar ------------------------------ */
header.top img.logo,
.brand__logo {
  height: 82px;
  width: auto;
}

/* The Financial bar is a fixed-height flex row, so it has to grow to fit the
   larger logo — otherwise the lockup overflows the bar. */
.fin-header__bar {
  height: auto;
  min-height: 100px;
  padding: 9px 0;
}

/* ---- Wordmark: homepage type scale + metallic blue fill ----------------- */
.brand-lockup .bl-name,
.brand__name {
  font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(1.18rem, 2.25vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: #002ED9;
  -webkit-text-stroke: 0.5px #0B3AA6;
  background-image: linear-gradient(177deg,
    #0A2E86 0%,
    #1240BE 16%,
    #2A66EE 34%,
    #94CCFF 46%,
    #1B4CD6 54%,
    #001A66 70%,
    #062583 86%,
    #0E3AA4 100%);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-lockup .bl-name,
  .brand__name {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.5px #0B3AA6;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
  }
}

/* ---- Section label: homepage tagline scale + the logo's green ----------- */
.brand-lockup .bl-sub,
.brand__sub {
  font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
  font-size: clamp(0.84rem, 1.22vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #275E17;
  margin-top: 3px;
}

/* ---- Keep it sane on smaller screens ----------------------------------- */
@media (max-width: 940px) {
  header.top img.logo,
  .brand__logo { height: 66px; }
  .fin-header__bar { min-height: 84px; }
}
@media (max-width: 720px) {
  header.top img.logo,
  .brand__logo { height: 56px; }
  .fin-header__bar { min-height: 74px; }
}

/* ==========================================================================
   Company Setup hero wordmark — a size up, colour unchanged.
   ========================================================================== */
.hero-bg .brandname,
.hero-bg.hero--home .brandname {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}

/* ==========================================================================
   Making room for the larger lockup in the Company Setup bar.

   That bar carries a 5-item nav plus a CTA and phone link, so the homepage's
   wordmark size (~300px wide vs ~190px before) no longer fits at mid widths.
   Spacing is tightened to reclaim what it can; below 1280px the wordmark is
   hidden and the logo stands alone, which is the same approach startup.css
   already took at 1080px.
   ========================================================================== */
header.top .wrap { gap: 8px; }
.brandzone { gap: 14px; }
.brand-lock { gap: 10px; }
nav.svc > .item > a { padding-left: 7px; padding-right: 7px; }

@media (max-width: 1280px) {
  .brand-lockup { display: none; }
}

/* The Financial bar needs the same treatment: its brand block grows to ~632px
   at the homepage scale, which pushed the CTA past the viewport edge. */
.fin-header__bar { gap: 12px; }
.fin-nav a { padding-left: 6px; padding-right: 6px; }

@media (max-width: 1280px) {
  .brand__text { display: none; }
}

/* ==========================================================================
   Financial top bar — brought in line with the Company Setup bar.
   ========================================================================== */

/* Call button: the Financial bar had none. Literal colours again, because
   financial.css does not define the --yellow/--charcoal tokens startup.css
   uses for this control. */
.fin-header .top-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: #1A1A1A;
  padding: 9px 14px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(135deg, #E6B45A, #D9A241);
  box-shadow: 0 10px 24px rgba(230, 180, 90, 0.42);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.fin-header .top-phone svg {
  width: 17px; height: 17px;
  fill: none; stroke: #1A1A1A;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.fin-header .top-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(230, 180, 90, 0.52);
  filter: brightness(1.03);
}
@media (max-width: 820px) {
  .fin-header .top-phone span { display: none; }
  .fin-header .top-phone { padding: 9px 11px; }
}

/* The Financial bar carries more than the Company Setup one — a 6-item nav
   plus BOTH the call button and the Request Advisory CTA. At the matched
   wordmark size that overflows, so the nav and CTA give up the space instead
   of the brand lockup. */
/* The header bar sits in a 1200px .shell while the Company Setup bar spans
   min(1400px,97vw). That 200px is the whole shortfall, so the bar matches it. */
.fin-header__bar { width: min(1400px, 97vw); gap: 8px; }
.fin-nav { gap: 0; }
.fin-nav a {
  padding-left: 4px;
  padding-right: 4px;
  font-size: 0.8rem;
}
.fin-header .btn {
  padding: 9px 14px;
  font-size: 0.8rem;
}
.brand__lock { gap: 10px; }

/* ==========================================================================
   Gold outlines on the Financial content boxes.

   Company Setup outlines its boxes with 2.5px var(--yellow) (#E6B45A). The
   Financial section used 1px hairlines in --line, so its cards read as flatter
   than the rest of the site. Same weight and colour applied here.

   Deliberately NOT included: nav dropdowns (.fin-nav .drop/.sub), form fields,
   segmented controls, and the small status pills — outlining those would read
   as an error state rather than a card.
   ========================================================================== */
.metric,
.feature,
.criteria,
.assess__form,
.assess__summary,
.est__inputs,
.est__out,
.hero__panel,
.signpost a,
.signpost > div,
.pager a,
.md-note,
.fin-review {
  border: 2.5px solid #E6B45A;
}

/* Keep it gold on hover — the base styles darken or swap these borders. */
.metric:hover,
.feature:hover,
.signpost a:hover,
.pager a:hover,
.fin-review:hover {
  border-color: #D9A241;
}


/* ==========================================================================
   Tagline under the wordmark.
   Every page's bar now carries the company tagline in place of the section
   name, so it takes the homepage tagline's italic to match the logo artwork.
   ========================================================================== */
.brand-lockup .bl-sub,
.brand__sub {
  font-style: italic;
}


/* ==========================================================================
   Financial top bar — logo and nav text at the Company Setup scale.

   The Financial pages now use the same logo-mark.png as Company Setup (the
   wider logo-oncolor.png rendered ~50% larger at the same height), and the nav
   links take Company Setup's rendered size: 15.36px there = .96rem here, since
   startup.css sits on a larger root. Buttons follow the same way.
   ========================================================================== */
.fin-nav a {
  font-size: 0.96rem;
  font-weight: 600;
  color: #2E2E2E;
  padding-left: 7px;
  padding-right: 7px;
}
.fin-nav .drop a,
.fin-nav .sub a { font-size: 0.9rem; }
.fin-header .btn { font-size: 0.82rem; padding: 12px 20px; }

/* Just above the collapse point the full-size row runs out of room, so the
   wordmark steps aside there — the same trade Company Setup makes at 1280px. */
@media (max-width: 1365px) {
  .brand__text { display: none; }
}

/* ==========================================================================
   SME/ Corporate Bank Account — service card copy in black.
   ========================================================================== */
.feature-list--dark .feature p,
.feature-list--dark .feature__meta span {
  color: #000;
}

/* --- Bigger logo mark, identical bar height -------------------------------
   Same treatment as the homepage bar (css/style.css): the artwork sits inside
   ~20%/25% of vertical padding in the PNG, so the box is scaled up rather than
   made taller. Layout is untouched, so header.top keeps --hdr-h and the
   Financial bar keeps its min-height. */
header.top img.logo,
.brand__logo{ transform:scale(1.28); transform-origin:center }

/* The scaled mark is ~13px wider on each side, which eats the gap to the
   wordmark. Widen it back so the lockup keeps its old breathing room. The
   wordmark is hidden below 1280px, so this only applies where there is room
   for it anyway. */
.brand-lock,
.brand__lock { gap: 24px; }

/* The logo ships with a transparent ground (images/logo-mark-clear.png), so the
   enlarged mark sits straight on the bar with no white block behind it. */