/* ==========================================================================
   Royal Financial Group — Homepage premium layer (institutional redesign)
   Loaded ONLY on index.html, after style.css. Adds new components for the
   redesigned homepage sections. Does not redeclare or override brand tokens,
   header, nav, footer or the hero video/background — it reuses the
   variables and primitives already defined in style.css (--navy, --blue,
   --charcoal, --white, --border, --radius, --shadow-*, .section, .btn,
   .eyebrow, .lede, .imgband …) so every new section inherits the same
   light-corporate system.
   ========================================================================== */
 
.icon{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
 
/* ---------- Hero content redesign (video/background untouched) ---------- */
.hm-hero__inner{padding-block:clamp(48px,7vw,84px);}
.hm-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center;}
.hm-hero__label{color:#BFE0F5;}
.hm-hero__headline{margin-top:6px;}
.hm-hero__cta{margin-top:28px;}
.hm-trustlist{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px 26px;}
.hm-trustlist li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.88);}
.hm-trustlist .icon{width:15px;height:15px;color:#7FD9A6;flex:none;}
 
/* The shared .btn--outline-ink (blue border + blue text) is built for
   light backgrounds elsewhere on the site. On this photo hero it sits on
   a similarly blue-toned night skyline and becomes almost unreadable, so
   the secondary hero CTA gets a white treatment here, scoped tightly to
   this one button so no other page is affected. */
.hero--photo .hm-hero__cta .btn--outline-ink{
  background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.7);
}
.hero--photo .hm-hero__cta .btn--outline-ink:hover{
  background:var(--white);color:var(--navy);border-color:var(--white);
}
 
.hm-dash{
  position:relative;background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);padding:clamp(22px,2.6vw,30px);box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.hm-dash__head{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:18px;}
.hm-dash__dot{width:8px;height:8px;border-radius:50%;background:#7FD9A6;flex:none;box-shadow:0 0 0 0 rgba(127,217,166,.6);animation:hmPulse 2.4s ease-out infinite;}
@keyframes hmPulse{0%{box-shadow:0 0 0 0 rgba(127,217,166,.55);}70%{box-shadow:0 0 0 9px rgba(127,217,166,0);}100%{box-shadow:0 0 0 0 rgba(127,217,166,0);}}
.hm-dash__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.hm-dash__num{font-family:var(--mono);font-weight:600;font-size:clamp(22px,2.6vw,28px);color:var(--white);letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;}
.hm-dash__lab{margin-top:6px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.7);}
.hm-dash__foot{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:11px;color:rgba(255,255,255,.55);}
@media (max-width:980px){
  .hm-hero__grid{grid-template-columns:1fr;}
  .hm-dash{max-width:440px;}
}
 
/* ---------- Trust strip (animated counters) ---------- */
.hm-trust{background:var(--navy);padding-block:clamp(36px,5vw,52px);}
.hm-trust__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center;}
.hm-trust__num{font-family:var(--mono);font-weight:600;font-size:clamp(24px,2.6vw,32px);color:var(--white);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.hm-trust__lab{margin-top:6px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72);}
@media (max-width:860px){.hm-trust__grid{grid-template-columns:repeat(2,1fr);row-gap:28px;}}
@media (max-width:480px){.hm-trust__grid{grid-template-columns:1fr 1fr;}}
 
/* ---------- Challenges we solve ---------- */
.hm-problems{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.hm-problem{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;
  transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.hm-problem:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue);}
.hm-problem__icon{
  width:48px;height:48px;border-radius:12px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:background .3s var(--ease-soft);
}
.hm-problem:hover .hm-problem__icon{background:var(--navy);}
.hm-problem__icon .icon{width:22px;height:22px;color:var(--navy);transition:color .3s var(--ease-soft);}
.hm-problem:hover .hm-problem__icon .icon{color:var(--white);}
.hm-problem h3{font-size:17px;margin-bottom:8px;}
.hm-problem p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.6;}
@media (max-width:980px){.hm-problems{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hm-problems{grid-template-columns:1fr;}}
 
/* ---------- Services grid (2-row institutional) ---------- */
.hm-svcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.hm-svc{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.hm-svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue);}
.hm-svc__icon{width:50px;height:50px;border-radius:13px;background:linear-gradient(135deg,var(--navy),var(--ink-raised));display:flex;align-items:center;justify-content:center;}
.hm-svc__icon .icon{width:23px;height:23px;color:var(--white);}
.hm-svc h3{font-size:18px;margin:0;}
.hm-svc p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.6;flex:1;}
.hm-svc__link{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid transparent;transition:border-color .25s var(--ease-soft);width:max-content;}
.hm-svc__link:hover{border-color:var(--blue);}
@media (max-width:980px){.hm-svcgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hm-svcgrid{grid-template-columns:1fr;}}
 
/* ---------- Capital ecosystem infographic ---------- */
.hm-eco{position:relative;max-width:600px;aspect-ratio:1/1;margin:48px auto 0;}
.hm-eco__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
/* This section renders as a LIGHT section (style.css forces .section--ink
   sections back to a light background even when also flagged .on-ink —
   see the .section--ink.on-ink override), so the connecting lines and the
   node pills need light-mode colors, not the dark-glass treatment they'd
   need on an actually-dark background. */
.hm-eco__lines line{stroke:#C7D6E5;stroke-width:1.5;stroke-dasharray:6 8;animation:hmDash 12s linear infinite;}
@keyframes hmDash{to{stroke-dashoffset:-140;}}
.hm-eco__core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--ink-raised));
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--white);
  font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25;box-shadow:0 0 0 10px rgba(23,131,193,.08),var(--shadow-lg);
  z-index:2;
}
.hm-eco__node{
  position:absolute;top:var(--y);left:var(--x);transform:translate(-50%,-50%);
  background:var(--white);box-shadow:var(--shadow-sm);
  border:1px solid var(--border);border-radius:999px;padding:10px 16px;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.03em;color:var(--navy);white-space:nowrap;
  z-index:2;transition:transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft),border-color .3s var(--ease-soft);
}
.hm-eco__node:hover{transform:translate(-50%,-50%) scale(1.07);box-shadow:var(--shadow-md);border-color:var(--blue);color:var(--blue);}
@media (max-width:700px){
  /* The radial layout has no room to breathe under ~620px — labels at the
     6%/94% x-positions clip past the viewport edge. Below that width it
     collapses to a plain two-column list instead of a circle. */
  .hm-eco{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:static;aspect-ratio:auto;max-width:100%;margin-top:32px;
  }
  .hm-eco__lines{display:none;}
  .hm-eco__core{
    /* The base rule's translate(-50%,-50%) was left in place here — with
       position now static, that transform still applies and yanks the
       circle up by half its own height, straight into the lede
       paragraph above it. That's the overlap. transform:none removes it
       so the circle sits normally in the grid flow. */
    position:static;transform:none;grid-column:1/-1;margin:0 auto 10px;
    width:104px;height:104px;font-size:12.5px;
  }
  .hm-eco__node{
    position:static;transform:none;white-space:normal;text-align:center;
    padding:12px 8px;border-radius:var(--radius-sm);font-size:10.5px;
    overflow-wrap:break-word;word-break:break-word;line-height:1.4;
  }
  .hm-eco__node:hover{transform:none;}
}
 
/* ---------- Transaction process (horizontal) ----------
   Three tiers so the seven step titles/descriptions always have enough
   room and never crowd the number badge above them or the neighbouring
   step:
   - above 1180px: one row of 7, with the connecting line
   - 701–1180px (tablet / small laptop, where 7 equal columns get too
     narrow for the real heading font): wraps into a multi-column grid,
     auto-sized so no column drops below 190px; the horizontal
     connecting line only makes sense for a single row, so it's hidden
   - 700px and below: single column, vertical connecting line          */
.hm-process{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:14px 18px;padding-top:8px;}
.hm-process__line{position:absolute;top:19px;left:0;right:0;height:2px;background:var(--border);}
.hm-process__linefill{position:absolute;top:19px;left:0;height:2px;width:0;background:var(--blue);transition:width 1.1s var(--ease-soft);}
.hm-process__step{position:relative;text-align:left;min-width:0;}
.hm-process__n{
  width:40px;height:40px;border-radius:50%;background:var(--white);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:12px;color:var(--navy);
  position:relative;z-index:1;margin-bottom:18px;transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft),color .3s var(--ease-soft);
}
.hm-process__step.is-active .hm-process__n{background:var(--navy);border-color:var(--navy);color:var(--white);}
.hm-process__step h3{font-size:14.5px;margin-bottom:6px;overflow-wrap:break-word;word-break:break-word;}
.hm-process__step p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-soft);overflow-wrap:break-word;word-break:break-word;}
@media (max-width:1180px) and (min-width:701px){
  .hm-process{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));row-gap:34px;column-gap:22px;}
  .hm-process__line,.hm-process__linefill{display:none;}
}
@media (max-width:700px){
  .hm-process{grid-template-columns:1fr;gap:30px;}
  .hm-process__line,.hm-process__linefill{top:0;bottom:0;left:19px;right:auto;width:2px;height:auto;}
  .hm-process__linefill{width:2px;height:0;}
  /* The circle and the title/description were stacked in the same
     column (circle, then title below it, then text below that), so
     the full-height vertical rail line ran directly behind the text
     the whole way down, not just behind the circles — that read as
     the text overlapping the icon. Move the circle out of the text's
     flow into its own fixed lane on the left; the title and
     description shift into a lane to the right, so the rail and the
     text no longer occupy the same horizontal space at all. */
  .hm-process__n{position:absolute;top:0;left:0;margin-bottom:0;}
  .hm-process__step h3,.hm-process__step p{padding-left:58px;}
}
 
/* ---------- Sector expertise (image grid, parallax hover) ---------- */
.hm-sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.hm-sector{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius-sm);overflow:hidden;isolation:isolate;}
.hm-sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-soft);}
.hm-sector:hover img{transform:scale(1.08);}
.hm-sector::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,47,.82) 0%,rgba(10,26,47,.15) 55%,transparent 100%);}
.hm-sector__label{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:var(--white);font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.25;overflow-wrap:break-word;word-break:break-word;}
@media (max-width:860px){.hm-sectors{grid-template-columns:repeat(2,1fr);}}
 
/* ---------- Why choose us ---------- */
.hm-why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.hm-why__card{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft);}
.hm-why__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.hm-why__icon{width:46px;height:46px;border-radius:12px;background:var(--white);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.hm-why__icon .icon{width:21px;height:21px;color:var(--blue);}
.hm-why__card h3{font-size:16.5px;margin-bottom:8px;}
.hm-why__card p{margin:0;color:var(--text-soft);font-size:13.5px;line-height:1.6;}
@media (max-width:860px){.hm-why{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.hm-why{grid-template-columns:1fr;}}
 
/* ---------- Case studies ---------- */
.hm-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.hm-case{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm);}
.hm-case__tag{display:inline-block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:var(--bg-accent);margin-bottom:14px;}
.hm-case__sector{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 8px;}
.hm-case h3{font-size:17px;margin-bottom:14px;}
.hm-case__dl{margin:0;display:grid;gap:10px;}
.hm-case__dl div{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:13px;}
.hm-case__dl dt{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);margin:0;}
.hm-case__dl dd{margin:0;color:var(--charcoal);line-height:1.5;}
@media (max-width:980px){.hm-cases{grid-template-columns:1fr;}}
@media (max-width:480px){
  /* Below ~480px the fixed 96px label column leaves the value column too
     narrow (under 120px) for the longer result/solution lines, forcing
     heavy word-wrapping. Stacking the label above the value gives the
     text the full card width to breathe. */
  .hm-case__dl div{grid-template-columns:1fr;gap:4px;}
}
 
/* ---------- Insights ---------- */
.hm-insights{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.hm-insight{display:block;text-decoration:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--white);border:1px solid var(--border);transition:transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft);}
.hm-insight:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.hm-insight img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.hm-insight__kicker{display:block;margin:16px 18px 6px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);}
.hm-insight h3{margin:0 18px 18px;font-size:15.5px;line-height:1.4;}
@media (max-width:980px){.hm-insights{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hm-insights{grid-template-columns:1fr;}}
 
/* ---------- FAQ (two-column accordion) ---------- */
.hm-faq2{column-count:2;column-gap:40px;}
.hm-faq__item{break-inside:avoid;margin-bottom:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);overflow:hidden;}
.hm-faq__q{width:100%;text-align:left;background:none;border:0;padding:16px 18px;font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;}
.hm-faq__ic{width:16px;height:16px;flex:none;color:var(--blue);transition:transform .3s var(--ease-soft);}
.hm-faq__item.is-open .hm-faq__ic{transform:rotate(45deg);}
.hm-faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-soft);}
.hm-faq__a p{margin:0;padding:0 18px 16px;color:var(--text-soft);font-size:14px;line-height:1.65;}
@media (max-width:780px){.hm-faq2{column-count:1;}}
 
/* ---------- Floating conversion actions ---------- */
.hm-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.hm-fab__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:52px;height:52px;border-radius:50%;box-shadow:var(--shadow-lg);color:var(--white);transition:transform .25s var(--ease-soft),width .25s var(--ease-soft),border-radius .25s var(--ease-soft);text-decoration:none;}
.hm-fab__btn .icon{width:22px;height:22px;flex:none;}
.hm-fab__btn--wa{background:#25D366;}
.hm-fab__btn--call{background:var(--blue);}
.hm-fab__btn--cta{background:var(--navy);width:auto;height:48px;padding:0 18px;border-radius:999px;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.hm-fab__btn--cta .icon{width:16px;height:16px;}
.hm-fab__btn:hover{transform:translateY(-3px);}
@media (max-width:560px){
  .hm-fab{right:14px;bottom:14px;}
  .hm-fab__btn--cta span{display:none;}
  .hm-fab__btn--cta{width:48px;padding:0;}
}
 
/* ---------- Final CTA photo band + button/row helpers ----------
   .rv / .rv.is-in reveal behaviour is already provided sitewide by
   style.css + app.js — not redeclared here. */
.imgband--cta{text-align:center;}
.imgband--cta .imgband__inner{max-width:640px;margin-inline:auto;}
.imgband--cta h2{color:var(--white);}
.imgband--cta .lede{color:rgba(255,255,255,.86);margin-inline:auto;}
.ctarow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px;}
/* .btn--onink is a navy-fill button meant for LIGHT backgrounds — on this
   navy photo band it would render navy-on-navy. .btn--oncta is the filled
   "primary" treatment for dark/photo bands: white fill, navy text. */
.btn--oncta{background:var(--white);border-color:var(--white);color:var(--navy);}
.btn--oncta:hover{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:var(--shadow-md);}
 
@media (prefers-reduced-motion:reduce){
  .hm-dash__dot{animation:none;}
  .hm-eco__lines line{animation:none;}
  .hm-sector img{transition:none;}
}
/* Footer headings are <h3> now (same look as the old <h4>) */
.foot h3{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}