/* ============================================================================
   SKY Financial Solutions — Debt Advisory & Capital Procurement
   ----------------------------------------------------------------------------
   Page-scoped stylesheet. It is loaded only by services/banking-services.html,
   so it owns :root without fighting style.css or startup.css.

   The palette is deliberately NOT a new invention: deep navy, slate/steel,
   crisp paper white, gold and sage are lifted from the parent site's tokens in
   css/style.css so this page reads as part of SKY rather than a bolted-on
   microsite. Sage stays an ACTION colour, per the house rule.

   Contents
     1  Tokens & reset
     2  Layout primitives
     3  Header / navigation
     4  Hero
     5  Dashboard metric row
     6  Pillar sections (A, B, C)
     8  Execution timeline (E)
     9  Capital assessment form
    10  Footer & floating action
    11  Motion
    12  Responsive
   ========================================================================== */

/* ---------- 1  Tokens & reset -------------------------------------------- */
:root{
  --ink:#0A1A2F;          /* midnight navy — deepest ground */
  --navy:#0E2949;         /* brand navy */
  --navy-2:#122C4C;
  --navy-3:#17385f;
  --steel:#2E6BB0;        /* slate/steel blue */
  --steel-lt:#4f93d9;
  --slate:#5A6E86;        /* body text on light */
  --slate-dk:#3B4C60;
  --gold:#F2C879;
  --gold-mid:#B87A20;     /* gold that stays legible as TEXT on white */
  --gold-ink:#8A6310;
  --sage:#7CB342;         /* action / affirmative only */
  --sage-dk:#5f9433;
  --mist:#C9D9EC;
  --mist-dim:#90A6C2;
  --paper:#F4F7FB;
  --paper-2:#EAF0F8;
  --line:#DCE5F0;
  --line-strong:#C3D1E4;
  --white:#fff;

  /* borrowed from the Company Setup header so the wordmark matches across sections */
  --logo-blue:#002ED9;
  --logo-green:#275E17;

  --font-display:'Marcellus','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Manrope','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

  --shell:min(1200px,92vw);
  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:78px;

  --shadow-sm:0 2px 8px rgba(10,26,47,.06);
  --shadow-md:0 14px 34px rgba(10,26,47,.10);
  --shadow-lg:0 26px 60px rgba(10,26,47,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px)}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate-dk);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--navy);line-height:1.15;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Visible focus for anyone driving the page from the keyboard. */
:focus-visible{outline:3px solid var(--steel-lt);outline-offset:3px;border-radius:4px}

/* ---------- 2  Layout primitives ----------------------------------------- */
.shell{width:var(--shell);margin-inline:auto}

.section{padding:clamp(56px,7vw,96px) 0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:var(--mist)}
.section--ink h2,.section--ink h3{color:var(--white)}

.sec-head{max-width:760px;margin-bottom:clamp(30px,4vw,46px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:10px}
.sec-head p{margin-top:14px;color:var(--slate);font-size:1.03rem}
.section--ink .sec-head p{color:var(--mist)}

/* Small uppercase label that sits above every section heading. */
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-mid);
}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.section--ink .kicker{color:var(--gold)}

/* Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border:1.5px solid transparent;border-radius:8px;
  font-weight:700;font-size:.94rem;letter-spacing:.01em;cursor:pointer;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background .22s,color .22s,border-color .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--gold{background:linear-gradient(135deg,var(--gold),#e0ae55);color:var(--ink);box-shadow:0 10px 24px rgba(242,200,121,.38)}
.btn--gold:hover{box-shadow:0 16px 34px rgba(242,200,121,.5)}
.btn--navy{background:var(--navy);color:var(--white);box-shadow:0 10px 24px rgba(14,41,73,.28)}
.btn--navy:hover{background:var(--navy-3);box-shadow:0 16px 34px rgba(14,41,73,.34)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--navy);background:var(--paper)}
.btn--ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42)}
.btn--ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.08)}

/* A light sweeps across the solid buttons on hover. */
.btn--gold::after,.btn--navy::after{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.btn--gold:hover::after,.btn--navy:hover::after{animation:finSheen .72s ease}
@keyframes finSheen{to{left:150%}}

/* ---------- 3  Header / navigation --------------------------------------- */
.fin-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s,background .25s;
}
.fin-header.is-stuck{box-shadow:var(--shadow-md);background:rgba(255,255,255,.97)}
.fin-header__bar{
  height:var(--header-h);display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);
}

.brand{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex:none}

/* The back arrow is pulled out past the shell's left edge so it sits closer to
   the window than to the logo — the same treatment, and the same negative
   margin, the Company Setup header uses. */
.brand__back{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:none;
  margin-left:clamp(-22px,-1.6vw,-14px);
  border:2px solid var(--gold-mid);color:var(--gold-mid);
  font-size:1.45rem;line-height:1;
  transition:background .2s,color .2s,transform .2s;
}
.brand__back:hover{background:var(--gold-mid);color:var(--white);transform:translateX(-2px)}

/* Logo and wordmark are one link to the section home, so the whole lockup is
   clickable rather than just the image. */
.brand__lock{display:flex;align-items:center;gap:12px;flex:none}
.brand__logo{height:46px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.15}

/* Type scale and colours are lifted from the Company Setup top bar so the two
   sections read as one site: the wordmark in the logo's blue, the section label
   in the logo's green. */
.brand__name{
  font-family:var(--font-display);
  font-size:clamp(.92rem,1.42vw,1.3rem);
  font-weight:700;line-height:1.2;letter-spacing:.02em;white-space:nowrap;
  color:var(--logo-blue);
  -webkit-text-stroke:.5px var(--logo-blue);
}
.brand__sub{
  font-size:clamp(.6rem,.74vw,.72rem);
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  color:var(--logo-green);margin-top:5px;
}
@media (max-width:1240px){
  .brand__name{font-size:clamp(.9rem,1.32vw,1.04rem)}
  .brand__sub{font-size:clamp(.62rem,.72vw,.68rem);letter-spacing:.15em}
}

.fin-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
/* white-space + flex:none matter here: as plain flex items the links were free
   to shrink under their own text and quietly broke the longer labels onto a
   second line in the mid widths. They now hold their label width, and the panel
   breakpoint below takes over at the point the row actually runs out of room. */
.fin-nav a{
  position:relative;padding:9px 11px;border-radius:7px;
  font-size:.88rem;font-weight:600;color:var(--slate-dk);
  white-space:nowrap;flex:none;
  transition:color .2s,background .2s;
}
.fin-nav a:hover{color:var(--navy);background:var(--paper)}
/* the rule grows out from the middle, and stays put on the active section */
.fin-nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:3px;height:2px;
  background:var(--gold);border-radius:2px;
  transition:left .28s var(--ease),right .28s var(--ease);
}
.fin-nav a:hover::after,.fin-nav a.is-active::after{left:13px;right:13px}
.fin-nav a.is-active{color:var(--navy)}

.fin-header .btn{flex:none;padding:11px 20px;font-size:.87rem}

.nav-toggle{
  display:none;margin-left:auto;
  width:42px;height:42px;border:1px solid var(--line-strong);border-radius:9px;
  background:var(--white);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 4  Hero ------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(150deg,var(--ink) 0%,var(--navy) 52%,var(--navy-3) 100%);
  color:var(--mist);
  padding:clamp(64px,9vw,116px) 0 clamp(56px,7vw,92px);
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  object-fit:cover;width:100%;height:100%;
  opacity:.17;filter:saturate(.7);
}
/* A faint ledger grid — the institutional texture, kept well under the text. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(201,217,236,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,217,236,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 30%,transparent 78%);
}
.hero__inner{max-width:820px}
.hero h1{
  color:var(--white);
  font-size:clamp(2.1rem,5.2vw,3.5rem);
  letter-spacing:.005em;margin-top:16px;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__lead{margin-top:20px;font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--mist);max-width:62ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* Trust strip under the hero copy — qualitative, no invented figures. */
.hero__strip{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:36px;
  padding-top:24px;border-top:1px solid rgba(201,217,236,.18);
}
.hero__strip li{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--mist)}
.hero__strip svg{width:17px;height:17px;flex:none;stroke:var(--sage);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 5  Dashboard metric row -------------------------------------- */
/* Sits half-overlapping the hero so the page opens on the four pillars. */
.dashboard{position:relative;z-index:2;margin-top:clamp(-56px,-5vw,-40px)}
.dashboard__grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.metric{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;box-shadow:var(--shadow-md);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.metric::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-mid));
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);
}
.metric:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.metric:hover::before{transform:scaleX(1)}
.metric__icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(242,200,121,.28),rgba(184,122,32,.16));
  margin-bottom:16px;transition:transform .3s var(--ease);
}
.metric:hover .metric__icon{transform:rotate(-7deg) scale(1.07)}
.metric__icon svg{width:23px;height:23px;stroke:var(--gold-mid);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.metric__index{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--mist-dim);text-transform:uppercase}
.metric h3{font-size:1.16rem;margin:6px 0 8px}
.metric p{font-size:.9rem;color:var(--slate)}
.metric__tag{
  display:inline-block;margin-top:14px;padding:5px 11px;border-radius:999px;
  background:var(--paper-2);color:var(--slate-dk);
  font-size:.73rem;font-weight:700;letter-spacing:.04em;
}

/* ---------- 6  Pillar sections (A, B, C) --------------------------------- */
.pillar__grid{
  display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.pillar--flip .pillar__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.pillar--flip .pillar__aside{order:2}

.pillar__aside{position:sticky;top:calc(var(--header-h) + 28px)}
.pillar__badge{
  display:inline-grid;place-items:center;width:54px;height:54px;border-radius:14px;
  background:var(--navy);color:var(--gold);
  font-family:var(--font-display);font-size:1.35rem;margin-bottom:18px;
}
.section--paper .pillar__badge{box-shadow:0 12px 26px rgba(14,41,73,.18)}

/* The icon list that carries each pillar's detail. */
.feature-list{display:grid;gap:16px}
.feature{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s;
}
.section--paper .feature{background:var(--white)}
.feature:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.feature__icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  transition:transform .3s var(--ease);
}
.feature:hover .feature__icon{transform:rotate(-8deg) scale(1.06)}
.feature__icon svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature h4{font-size:1.08rem;margin-bottom:6px}
.feature p{font-size:.93rem;color:var(--slate)}
.feature__meta{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;
}
.feature__meta span{
  padding:4px 10px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);color:var(--slate-dk);
  font-size:.72rem;font-weight:700;letter-spacing:.03em;
}

/* Criteria call-out — the "what lenders actually test" box. */
.criteria{
  margin-top:18px;border-radius:var(--radius);padding:24px;
  background:linear-gradient(150deg,var(--navy),var(--ink));color:var(--mist);
  border:1px solid rgba(201,217,236,.14);
}
.criteria h4{color:var(--white);font-size:1.05rem;margin-bottom:12px}
.criteria ul{display:grid;gap:10px}
.criteria li{position:relative;padding-left:26px;font-size:.9rem}
.criteria li::before{
  content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:3px;
  background:linear-gradient(135deg,var(--gold),var(--sage));transform:rotate(45deg);
}
.criteria b{color:var(--white);font-weight:700}

/* ---------- 8  Execution timeline (E) ------------------------------------ */
.timeline{position:relative;margin-top:14px;--dot:26px}
/* The rail sits on the centre line of the dots: half the dot height less
   half the rail's own. Both figures live here, so changing the dot size only
   means changing them together. */
.timeline__rail{
  position:absolute;left:0;right:0;top:calc(var(--dot) / 2 - 1.5px);height:3px;
  background:rgba(201,217,236,.22);border-radius:3px;
}
.timeline__fill{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--sage));
  transition:width .9s var(--ease);
}
/* The reset above only covers ul, so this ol kept the user-agent decimal
   markers and its 40px indent — printing a second set of numbers beside the
   dots and starting the steps 40px right of where the rail begins. */
.timeline__steps{
  display:grid;gap:26px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
  list-style:none;margin:0;padding:0;
}
.timeline__steps > .step{list-style:none}
.timeline__steps > .step::marker{content:}
.step{cursor:default}
/* An unlabelled node. It used to carry the step number, so it was sized to
   hold type; with the numeral gone it comes down to a marker, which is all the
   rail needs to read as a sequence. */
.step__dot{
  width:var(--dot);height:var(--dot);border-radius:50%;
  background:var(--navy-2);border:3px solid rgba(201,217,236,.28);
  transition:transform .32s var(--ease),background .32s,border-color .32s,box-shadow .32s;
}
.step.is-reached .step__dot{
  background:linear-gradient(135deg,var(--gold),#e0ae55);
  border-color:rgba(242,200,121,.35);
  box-shadow:0 12px 30px rgba(242,200,121,.34);
}
.step:hover .step__dot{transform:translateY(-4px) scale(1.06)}
.step h3{font-size:1.06rem;margin:20px 0 8px;color:var(--white)}
.step p{font-size:.89rem;color:var(--mist)}
.step__out{
  display:inline-block;margin-top:12px;padding:5px 11px;border-radius:999px;
  background:rgba(124,179,66,.14);border:1px solid rgba(124,179,66,.3);
  color:#A6D96A;font-size:.72rem;font-weight:700;letter-spacing:.04em;
}

/* ---------- 9  Capital assessment form ----------------------------------- */
.assess__grid{
  display:grid;gap:clamp(24px,3.4vw,46px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:start;
}
.assess__form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md);
}
.field{margin-bottom:20px}
.field label{display:block;font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-dk);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:9px;
  border:1.5px solid var(--line-strong);background:var(--white);
  font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--steel);box-shadow:0 0 0 4px rgba(46,107,176,.14);
}
.field__hint{margin-top:7px;font-size:.79rem;color:var(--mist-dim)}

/* Segmented control for Domestic vs Cross-Border. */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
/* The real radios stay in the DOM for keyboard and screen-reader use but are
   taken out of the layout. They need an explicit 1px box: `.field input` above
   sets width:100%, and on an absolutely positioned element with no positioned
   ancestor that resolves against the viewport — which pushed the page into a
   horizontal scroll. `position:relative` on the wrapper plus a fixed size
   contains them. */
.segmented input{
  position:absolute;width:1px;height:1px;padding:0;margin:0;
  opacity:0;pointer-events:none;border:0;
}
.segmented label{
  display:block;margin:0;padding:13px 12px;border-radius:9px;text-align:center;cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--white);
  font-size:.88rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--slate-dk);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.segmented label:hover{transform:translateY(-2px);border-color:var(--navy)}
.segmented input:checked + label{background:var(--navy);border-color:var(--navy);color:var(--white)}
.segmented input:focus-visible + label{outline:3px solid var(--steel-lt);outline-offset:2px}

/* Range slider for facility size. */
.range-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.range-out{font-family:var(--font-display);font-size:1.5rem;color:var(--navy)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;padding:0;
  background:linear-gradient(90deg,var(--gold) var(--pct,30%),var(--paper-2) var(--pct,30%));
  border:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--navy);border:3px solid var(--white);box-shadow:0 2px 8px rgba(10,26,47,.3);cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--navy);border:3px solid var(--white);box-shadow:0 2px 8px rgba(10,26,47,.3);cursor:grab;
}

/* Live read-back of what the visitor has chosen. */
.assess__summary{
  border-radius:var(--radius);padding:clamp(24px,3vw,34px);
  background:linear-gradient(150deg,var(--navy),var(--ink));
  border:1px solid rgba(201,217,236,.14);color:var(--mist);
  position:sticky;top:calc(var(--header-h) + 28px);
}
.assess__summary h3{color:var(--white);font-size:1.25rem;margin-bottom:6px}
.assess__summary > p{font-size:.92rem;margin-bottom:20px}
.readout{display:grid;gap:2px;margin-bottom:22px}
.readout div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(201,217,236,.14);
}
.readout dt{font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mist-dim);font-weight:700}
.readout dd{margin:0;font-weight:700;color:var(--white);text-align:right;font-size:.96rem}
.readout dd.is-set{color:var(--gold)}
.assess__note{font-size:.8rem;color:var(--mist-dim);margin-top:16px;line-height:1.6}

/* ---------- 10  Footer & floating action --------------------------------- */
.fin-contact{background:var(--ink);color:var(--mist);padding:clamp(48px,6vw,76px) 0}
.fin-contact__grid{display:grid;gap:32px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}
.fin-contact h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.2rem)}
.fin-contact p{margin-top:12px;color:var(--mist)}
.fin-contact__rows{display:grid;gap:16px}
.fin-contact__rows a{border-bottom:1px dashed rgba(201,217,236,.35);transition:color .2s,border-color .2s}
.fin-contact__rows a:hover{color:var(--gold);border-color:var(--gold)}
.fin-contact__rows b{color:var(--white);display:block;font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:4px}

/* ---------- Quick links + contact rows ------------------------------------
   Same structure as the Company Setup page's bottom section — a quick-link
   column with collapsible groups beside the contact block — recoloured onto
   this section's navy/gold tokens rather than the setup page's yellow. */
.fin-contact__grid--links{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}

.quick-links .ql-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--white);letter-spacing:.05em;margin-bottom:20px;
}
.quick-links .ql-list{display:flex;flex-direction:column;gap:2px;padding-left:clamp(4px,1.6vw,22px)}
.quick-links a,
.quick-links summary{
  display:block;padding:8px 0;font-size:1rem;line-height:1.35;
  color:var(--white);border-bottom:0;transition:color .2s;
}
.quick-links a:hover,
.quick-links summary:hover{color:var(--gold);border-bottom:0}

.quick-links .ql-group{border:0}
.quick-links .ql-group > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px}
.quick-links .ql-group > summary::-webkit-details-marker{display:none}
.quick-links .ql-group > summary::after{
  content:;width:0;height:0;flex:none;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--gold);
  transition:transform .22s ease;
}
.quick-links .ql-group[open] > summary::after{transform:rotate(180deg)}
.quick-links .ql-group[open] > summary{color:var(--gold)}
/* Setting display on a closed <details>'s content overrides the browser's own
   hiding, which left the groups permanently expanded while the caret still
   rotated. Keeping the flex layout on the open state only lets the element
   collapse the way the markup intends. */
.quick-links .ql-sub{display:none}
.quick-links .ql-group[open] > .ql-sub{
  display:flex;flex-direction:column;gap:0;margin:2px 0 8px;padding-left:16px;
  border-left:2px solid rgba(201,217,236,.18);
  animation:qlOpen .22s ease both;
}
.quick-links .ql-sub a{padding:6px 0;font-size:.92rem;color:var(--mist)}
.quick-links .ql-sub a:hover{color:var(--gold)}
@keyframes qlOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.fin-contact .rows-title{
  font-family:var(--font-body);font-size:1.02rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.fin-contact__rows--stack{display:grid;gap:14px;margin-top:4px}
.fin-contact__rows--stack b{color:var(--gold);font-weight:700}
.fin-contact__rows--stack a{color:var(--white);border-bottom:1px dashed rgba(201,217,236,.35);transition:color .2s,border-color .2s}
.fin-contact__rows--stack a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- Footer -------------------------------------------------------- */
.fin-foot{background:#03123F;color:#B9C8E8;padding:0;font-size:.88rem}
.fin-foot .foot-base{padding:20px 0}
.fin-foot .foot-base .shell{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fin-foot p{margin:0;color:#8FA3CC;font-size:.82rem}
.fin-foot .foot-tag{
  font-family:var(--font-display);font-style:italic;font-size:.92rem;
  color:var(--gold);font-weight:600;margin-left:auto;text-align:right;
}
@media (max-width:900px){
  .fin-contact__grid--links{grid-template-columns:1fr}
  .quick-links .ql-list{padding-left:0}
}
@media (max-width:620px){
  .fin-foot .foot-base .shell{flex-direction:column;align-items:flex-start;text-align:left}
  .fin-foot .foot-tag{margin-left:0;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .quick-links .ql-sub{animation:none}
  .quick-links .ql-group > summary::after{transition:none}
}

.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;box-shadow:0 12px 28px rgba(37,211,102,.45);
  transition:background .2s,transform .2s var(--ease);
}
.wa-float:hover{background:#128c7e;transform:scale(1.07)}
.wa-float svg{width:29px;height:29px;fill:#fff}

/* ---------- 11  Motion ---------------------------------------------------- */
/* Reveal-on-scroll.

   Note which way round this works. `.reveal` on its own does NOTHING — an
   element carrying it is a normal, fully visible element. js/financial.js adds
   `.reveal-in` as the block scrolls into view, and only that class runs the
   keyframe (which is what starts from hidden and lands on the resting state).

   So if the script never runs — old browser, blocked JS, an error earlier in
   the file — every section still renders exactly as it should. Nothing on this
   page depends on JavaScript to become visible. */
@keyframes finRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal-in{animation:finRise .7s var(--ease) both;animation-delay:var(--d,0ms)}

/* Available to screen readers, absent from the page. */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 12  Responsive ------------------------------------------------ */
@media (max-width:1040px){
  .pillar__grid,.pillar--flip .pillar__grid{grid-template-columns:1fr}
  .pillar__aside{position:static}
  .pillar--flip .pillar__aside{order:0}
  .assess__grid{grid-template-columns:1fr}
  .assess__summary{position:static}
  .timeline__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .timeline__rail{display:none}
}

/* The navigation collapses to the panel at 1260px, well above the 900px used
   for the rest of the layout. The header row needs about 1127px of the shell for
   brand + links + call to action, which the 92vw shell only reaches at roughly
   1225px wide — so the panel has to take over before that. The figure sits a
   little above the measured point because both the wordmark and the links are
   set in webfonts: if Marcellus or Manrope is slow or unavailable the fallback
   metrics run wider, and the margin absorbs it. This is also why the wordmark
   moved to a single top-level nav item fewer — with the larger brand lockup the
   six-item row no longer fitted at any sensible width. The JS mobile-nav reset
   uses the same 1260 figure. */
/* Just above the collapse point the row is at its tightest, so the links give
   back a few pixels of padding through this band. It costs nothing visually at
   these widths and buys roughly 24px of slack — enough to absorb the difference
   between the webfont and its fallback without tipping into an overflow. */
@media (min-width:1261px) and (max-width:1400px){
  .fin-nav a{padding:9px 9px}
}

@media (max-width:1260px){
  .fin-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:12px;margin:0;
    display:none;
  }
  .fin-nav.is-open{display:flex}
  .fin-nav a{padding:12px 14px}
  .fin-nav a::after{display:none}
  .fin-nav a.is-active{background:var(--paper)}
  .nav-toggle{display:flex}
}

@media (max-width:900px){
  .fin-header .btn{display:none}
  .brand__text{display:none}
  .fin-contact__grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  :root{--header-h:66px}
  .brand__logo{height:38px}
  .dashboard{margin-top:-34px}
  .hero__cta .btn{flex:1 1 100%}

  .timeline__steps{grid-template-columns:1fr}
}


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

/* ============================================================================
   MULTI-PAGE CHROME
   Added when the single scrolling page was split into one page per section.
   Everything above still applies — these are the pieces a set of pages needs
   that one long page did not: a dropdown in the nav, a compact hero for
   interior pages, breadcrumbs, and prev/next paging.
   ========================================================================== */

/* ---------- Nav dropdown (Core Services -> the three lending pages) ------- */
.fin-nav .has-drop{position:relative}
.fin-nav .has-drop > a::before{content:"\25BE";margin-left:7px;font-size:.7em;color:var(--gold-mid);vertical-align:middle}
.fin-nav .drop{
  position:absolute;top:100%;left:0;min-width:236px;
  background:var(--white);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,visibility .2s,transform .2s var(--ease);
}
.fin-nav .has-drop:hover .drop,
.fin-nav .has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.fin-nav .drop a{display:block;padding:10px 13px;border-radius:7px;font-size:.87rem;font-weight:600}
.fin-nav .drop a:hover{background:var(--paper);color:var(--navy)}
.fin-nav .drop a::after{display:none}
.fin-nav .drop a.is-current{background:var(--paper);color:var(--navy)}
.fin-nav .drop a.is-current::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle}

/* Second level: Short-Term Funding opens Working Capital and Bill Discounting
   in a flyout to the right of the dropdown. Same show/hide mechanism as the
   level above, so it opens on hover and on keyboard focus alike. */
.fin-nav .has-sub{position:relative;display:block}
.fin-nav .has-sub > a{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fin-nav .has-sub > a::after{
  content:"\203A";display:inline-block;
  font-size:1.05em;line-height:1;color:var(--gold-mid);
}
.fin-nav .sub{
  position:absolute;top:-8px;left:100%;min-width:196px;
  background:var(--white);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow-lg);padding:8px;margin-left:4px;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .2s,visibility .2s,transform .2s var(--ease);
}
.fin-nav .has-sub:hover > .sub,
.fin-nav .has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:translateX(0)}

/* ---------- Compact hero for interior pages ------------------------------ */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(150deg,var(--ink) 0%,var(--navy) 60%,var(--navy-3) 100%);
  color:var(--mist);padding:clamp(38px,5.5vw,68px) 0 clamp(34px,5vw,58px);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(201,217,236,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,217,236,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 80% at 78% 20%,#000 25%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 78% 20%,#000 25%,transparent 76%);
}
.page-hero h1{color:var(--white);font-size:clamp(1.75rem,4vw,2.7rem);margin-top:14px}
.page-hero__lead{margin-top:16px;max-width:66ch;color:var(--mist);font-size:1.03rem}
.page-hero .btn{margin-top:26px}

/* ---------- Breadcrumb --------------------------------------------------- */
.crumb{font-size:.83rem;color:var(--mist-dim);margin-bottom:16px}
.crumb a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumb a:hover{color:var(--gold);border-color:var(--gold)}
.crumb i{font-style:normal;opacity:.45;margin:0 9px}
.crumb b{color:var(--mist);font-weight:600}

/* ---------- Prev / next pager -------------------------------------------- */
.pager{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:clamp(34px,4vw,52px)}
.pager a{
  display:block;padding:22px 24px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s;
}
.pager a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.pager small{
  display:block;font-size:.71rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-mid);margin-bottom:7px;
}
.pager b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.14rem;color:var(--navy)}
/* when a page has only a "next", it must not stretch across both columns */
.pager a.is-next{grid-column:2;text-align:right}
.pager a.is-prev{grid-column:1}

/* ---------- Home: the dashboard tiles become links ------------------------ */
a.metric{display:block}
a.metric h3::after{
  content:"\2192";display:inline-block;margin-left:.4em;
  color:var(--gold-mid);font-family:var(--font-body);font-weight:700;
  opacity:0;transform:translateX(-6px);
  transition:opacity .28s,transform .28s var(--ease);
}
a.metric:hover h3{color:var(--gold-mid)}
a.metric:hover h3::after{opacity:1;transform:translateX(0)}

/* A short signpost row on the home page for the pages that are not pillars. */
.signpost{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.signpost a{
  display:flex;flex-direction:column;gap:8px;
  padding:26px 24px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s;
}
.signpost a:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.signpost h3{font-size:1.14rem}
.signpost p{font-size:.92rem;color:var(--slate)}
.signpost span{
  margin-top:6px;font-size:.79rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-mid);
}

@media (max-width:1260px){
  /* In the stacked mobile panel the dropdown just lists inline — there is no
     hover to open it on touch. */
  .fin-nav .drop{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;margin:2px 0 6px 14px;padding:0 0 0 8px;min-width:0;
  }
  .fin-nav .has-drop > a::before{display:none}
  .fin-nav .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;margin:2px 0 6px 14px;padding:0 0 0 8px;min-width:0;
  }
  .fin-nav .has-sub > a::after{display:none}
}

@media (max-width:620px){
  .pager{grid-template-columns:1fr}
  .pager a.is-next,.pager a.is-prev{grid-column:1;text-align:left}
}

/* ============================================================================
   13  Hero snapshot panel, funding estimator, compliance notice
   ----------------------------------------------------------------------------
   Added when the section grew from four capital channels to seven and picked up
   an indicative sizing tool. Everything here reuses the existing tokens and the
   .field / .readout / .segmented primitives above rather than inventing a
   second form language.
   ========================================================================== */

/* ---------- Hero: copy beside a snapshot panel --------------------------- */
/* The hero used to be a single column. On wide screens it now runs two, with
   the panel carrying the at-a-glance figures. .hero__inner keeps its own
   max-width for the single-column pages, so nothing else had to change. */
.hero__grid{
  display:grid;gap:clamp(28px,4vw,52px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  align-items:center;
}
.hero__grid .hero__inner{max-width:none}

.hero__panel{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(201,217,236,.2);
  border-radius:var(--radius);
  padding:30px 28px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(3,10,20,.35);
}
.hero__panel-label{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.hero__panel-figure{
  font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.1rem);
  color:var(--white);line-height:1;margin-top:12px;
}
.hero__panel-figure span{color:var(--gold);margin-left:2px}
.hero__panel-note{margin-top:12px;font-size:.88rem;color:var(--mist);line-height:1.6}
.hero__panel-rule{height:1px;background:rgba(201,217,236,.2);margin:22px 0}
.hero__panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.hero__panel-grid dt{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-dim);
}
.hero__panel-grid dd{margin:5px 0 0;font-size:.94rem;font-weight:700;color:var(--white)}

/* ---------- Funding estimator -------------------------------------------- */
/* Same two-column shape as the capital assessment form, so a visitor who has
   seen one recognises the other. */
.est{
  display:grid;gap:clamp(20px,2.6vw,32px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
.est__inputs{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-md);
}
.est__inputs .range-out{color:var(--navy)}

.est__out{
  background:linear-gradient(160deg,var(--navy-2),var(--ink));
  border:1px solid rgba(201,217,236,.16);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);color:var(--mist);
  box-shadow:0 24px 60px rgba(3,10,20,.4);
}
.est__out-label{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.est__out-figure{
  font-family:var(--font-display);font-size:clamp(2.1rem,4vw,2.8rem);
  color:var(--white);line-height:1.05;margin:10px 0 22px;
}
.est__out .readout{margin-bottom:22px}

/* ---------- Compliance notice -------------------------------------------- */
.compliance{background:var(--paper);border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0}
.compliance .shell{max-width:min(880px,92vw);text-align:center}
.compliance h2{
  font-family:var(--font-body);font-weight:800;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
}
.compliance p{margin-top:16px;font-size:.86rem;line-height:1.8;color:var(--slate)}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero__grid .hero__inner{max-width:820px}
  .est{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero__panel-grid{grid-template-columns:1fr}
}

/* ============================================================================
   14  Request Advisory pop-up
   ----------------------------------------------------------------------------
   The same modal the Company Setup pages open from "Get a Free Quote", carried
   over for this section's "Request Advisory" button and recoloured onto the
   navy/gold palette. The form has no back end — like every other form on the
   site it composes a WhatsApp message.
   ========================================================================== */
.sky-modal{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto;
}
.sky-modal.open{display:flex}
.sky-modal__backdrop{position:fixed;inset:0;background:rgba(6,16,29,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sky-modal__card{
  position:relative;z-index:1;width:min(460px,96vw);
  background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:skyPop .3s var(--ease);
}
@keyframes skyPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .sky-modal__card{animation:none} }

.sky-modal__close{
  position:absolute;top:10px;right:12px;z-index:3;
  background:rgba(255,255,255,.92);border:0;width:34px;height:34px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;color:var(--navy);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.sky-modal__close:hover{background:#fff;color:var(--gold-mid)}

/* The banner keeps the setup page's brushed-metal treatment, over this
   section's navy instead of its blue. */
.sky-modal__banner{
  color:#fff;padding:26px 26px 18px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 34%),
    linear-gradient(140deg,var(--steel) 0%,var(--navy-3) 38%,var(--navy) 70%,var(--ink) 100%);
}
.sky-modal__banner .smb-kick{
  color:var(--gold);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;
}
.sky-modal__banner h3{color:#fff;font-family:var(--font-display);font-size:1.5rem;margin:6px 0}
.sky-modal__banner p{color:var(--mist);font-size:.9rem}
.sky-modal__badges{
  display:flex;gap:18px;flex-wrap:wrap;
  background:var(--ink);color:var(--mist);padding:11px 26px;font-size:.8rem;
}

.sky-modal__form{background:transparent}
.sky-modal__form .hf-body{padding:22px 26px 26px}
.sky-modal__form input,
.sky-modal__form select,
.sky-modal__form textarea{
  width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;
  padding:12px 2px;margin-bottom:16px;
  font-family:var(--font-body);font-size:.95rem;color:var(--slate-dk);
}
.sky-modal__form input::placeholder,
.sky-modal__form textarea::placeholder{color:var(--mist-dim)}
.sky-modal__form input:focus,
.sky-modal__form select:focus,
.sky-modal__form textarea:focus{outline:none;border-bottom-color:var(--steel)}
.sky-modal__form select{cursor:pointer}
.sky-modal__form textarea{resize:vertical;min-height:60px}
.sky-modal__form .hf-phone{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--line);margin-bottom:16px}
.sky-modal__form .hf-phone .hf-cc{white-space:nowrap;color:var(--slate-dk);font-weight:600;font-size:.95rem}
.sky-modal__form .hf-phone input{border:0;margin:0;flex:1}
.sky-modal__form .hf-note{font-size:.72rem;color:var(--slate);text-align:center;margin:2px 0 16px}
.sky-modal__form .hf-submit{
  width:100%;border:0;padding:15px;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),#e0ae55);color:var(--ink);
  font-family:var(--font-body);font-weight:800;font-size:1.02rem;
  box-shadow:0 12px 26px rgba(242,200,121,.45);
  transition:filter .2s,transform .2s;
}
.sky-modal__form .hf-submit:hover{filter:brightness(1.07);transform:translateY(-2px)}