/* Iceberg Advisory
 *
 * Rebuilt 20-Sep-2026 around the Northington Partners pattern, which is the
 * one the owner picked after the previous design was rejected.
 *
 * The single structural rule, and the reason for the rebuild: the photograph
 * lives in the hero and nowhere else. Body text never sits on it. The old
 * site fixed a photo behind the whole page and re-coloured every block of
 * type from the luminance of the ice behind it, which was clever and which
 * topped out at 3.6:1 against a 4.5:1 standard -- the contrast was whatever
 * the picture happened to be doing at that scroll position. Here a fixed
 * gradient scrim sits over the hero image, so the only type on a photograph
 * is one headline over a known background, and everything below is ink on
 * white or white on solid navy. scene.js and the luminance maps go with it.
 *
 * Type: Archivo at 600 for display, IBM Plex Sans for text. Both are a long
 * way from the previous Barlow Condensed at 600 -- condensed bold reads
 * industrial, and this is a finance practice.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* navy and teal are the logo's own colours */
  --navy:#01132C; --navy-2:#0a2140;
  --berg:#2a5071;          /* dark blue of the logo's iceberg: icons */
  --teal:#3E8C9C; --teal-d:#2d6b79; --teal-l:#e9f2f4; --teal-pale:#8fd0dc;

  --ink:#16202b;          /* headings */
  --body:#41505f;         /* body copy */
  --mute:#5f6b77;         /* secondary - dark enough for 4.5:1 on white AND on --bg-alt */
  --line:#e2e6ea; --line-2:#eef1f3;
  --bg:#ffffff; --bg-alt:#eef4f6;

  /* Archivo is a grotesque rather than a geometric, which reads closer to the
     financial press than to a software product. IBM Plex Sans carries the text
     and the numbers -- it was drawn for an institutional voice and its tabular
     figures are why the market tables line up. Montserrat and Inter were the
     first pass and both are so widely used they read as defaults. */
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;   /* display: matches the logo's "Iceberg" */
  --text:"IBM Plex Sans",system-ui,-apple-system,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --s3:12px; --s4:18px; --s6:30px; --s8:46px; --s10:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:var(--text);font-size:16.5px;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);color:var(--ink);
  font-weight:600;line-height:1.14;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:var(--teal-d)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);
  color:#fff;padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ── header ──────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.site-head .in{max-width:var(--wrap);margin:0 auto;padding:9px var(--gut);
  display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto}
/* The mark is the supplied logo's iceberg; the name is live text set to match it. */
.brand img{height:44px;width:auto;display:block}
.brand .word{display:block;border-left:1.5px solid #07224a;padding-left:14px}
.brand .w{display:block;font-family:var(--serif);font-weight:600;font-size:36px;
  font-variation-settings:"opsz" 60;line-height:1;letter-spacing:.012em;color:#07224a;padding-bottom:11px}
/* "ADVISORY" is set letter by letter and spread under "Iceber" only, so it
   stops short of the g and the descender hangs clear beside it. */
.brand .ice{position:relative;display:inline-block}
.brand .s{position:absolute;left:2px;right:4px;top:calc(100% - 1px);display:flex;justify-content:space-between;
  font-family:var(--text);font-size:11px;font-weight:400;line-height:1;letter-spacing:0;color:#4f86ad}
.brand .s i{font-style:normal}
@media (max-width:600px){.brand img{height:42px}.brand .w{font-size:31px}}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a:not(.btn){font-size:16px;font-weight:500;color:var(--ink);text-decoration:none}
.site-nav a{white-space:nowrap}
@media (max-width:1040px){.site-nav{gap:18px}}
.site-nav a:not(.btn):hover{color:var(--teal-d)}
.site-nav a[aria-current="page"]{color:var(--teal-d);
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
@media (max-width:880px){
  .site-nav{gap:16px}
  .site-nav a:not(.btn){display:none}
}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--text);font-size:14.5px;font-weight:600;
  padding:11px 20px;border-radius:3px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--teal-d);color:#fff}
.btn-primary:hover{background:#22535e}
.btn-secondary{background:transparent;color:var(--ink);border-color:#c9d1d8}
.btn-secondary:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--teal-l)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s6)}

/* ── hero: the only place a photograph appears ───────────────────── */
.hero{position:relative;display:flex;align-items:center;background:var(--navy);
  overflow:hidden;min-height:calc(100vh - 71px);min-height:calc(100svh - 71px)}
/* Underwater only: the photo is lifted so the hero starts just below the
   surface waves. Photos are 1843x3225 (1.75x taller than wide); --wl is where
   the waterline falls, from the top, and .04 clears the wave band. The image is
   never narrower than needed to fill a tall phone screen. */
.hero{--wl:.30;--iw:max(100vw, calc((100svh - 71px) * .95))}
.hero[data-photo=berg-buyside]{--wl:.248}
.hero[data-photo=berg-debt]{--wl:.36}
.hero>img{position:absolute;left:50%;transform:translateX(-50%);width:var(--iw);max-width:none;
  height:auto;top:calc(-1 * (var(--wl) + .04) * 1.75 * var(--iw))}
/* Fixed gradient, not a measurement of the picture, so the headline's contrast
   is known when the CSS is written rather than at the reader's scroll position. */
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(1,19,44,.30) 0%,rgba(1,19,44,.62) 30%,rgba(1,19,44,.68) 66%,
  rgba(1,19,44,.90) 86%,rgb(1,19,44) 100%)}
.hero .in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(36px,5vh,64px) var(--gut);display:grid;gap:26px;align-items:center}
@media (min-width:920px){.hero .in{grid-template-columns:1.12fr .88fr;gap:46px}}
.hero h1{color:#fff;font-size:clamp(31px,4.5vw,54px);max-width:18ch}
.hero .lede{color:#dbe6ee;font-size:clamp(16px,1.3vw,18.5px);max-width:48ch}
.hero .btn-row{margin-top:26px}
/* Contact: the hero is the whole page, so the details live in it. The scrim is
   held darker higher up because the type climbs further than a lone headline. */
.hero.contact .scrim{background:linear-gradient(180deg,rgba(1,19,44,.34) 0%,rgba(1,19,44,.62) 26%,
  rgba(1,19,44,.86) 52%,rgba(1,19,44,.97) 84%,rgb(1,19,44) 100%)}
.hero.contact{align-items:center;min-height:calc(100vh - 71px);min-height:calc(100svh - 71px)}
.hero.contact .in{align-items:center;padding-bottom:clamp(36px,6vh,72px);padding-top:clamp(36px,6vh,72px)}
.hero.contact .lede{margin-top:var(--s4)}
.reach{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.22)}
.reach li{display:grid;grid-template-columns:6rem 1fr;align-items:baseline;gap:12px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.22);
  font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.6vw,21px);color:#fff;overflow-wrap:anywhere}
.reach span{font-family:var(--text);font-size:15.5px;font-weight:400;color:#dbe6ee}
.reach a{color:#fff;text-decoration:underline;text-decoration-color:rgba(143,208,220,.6);
  text-underline-offset:5px;text-decoration-thickness:1px}
.reach a:hover{text-decoration-color:#fff}
.reach a:focus-visible{outline:2px solid var(--teal-pale);outline-offset:4px}
.portrait{margin:0;max-width:380px;justify-self:end;width:100%}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.portrait figcaption{margin-top:12px;font-size:14px;color:#dbe6ee}
@media (max-width:520px){.reach li{grid-template-columns:1fr;gap:2px;padding:13px 0}}
@media (max-width:919px){.portrait{justify-self:start;max-width:260px;order:-1}}
/* The waterline. Where the title gives way to a dark section, a hairline
   across the page and a faint light beneath it mark the break, as the
   surface does in the photograph above. */
.hero:has(+main>.sec.dark:first-child)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(143,208,220,0),rgba(143,208,220,.42) 20%,rgba(143,208,220,.42) 80%,rgba(143,208,220,0))}
.hero+main>.sec.dark:first-child{padding-top:clamp(44px,5.5vw,72px);
  background-image:radial-gradient(ellipse 70% 220px at 50% 0,rgba(143,208,220,.08),rgba(143,208,220,0))}

/* ── navy statement band ─────────────────────────────────────────── */
.band{background:var(--navy);color:#cfdce6;padding:clamp(50px,7vw,82px) 0}
/* Straight after the hero, the band continues it rather than starting a new block. */
.hero+main>.band:first-child{padding-top:8px}
.hero+main>.band:first-child .facts{margin-top:0}
.band h2{color:#fff;font-size:clamp(24px,3vw,37px);max-width:24ch}
.band p{margin-top:var(--s4);max-width:62ch;font-size:17px}
.band p+p{margin-top:var(--s4)}
.band a{color:var(--teal-pale)}
.band .kicker{color:var(--teal-pale)}

/* The numbers row. General by instruction -- shape of the practice, never a
   named client or a specific transaction. */
.facts{display:grid;gap:26px;margin-top:var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s6)}
.fact b{display:block;font-family:var(--serif);font-size:clamp(25px,3vw,34px);
  font-weight:600;color:var(--teal-pale);line-height:1}
.fact span{display:block;font-size:13.5px;color:#9fb2c2;margin-top:9px;line-height:1.45}

/* ── sections ────────────────────────────────────────────────────── */
.sec{padding:clamp(40px,5vw,64px) 0}
.sec.alt{background:var(--bg-alt);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
/* Dark section: the first section after every hero, so the photo fades into
   navy before the page turns white, as the home page does. Components read
   their colours from these tokens, so they re-theme without extra rules. */
.sec.dark{background:var(--navy);color:var(--body);padding-top:clamp(30px,4vw,48px);
  --ink:#fff;--body:#cfdce6;--mute:#a9bccb;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.08)}
.sec.dark .kicker,.sec.dark .item-n,.sec.dark a:not(.btn),.sec.dark .pledges svg{color:var(--teal-pale)}
.sec.dark .item,.sec.dark .card{background:var(--navy-2)}
.sec.dark .btn-secondary{border-color:rgba(255,255,255,.4)}
.sec.dark .btn-secondary:hover{border-color:#fff}
.kicker{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-d);margin-bottom:var(--s3)}
.sec h2{font-size:clamp(24px,3vw,37px);max-width:26ch}
.sec h3{font-size:clamp(19px,1.9vw,24px);margin-top:var(--s8);margin-bottom:var(--s3)}
.lede{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--body);max-width:62ch}
.sec .lede{margin-top:var(--s4)}
.sec p+p{margin-top:var(--s4)}
.muted{color:var(--mute)}
.small{font-size:14px}
.narrow{max-width:68ch}
/* Statement on the left, one supporting point set apart on the right. */
/* Columns match the hero's, so the aside lines up with the hero lede above. */
.split{display:grid;gap:30px;margin-top:var(--s4)}
.sec .split .lede{margin-top:0}
.split .muted{margin-top:var(--s4);max-width:58ch}
.split .aside{position:relative;border-top:1px solid var(--line);padding-top:30px}
.split .aside h3{margin-top:0}
.split .aside p{color:var(--body)}
@media (min-width:920px){.split{grid-template-columns:1.12fr .88fr;gap:46px}
  .split .aside{border-top:0;padding-top:0}
  .split .aside::before{content:"";position:absolute;left:-23px;top:0;bottom:0;border-left:1px solid var(--line)}}

/* ── cards ───────────────────────────────────────────────────────── */
.cards{display:grid;gap:22px;margin-top:var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:28px 26px;display:flex;flex-direction:column}
.card h3{font-size:20px;margin:0 0 var(--s3)}
.card p{font-size:15.5px;flex:1}
.card .go{margin-top:var(--s4);font-size:14.5px;font-weight:600;text-decoration:none}
.card .go:hover{text-decoration:underline}

.items{display:grid;gap:1px;margin-top:var(--s8);background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));border:1px solid var(--line)}
/* Four items sit in one row (two on tablets) so the grid never leaves an empty cell. */
@media (min-width:640px){.items:has(>.item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.items:has(>.item:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}
.item{background:#fff;padding:28px 24px;border-top:3px solid transparent;transition:border-color .2s}
.item:hover{border-top-color:var(--teal)}
.item-n{display:block;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;
  color:var(--teal);margin-bottom:14px}
.item-i{display:block;color:var(--berg);margin-bottom:16px;line-height:0}
.item-i svg{width:40px;height:40px}
.sec.dark .item-i{color:#9cc3e0}
.item :is(h3,h4){font-size:17.5px;margin:0 0 9px}
.item p{font-size:15px;color:var(--mute);line-height:1.55}

/* ── capability grid: industries, sizes, structures, client types ── */
/* Deliberately general. No client, no deal, no transaction -- owner's rule,
   20-Sep-2026. What a reader gets is the shape of the practice. */
.caps{display:grid;gap:var(--s6) 34px;margin-top:var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.cap :is(h3,h4){margin-top:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-d);margin-bottom:var(--s3);padding-bottom:10px;
  border-bottom:2px solid var(--teal-l)}
.cap ul{list-style:none}
.cap li{font-size:15px;padding:7px 0;border-bottom:1px solid var(--line-2);color:var(--body)}
.cap li:last-child{border-bottom:0}

/* ── numbered steps ──────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:s;margin-top:var(--s8)}
.steps li{counter-increment:s;position:relative;padding:0 0 var(--s6) 52px;
  border-left:1px solid var(--line);margin-left:16px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;
  left:-16px;top:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--teal-l);color:var(--teal-d);
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.steps :is(h3,h4){font-size:18px;margin:0 0 8px}
.steps p{font-size:15.5px;color:var(--mute)}

/* ── question rows ───────────────────────────────────────────────── */
.rows{list-style:none;margin-top:var(--s8);border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:grid;gap:6px;padding:20px 0;text-decoration:none;color:inherit}
@media (min-width:760px){.rows a{grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}}
.rows .q{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);display:flex;align-items:center;gap:14px}
.rows .qi{display:block;flex:none;color:var(--berg);line-height:0}
.rows .qi svg{width:32px;height:32px}
/* Duotone: the tinted shape carries the icon's main form, strokes the detail. */
svg .f{fill:currentColor;fill-opacity:.22}
.rows .a{font-size:16px;color:var(--body)}
.rows a:hover .q{color:var(--teal-d)}
.rows a:hover .a{color:var(--body)}

/* ── service cards: icon tile, summary, scope ticks, whole card is the link ── */
.svc-grid{display:grid;gap:24px;margin-top:var(--s8)}
@media (min-width:760px){.svc-grid{grid-template-columns:1fr 1fr}}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:34px 32px 30px;text-decoration:none;color:var(--body);
  box-shadow:0 1px 2px rgba(1,19,44,.04),0 10px 28px -16px rgba(1,19,44,.18);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1),border-color .25s}
.svc:hover{transform:translateY(-3px);border-color:#cfe2e6;
  box-shadow:0 2px 4px rgba(1,19,44,.05),0 18px 40px -18px rgba(1,19,44,.28)}
.svc .ico{display:block;color:var(--berg);margin-bottom:20px;line-height:0}
.svc .ico svg{width:44px;height:44px}
.svc h3{font-size:22px;margin:0 0 var(--s3)}
.svc p{font-size:15.5px;line-height:1.6}
.ticks{list-style:none;margin-top:18px;display:grid;gap:9px}
.ticks li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink)}
.ticks svg{width:17px;height:17px;flex:none;color:var(--teal);stroke-width:2.25}
.svc .go{margin-top:auto;padding-top:22px;font-size:14.5px;font-weight:600;color:var(--teal-d)}
.svc:hover .go{text-decoration:underline}
.sec.dark .svc{background:var(--navy-2)}

/* ── pledges: short commitments, three across, divided by hairlines ── */
.pledges{list-style:none;display:grid;margin-top:var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--line)}
.pledges li{padding:26px 28px 26px 0;border-bottom:1px solid var(--line)}
@media (min-width:780px){.pledges li{border-bottom:0}.pledges li+li{padding-left:28px;border-left:1px solid var(--line)}}
.pledges svg{width:22px;height:22px;color:var(--teal);display:block;margin-bottom:14px}
.pledges b{display:block;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);margin-bottom:6px}
.pledges span{font-size:15px;color:var(--mute);line-height:1.55}

/* ── panel ───────────────────────────────────────────────────────── */
/* An editorial aside, not a box: hairlines above and below, larger ink type. */
.panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;margin-top:var(--s8)}
.panel :is(h3,h4){font-size:19px;margin:0 0 var(--s3)}
.panel p{font-size:18px;line-height:1.6;color:var(--ink);max-width:68ch}
.panel p+p{margin-top:10px}

/* ── market strip ────────────────────────────────────────────────── */
#market .mkt-curve{display:grid;gap:1px;margin-top:var(--s6);background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));border:1px solid var(--line)}
.mkt-cell{background:#fff;padding:18px 20px}
.mkt-cell .l{display:block;font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.mkt-cell .v{font-family:var(--sans);font-weight:600;font-size:25px;line-height:1;color:var(--ink)}
.mkt-cell.lead{background:var(--navy)}
.mkt-cell.lead .l{color:var(--teal-pale)}
.mkt-cell.lead .v{color:#fff;font-size:29px}

.scroll-x{overflow-x:auto;margin-top:var(--s6);-webkit-overflow-scrolling:touch}
.mkt-tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.mkt-tbl th{text-align:left;font-family:var(--text);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
  padding:0 16px 10px 0;border-bottom:2px solid var(--line);white-space:nowrap}
.mkt-tbl td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line-2);color:var(--body)}
.mkt-tbl tr:last-child td{border-bottom:0}
.mkt-tbl .num,.mkt-tbl th.num{text-align:right;padding-right:0}
.mkt-tbl td:last-child,.mkt-tbl th:last-child{padding-right:0}
.mkt-name{color:var(--ink);font-weight:500}
.grade{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.04em;padding:2px 7px;border:1px solid var(--line);border-radius:2px;
  color:var(--mute)}

/* ── forms ───────────────────────────────────────────────────────── */
.enq{max-width:30rem;margin-top:var(--s8)}
.field{margin-bottom:var(--s4)}
.field>label{display:block;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:6px}
.input{width:100%;min-height:44px;padding:10px 13px;font:inherit;font-size:15.5px;
  color:var(--ink);background:#fff;border:1px solid #c9d1d8;border-radius:3px}
.input::placeholder{color:#9aa6b1}
.input:focus-visible{border-color:var(--teal);outline:2px solid var(--teal-l);outline-offset:0}
textarea.input{min-height:120px;resize:vertical}
/* Off-screen rather than display:none -- bots skip hidden fields far more
   often than they skip a field that is merely somewhere else. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── closing call to action ──────────────────────────────────────── */
.cta{background:var(--teal-d);color:#fff;padding:clamp(46px,6vw,74px) 0;text-align:center}
.cta h2{color:#fff;font-size:clamp(24px,3vw,37px);margin:0 auto;max-width:22ch}
.cta p{margin:var(--s4) auto 0;max-width:52ch;color:#eaf4f6}
.cta .btn-row{justify-content:center}

/* ── live market block (Free tools) ─────────────────────────────── */
/* Three categorical slots, in this fixed order, checked for colour-blind
   separation. The brand's own blues and teals are too close to one another
   to tell lines apart, so the charts use these and nothing else. */
:root{--c1:#2767b0;--c2:#d9822b;--c3:#1a9a8a}
.mkt{margin-top:var(--s8);opacity:0;transition:opacity .4s ease}
.mkt.on{opacity:1}
@media (prefers-reduced-motion:reduce){.mkt{transition:none}}
.mkt-asat{font-size:13px;color:var(--mute)}
.mkt-asat::before{content:"";display:inline-block;vertical-align:1px;width:7px;height:7px;margin-right:9px;
  border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(62,140,156,.2)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:14px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;padding:18px 22px 20px}
.kpi-l{display:block;font-size:13px;color:var(--mute)}
.kpi-v{display:block;margin-top:4px;font-weight:600;font-size:clamp(26px,3vw,34px);line-height:1.15;
  color:var(--ink);letter-spacing:-.01em;font-variant-numeric:proportional-nums}
.charts{display:grid;gap:22px;margin-top:22px}
.chart{margin:0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 22px 16px}
.chart figcaption h3{font-size:18px;margin:0}
.chart figcaption p{font-size:14px;color:var(--mute);margin-top:4px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px;color:var(--body)}
.lg{display:inline-flex;align-items:center;gap:7px}
.lg-line{width:16px;height:2px;border-radius:2px;background:var(--k)}
.lg-area{width:14px;height:10px;border-radius:2px;border:2px solid var(--k);
  background:color-mix(in srgb,var(--k) 14%,#fff)}
.plot{position:relative;margin-top:10px}
.svg{display:block;overflow:visible;font-family:var(--text);touch-action:pan-y}
.svg:focus{outline:none}
.svg:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}
.svg .grid{stroke:var(--line)}
.svg .ax{stroke:#c3cad1}
.svg .tick{font-size:11.5px;fill:var(--mute)}
.svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.svg .dot{stroke:#fff;stroke-width:2}
.svg .dot.on{stroke:var(--ink);stroke-width:1.5}
.svg .hair{stroke:#9aa5b0;stroke-width:1}
.svg .end{font-size:12.5px}
.svg .end-v{fill:var(--ink);font-weight:600}
.svg .end-n{fill:var(--mute)}
.svg .row-n{font-size:14px;font-weight:600;fill:var(--ink)}
.svg .row-m{font-size:12px;fill:var(--mute)}
.svg .row-rule{stroke:var(--line-2)}
/* a halo, so a row label reads cleanly where it crosses a gridline */
.svg .row-n,.svg .row-m{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.tip{position:absolute;z-index:2;pointer-events:none;min-width:150px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 22px rgba(1,19,44,.12);
  padding:10px 12px;font-size:13px;line-height:1.5}
.tip-h{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}
.tip-r{display:flex;align-items:center;gap:8px}
.tip-r strong{min-width:44px;font-weight:600;color:var(--ink)}
.tip-r span{color:var(--mute)}
.tip-k{flex:none;width:12px;height:2px;border-radius:2px}
.tip-s{display:block;color:var(--mute)}
.tbl{margin-top:12px}
.tbl summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--teal-d)}
.data{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.data th,.data td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line-2)}
.data th:first-child,.data td:first-child{text-align:left}
.data th{font-weight:600;color:var(--ink)}
/* The charts' data as tables, for screen readers only. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Chart cards and figure tiles always read light, even inside a dark
   section, so they carry the light-theme tokens themselves. */
.chart,.kpis{--ink:#16202b;--body:#41505f;--mute:#5f6b77;--line:#e2e6ea;--line-2:#eef1f3}
.sec.dark .chart a{color:var(--teal-d)}
.kpi-s{display:block;margin-top:2px;font-size:12.5px;color:var(--mute)}
.dp{margin-top:var(--s8);opacity:0;transition:opacity .4s ease}
.dp.on{opacity:1}
@media (prefers-reduced-motion:reduce){.dp{transition:none}}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* The summary board: pairs on phones (the odd one out full width), one row above */
.kpis--row .kpi:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:760px){.kpis--row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
  .kpis--row .kpi:last-child:nth-child(odd){grid-column:auto}}
.dp-maps{display:grid;gap:22px;margin-top:22px}
@media (min-width:900px){.dp-maps{grid-template-columns:1fr 1fr}
  .dp-maps:has(>[hidden]){grid-template-columns:1fr}}
.dp-mapcard{position:relative;display:flex;flex-direction:column}
/* The map outline's licence asks for a credit: kept, but out of the way */
.dp-credit{position:absolute;right:14px;bottom:12px;width:18px;height:18px;padding:0;border-radius:50%;
  border:1px solid #c3cad1;background:#fff;color:var(--mute);font:italic 600 11px/16px var(--serif);cursor:help}
.dp-credit::after{content:attr(data-credit);position:absolute;right:-4px;bottom:26px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px 9px;font:400 12px/1.4 var(--text);
  color:var(--body);box-shadow:0 6px 22px rgba(1,19,44,.12);opacity:0;visibility:hidden;transition:opacity .15s}
.dp-credit:hover::after,.dp-credit:focus-visible::after,.dp-credit:focus::after{opacity:1;visibility:visible}
/* Listings by sector: a bar for the count, the median ask beside it */
.bars{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14.5px;margin-top:14px}
.bars th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-d);padding:0 8px 10px;border-bottom:1px solid var(--line)}
/* names right-aligned so each sits against its own bar */
.bars th.b-sec{width:170px}
.bars .b-sec{text-align:right}
.bars th.b-med{width:92px}
.bars td{padding:5px 8px;color:var(--body)}
.bars tbody tr:first-child td{padding-top:12px}
.bars tbody tr{transition:background .15s}
.bars tbody tr:hover{background:var(--bg-alt)}
.bars .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bars td.b-sec a{text-decoration:none;font-weight:500}
.bars td.b-sec a:hover{text-decoration:underline}
.bars td.b-bar{white-space:nowrap}
.bars td.b-bar i{display:inline-block;vertical-align:middle;height:14px;min-width:3px;border-radius:0 4px 4px 0;
  background:var(--berg);width:calc((100% - 52px) * var(--p))}
.bars td.b-bar b{display:inline-block;vertical-align:middle;margin-left:8px;font-size:13px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
/* Phones: the sector and its median ask on one line, the bar beneath */
@media (max-width:640px){
  .bars thead{display:none}
  .bars,.bars tbody{display:block}
  .bars tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:7px 0}
  .bars td,.bars tbody tr:first-child td{display:block;padding:0}
  .bars .b-sec{text-align:left}
  .bars td.b-bar{grid-column:1/-1;grid-row:2;padding-top:5px}
}
@media (prefers-reduced-motion:reduce){.bars tbody tr{transition:none}}
.dp-plot{flex:1;display:flex;flex-direction:column;justify-content:center;margin-top:18px}
.dp>.chart{margin-top:22px}
.mult-wrap{margin-top:12px}
.mult{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px}
.mult th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-d);padding:0 12px 12px;border-bottom:1px solid var(--line)}
.mult td{padding:10px 12px;border-bottom:1px solid var(--line-2);color:var(--body)}
.mult tbody tr{transition:background .15s}
.mult tbody tr:hover{background:var(--bg-alt)}
.mult tr:last-child td{border-bottom:0}
.mult .num{text-align:right;white-space:nowrap}
.mult td.m-e{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink)}
.mult td.m-rev{color:var(--body)}
.mult td.m-n{color:var(--mute)}
.mult th.m-sector{width:24%}
.mult th.m-e{width:118px}
.mult th.m-rev{width:108px}
.mult th.m-n{width:96px}
.mult td.m-strip{padding-top:6px;padding-bottom:6px}
.mult .m-sector{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mult .m-sector a{text-decoration:none;color:var(--ink);font-weight:500}
.mult .m-sector a:hover{color:var(--teal-d);text-decoration:underline}
/* Phones: each sector on one line with its multiple, the spread beneath */
@media (max-width:640px){
  .mult thead{display:none}
  .mult,.mult tbody{display:block}
  .mult tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;
    padding:10px 0;border-bottom:1px solid var(--line-2)}
  .mult tr:last-child{border-bottom:0}
  .mult td{display:block;padding:0;border:0}
  .mult td.m-strip{grid-column:1/-1;grid-row:2;padding:6px 0 0}
  .mult td.m-rev,.mult td.m-n{display:none}
  .mult .m-sector{white-space:normal}
}

/* Business Borrowing: the analysis, with the market pages beneath it */
.bb-grid{display:grid;gap:22px;margin-top:var(--s8)}
.bb-cta h3{margin:0;font-size:20px}
.link-list{flex:1;display:flex;flex-direction:column;list-style:none;margin-top:16px}
/* Three equal bands when the card is stretched beside the taller panel */
.link-list li{flex:1;display:flex}
.link-list li>a{flex:1}
.link-list a{display:grid;grid-template-columns:36px 1fr auto;gap:16px;align-items:center;
  margin:0 -12px;padding:15px 12px;border-top:1px solid var(--line-2);border-radius:4px;
  text-decoration:none;color:inherit;transition:background .15s}
.link-list a:hover{background:var(--bg-alt)}
.ll-i{color:var(--berg);line-height:0}
.ll-i svg{width:32px;height:32px}
.ll-t b{display:block;font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink)}
.ll-t span{display:block;margin-top:1px;font-size:14px;color:var(--mute)}
.ll-go{font-size:18px;color:var(--teal-d);transition:transform .15s}
.link-list a:hover .ll-go{transform:translateX(3px)}
.bb-cta{position:relative;overflow:hidden;background:var(--navy);border-radius:6px;padding:28px 28px 30px;color:#cfdce6}
.bb-cta h3{color:#fff}
.bb-cta-text>p{margin-top:6px;max-width:34ch}
.bb-cta .ticks li{color:#e8eff5}
.bb-cta .ticks svg{color:var(--teal-pale)}
.bb-cta .ticks{grid-template-columns:repeat(2,max-content);column-gap:28px}
@media (max-width:520px){.bb-cta .ticks{grid-template-columns:1fr}}
/* Snapshots of Business Borrowing's worked examples: one at a time, A to E */
.bb-shots{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
@media (min-width:1000px){.bb-cta{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;padding:34px}
  .bb-shots{margin-top:0;padding-top:0;border-top:0}
  .bb-cta .ticks{grid-template-columns:1fr}}
.bb-shots-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bb-shots-k{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-pale)}
.bb-tabs{display:flex;gap:6px}
.bb-tabs button{width:34px;height:34px;border-radius:4px;border:1px solid rgba(255,255,255,.28);background:transparent;
  color:#e8eff5;font:600 14px/1 var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.bb-tabs button:hover{border-color:#fff}
.bb-tabs button[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--navy)}
.bb-shot{margin:14px 0 0}
.bb-shot a{display:block;border-radius:5px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.bb-shot a:hover{transform:translateY(-2px)}
.bb-shot img{display:block;width:100%;height:auto;background:#f2f2f2}
.bb-shot figcaption{margin-top:10px;font-size:13px;color:#a9bccb}
@media (prefers-reduced-motion:reduce){.bb-tabs button,.bb-shot a{transition:none}}
@media (prefers-reduced-motion:reduce){.link-list a,.ll-go{transition:none}}

.dp-map{display:block;margin:0 auto;max-width:330px}
.dp-plot[data-country="AU"] .dp-map{max-width:460px}
.svg .dp-region{cursor:default}
/* the far southern islands lie outside the frame: keep them out of the page */
.svg.dp-map{overflow:hidden}
.dp-key{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:12px;color:var(--mute)}
.dp-key i{width:110px;height:8px;border-radius:4px}
.svg .dp-region{stroke:#fff;stroke-width:1.4;transition:fill .15s}
.svg .dp-region.on{stroke:var(--navy);stroke-width:2}
.seg{display:inline-flex;border:1px solid rgba(255,255,255,.28);border-radius:4px;padding:2px}
.seg button{border:0;background:transparent;color:#cfdce6;font:600 13px/1 var(--text);padding:9px 14px;border-radius:3px;cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff}
.seg button:focus-visible{outline-color:var(--teal-pale)}
@media (prefers-reduced-motion:reduce){.seg button{transition:none}}
.bb-shots-head .seg{margin-left:auto}
.bb-market{margin-top:32px}
.bb-cta .link-list{margin-top:8px}
.bb-cta .link-list a{grid-template-columns:24px 1fr auto;gap:14px;margin:0;padding:13px 0;border-top-color:rgba(255,255,255,.12)}
.bb-cta .link-list a:hover{background:none}
.bb-cta .link-list a:hover .ll-t b{color:var(--teal-pale)}
.bb-cta .ll-i{color:var(--teal-pale)}
.bb-cta .ll-i svg{width:24px;height:24px}
.bb-cta .ll-t b{font-size:16px;color:#fff}
.bb-cta .ll-t span{font-size:13.5px;color:#a9bccb}
.bb-cta .ll-go{color:var(--teal-pale)}
.bb-shot a{background:#f2f2f2;padding:10px}
/* The same tile on a dark section: a shade lighter, so it still reads as a tile */
.sec.dark .bb-cta{background:var(--navy-2);border:1px solid rgba(255,255,255,.08)}
@media (min-width:1000px){.dp-cta{grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
.dp-cta .bb-cta-text>p{max-width:36ch}
/* How it works, as a numbered rail */
.dp-steps{list-style:none;margin-top:24px;display:grid;gap:22px;counter-reset:step}
.dp-steps li{position:relative;padding-left:46px;counter-increment:step}
.dp-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(143,208,220,.5);color:var(--teal-pale);font:600 13px/28px var(--text);text-align:center}
.dp-steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:34px;bottom:-20px;width:1px;
  background:rgba(255,255,255,.14)}
.dp-steps b{display:block;color:#fff;font-weight:600;font-size:16px}
.dp-steps span{display:block;margin-top:2px;font-size:14.5px;color:#a9bccb}

.tile{background:var(--navy);border-radius:6px;padding:clamp(28px,4vw,48px);color:#cfdce6}
.tile .kicker{color:var(--teal-pale)}
.tile h2{color:#fff}
.tile .lede{color:#cfdce6}
@media (min-width:900px){.tile--split{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
  .tile--split .btn-row{margin-top:0}}

.btn-logo{display:inline-flex;align-items:center;gap:10px}
.btn-logo img{width:20px;height:20px}
/* Stacked logo buttons share one width, with their marks in line */
.btn-row:has(>.btn-logo){display:inline-grid;grid-template-columns:1fr}
.btn-row>.btn-logo{justify-content:flex-start}
.svc .ico img{width:44px;height:44px}

/* ── footer ──────────────────────────────────────────────────────── */
/* ── foot photo: the bottom of the hero's iceberg, behind the footer ── */
.berg-foot{position:absolute;inset:0;overflow:hidden}
/* Each photo's tip sits at a different depth. --tip is the empty water below
   the tip, as a fraction of the image width (measured per photo), so pushing
   the image that far below the footer lands every tip 36px above its edge. */
.berg-foot{--tip:.1758;container-type:inline-size}
.berg-foot[data-photo=berg-buyside]{--tip:.1131}
.berg-foot[data-photo=berg-debt]{--tip:.1237}
.berg-foot[data-photo=berg-experience]{--tip:.0854}
.berg-foot img{position:absolute;left:0;width:100%;height:auto;bottom:calc(36px - var(--tip) * 100cqw)}
.berg-foot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(1,19,44,.45) 0%,rgba(1,19,44,.55) 60%,rgba(1,19,44,.6) 100%)}
.site-foot>.wrap{position:relative}
.site-foot{position:relative;overflow:hidden;background:var(--navy);color:#8ea3b5;padding:var(--s10) 0 34px;font-size:14.5px}
.site-foot a{color:#c3d3df;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.foot-grid h2{font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-pale);margin:0 0 14px}
.foot-grid p+p{margin-top:var(--s4)}
.foot-links{list-style:none}
.foot-links li{margin-bottom:8px}
.foot-fine{margin-top:var(--s8);padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  font-size:12.5px;color:#6d8296}
.foot-fine p+p{margin-top:10px}

@media print{
  .site-head,.cta,.btn-row{display:none}
  body{color:#000;font-size:11pt}
  .hero{min-height:0}
  .hero>img,.hero .scrim,.berg-foot{display:none}
}