/* Innovast design system assist layer.
   Supplies only what the Elementor global kit cannot express.
   Colours and fonts come from the kit; this file carries composition,
   the repeatable type treatments, and motivated motion.
   Design: Innovast Measured. variance 0.45 / density 0.3 / motion 0.25 */

:root{
  --inv-ink:#111827; --inv-body:#4B5563; --inv-meta:#5F6875;
  --inv-brand:#38B0F8; --inv-brand-ink:#0B6EA8; --inv-savings:#00BF63;
  --inv-rule:#DBE0E6; --inv-rule-strong:#C2CAD4; --inv-surface:#F9FAFB; --inv-paper:#FFFFFF;
  --inv-grid:1140px; --inv-gutter:32px;
  --inv-edge:max(32px, calc((100vw - 1140px) / 2 + 32px));
}

/* repeatable type treatments */
.inv-eyebrow .elementor-heading-title{
  font-family:Rubik,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--inv-brand-ink);
  line-height:1.4; margin:0;
}
.inv-display .elementor-heading-title{
  font-size:clamp(38px, 2.1rem + 2.4vw, 62px);
  line-height:1.03; letter-spacing:-.032em; color:var(--inv-ink);
}
.inv-lede p, .inv-lede{
  font-size:21px; line-height:34px; color:var(--inv-body); margin:0; max-width:31em;
}
.inv-figcaption p, .inv-figcaption{
  font-family:Rubik,sans-serif; font-size:12.5px; line-height:19px;
  color:var(--inv-meta); margin:0;
}

/* the guarantee: a commitment, set quietly. Not a badge. */
.inv-guarantee{ border-top:1px solid var(--inv-rule); padding-top:18px; }
.inv-guarantee p, .inv-guarantee{
  font-size:15px; line-height:25px; color:var(--inv-meta); margin:0;
}
.inv-guarantee b{ color:var(--inv-ink); font-weight:500; }

/* hero composition */
.inv-hero{ border-bottom:1px solid var(--inv-rule); }
.inv-hero__text{ padding-left:var(--inv-edge) !important; }
.inv-hero__fig .elementor-widget-container, .inv-hero__fig figure, .inv-hero__fig a{ height:100%; }
.inv-hero__fig img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block;
}

@media(max-width:999px){
  .inv-hero__text{ padding-left:32px !important; }
  .inv-hero__fig img{ min-height:340px; }
}

/* credentials strip */
.inv-creds{ background:var(--inv-surface); border-bottom:1px solid var(--inv-rule); }
.inv-cred{ border-right:1px solid var(--inv-rule-strong); }
.inv-cred:last-child{ border-right:0; }
.inv-cred__label .elementor-heading-title{
  font-family:Rubik,sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--inv-meta); line-height:1.4;
}
.inv-cred__value .elementor-heading-title{
  font-family:Rubik,sans-serif; font-size:14px; font-weight:600;
  line-height:1.35; color:var(--inv-ink);
}
@media(max-width:767px){
  .inv-cred{ border-right:0; border-bottom:1px solid var(--inv-rule-strong); }
  .inv-cred:last-child{ border-bottom:0; }
}

/* buttons: kit supplies colour and radius, this holds the pairing */
.inv-textlink .elementor-button{
  background:transparent !important; color:var(--inv-brand-ink) !important;
  padding:16px 0 !important; font-weight:600;
}
.inv-textlink .elementor-button:hover{ text-decoration:underline; }

/* stagger for the hero reading order */
.inv-d1{--inv-d:.05s}.inv-d2{--inv-d:.11s}.inv-d3{--inv-d:.17s}.inv-d4{--inv-d:.23s}.inv-d5{--inv-d:.29s}

/* hero figure column: photograph fills, caption sits below on paper */
.inv-hero__fig > .e-con-inner{display:flex;flex-direction:column;height:100%;gap:0}
.inv-hero__fig .elementor-widget-image{flex:1 1 auto;min-height:0;display:flex}
.inv-hero__fig .elementor-widget-image > .elementor-widget-container{flex:1 1 auto;display:flex}
.inv-hero__fig .elementor-widget-image figure{margin:0;flex:1 1 auto;display:flex}
.inv-hero__fig .elementor-widget-text-editor{flex:0 0 auto}

/* --- hero fold correction ---
   The portrait photograph was driving the band height and pushing the CTA
   and the guarantee below the fold. Band height is now set natively on the
   Elementor container so it stays editable in the canvas; these rules only
   stop the photograph contributing to that height, so it crops instead. */
.inv-hero__fig{ position:relative; overflow:hidden; }
@media(min-width:1000px){
  .inv-hero__fig > .e-con-inner{ display:block; height:100%; padding:0; }
  .inv-hero__fig .elementor-widget-image{ position:absolute; inset:0 0 36px 0; margin:0; }
  .inv-hero__fig .elementor-widget-image > .elementor-widget-container,
  .inv-hero__fig .elementor-widget-image figure{ height:100%; margin:0; }
  .inv-hero__fig .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
  .inv-hero__fig .elementor-widget-text-editor{ position:absolute; left:0; right:0; bottom:0; }
}
@media(min-width:1000px) and (max-height:830px){
  .inv-hero{ min-height:560px !important; }
  .inv-display .elementor-heading-title{ font-size:clamp(38px, 1.9rem + 2.1vw, 54px); }
  .inv-lede p, .inv-lede{ font-size:19px; line-height:31px; }
}

/* Credentials strip: full-bleed surface, content locked to the 1140 grid so
   the first column aligns with the hero headline instead of the viewport edge. */
.inv-creds{ padding-left:var(--inv-edge) !important; padding-right:var(--inv-edge) !important; }
.inv-creds > .e-con-inner{ padding:0 !important; max-width:none; }
@media(max-width:767px){ .inv-creds{ padding-left:32px !important; padding-right:32px !important; } }

/* ---------- sitewide footer ---------- */
.inv-foot{ background:var(--inv-surface); border-top:1px solid var(--inv-rule); }
.inv-foot img{ height:34px; width:auto; }
.inv-foot__label .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--inv-meta); }
.inv-foot__addr p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; }
.inv-foot__links ul{ list-style:none; margin:0; padding:0; }
.inv-foot__links li{ margin:0; line-height:25px; }
.inv-foot__links li:last-child{ margin-bottom:0; }
.inv-foot__links a{ display:block; font-size:15px; line-height:25px; white-space:nowrap; color:var(--inv-ink); text-decoration:none; }
.inv-foot__links a:hover{ color:var(--inv-brand-ink); }
.inv-foot__legal{ border-top:1px solid var(--inv-rule); }
.inv-foot__legal p{ font-family:Rubik,sans-serif; font-size:12.5px; line-height:22px;
  color:var(--inv-meta); margin:0; text-align:center; }
@media(max-width:767px){ .inv-foot__legal p{ text-align:left; } }

@media(max-width:900px){ .inv-foot__links a{ white-space:normal; } }

/* footer social marks: bare, monochrome, no chips */
.inv-foot__social .elementor-social-icon{ background:transparent !important; padding:0 !important;
  width:auto !important; height:auto !important; }
/* Elementor renders these as inline SVG, not icon-font <i>, so no Font Awesome
   payload is loaded. Colour the SVG, not an <i>. */
.inv-foot__social .elementor-social-icon{ color:var(--inv-meta); transition:color .18s ease; }
.inv-foot__social .elementor-social-icon svg{ fill:currentColor; width:16px; height:16px; }
.inv-foot__social .elementor-social-icon:hover{ color:var(--inv-brand-ink); }
.inv-foot__social .elementor-grid-item{ margin:0 !important; }
.inv-foot img{ margin-left:0 !important; margin-right:auto !important; }

/* ---------- band system ---------- */
.inv-band{ padding-top:96px; padding-bottom:96px; }
.inv-band--surface{ background:var(--inv-surface); }
.inv-band + .inv-band{ border-top:1px solid var(--inv-rule); }
.inv-h2 .elementor-heading-title{ font-size:clamp(28px, 1.5rem + 1.3vw, 40px); line-height:1.12;
  letter-spacing:-.024em; color:var(--inv-ink); }
.inv-sub p, .inv-sub{ font-size:18px; line-height:30px; color:var(--inv-body); margin:0; max-width:42em; }

/* service groups: label column, then a ruled list. Not cards. */
.inv-groups{ border-top:1px solid var(--inv-ink); }
.inv-grp{ border-bottom:1px solid var(--inv-rule); }
.inv-grp__h .elementor-heading-title{ font-size:24px; font-weight:600; letter-spacing:-.015em; color:var(--inv-ink); }
.inv-list ul{ list-style:none; margin:0; padding:0; }
.inv-list li{ position:relative; padding:0 0 9px 20px; font-size:17px; line-height:27px; color:var(--inv-body); }
.inv-list li:last-child{ padding-bottom:0; }
.inv-list li::before{ content:""; position:absolute; left:0; top:13px; width:9px; height:1px; background:var(--inv-brand); }
.inv-list li b, .inv-list li strong{ color:var(--inv-ink); font-weight:700; }

/* THE GRID. One rule, every band, no exceptions.
   Elementor's boxed content width does not constrain a nested container, so the
   1140 grid is enforced here instead. !important is required because Elementor
   emits per-element padding at a specificity no class selector can beat.
   Every band's inner edge must report the same left value as the hero headline. */
.inv-band{ padding-left:var(--inv-edge) !important; padding-right:var(--inv-edge) !important; }
@media(max-width:767px){ .inv-band{ padding-left:32px !important; padding-right:32px !important; } }

/* label column holds its width instead of shrinking */
.inv-grp > .e-con:first-child{ flex:0 0 300px; }
@media(max-width:1024px){ .inv-grp > .e-con:first-child{ flex:1 1 auto; } }

/* ---------- reading measure and deliberate ragging ----------
   The wide-desktop problem is line length, not where sentences break.
   Cap the measure at roughly 60-70 characters, then let text-wrap make the
   rag deliberate. Hard breaks are reserved for short two-beat statements
   (the guarantee, pull quotes), never for running prose, and never at a
   semicolon, which exists to bind rather than separate. */
.inv-display .elementor-heading-title,
.inv-h2 .elementor-heading-title,
.inv-grp__h .elementor-heading-title{ text-wrap:balance; }
.inv-lede p, .inv-sub p, .inv-list li, .inv-guarantee p, .inv-foot__addr p{ text-wrap:pretty; }

.inv-lede p, .inv-lede{ max-width:60ch; }
.inv-sub p, .inv-sub{ max-width:58ch; }
.inv-list li{ max-width:59ch; }
.inv-h2 .elementor-heading-title{ max-width:20ch; }

/* ---------- process rail ----------
   One continuous rail drawn on the parent, a numbered node per step, and a
   chevron riding the rail between steps. The numerals are a real sequence,
   generated by a CSS counter, so adding or reordering a step in the canvas
   renumbers everything automatically. Step padding is set natively on the
   container, not here, so it stays editable. */

/* ---------- figures ---------- */
.inv-fig img{ width:100%; height:auto; display:block; border-radius:8px; border:1px solid var(--inv-rule); }
.inv-figcap p{ font-size:14.5px; line-height:23px; color:var(--inv-meta); margin:0; max-width:78ch;
  text-wrap:pretty; }
.inv-figcap b{ color:var(--inv-ink); font-weight:600; }

/* ---------- instrument kit ---------- */
.inv-kit__h .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:24px; font-weight:600;
  letter-spacing:-.015em; color:var(--inv-ink); }
.inv-kit__p p{ font-size:17px; line-height:28px; color:var(--inv-body); margin:0; max-width:58ch;
  text-wrap:pretty; }
.inv-kit__p b{ color:var(--inv-ink); font-weight:700; }
.inv-kit__list p{ font-size:14.5px; line-height:23px; color:var(--inv-meta); margin:0;
  border-top:1px solid var(--inv-rule); padding-top:14px; }
.inv-micro{ font-family:Rubik,sans-serif; font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--inv-meta); display:block; margin-bottom:6px; }

/* ---------- motion: CSS only ----------
   Driven by JS twice, and hidden content survived both times: IntersectionObserver
   callbacks and setTimeout are BOTH throttled when the tab is not foregrounded, so
   any JS-gated hidden state can strand content invisible.

   This version cannot fail that way. The animation plays on load with fill-mode
   'both', so the end state is always reached. Where scroll-driven timelines are
   supported the same animation is retimed to the element's entry, giving a genuine
   scroll reveal; where they are not, it simply plays on load. Either way the element
   ends visible, with no script involved. */
@keyframes invRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.inv-rise{ animation:invRise .55s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--inv-d,0s); }
@supports (animation-timeline: view()){
  .inv-rise{ animation-timeline:view(); animation-range:entry 0% entry 38%; animation-delay:0s; }
}
@media(prefers-reduced-motion:reduce){
  .inv-rise{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* Percentage widths plus a flex gap overflow: 6 x 16.66% + 5 x 24px exceeds 100%
   and the row wraps. Size the columns by calc so the gaps are subtracted exactly. */

/* ---------- process rail (vertical, header alongside) ----------
   The connector is drawn per-step with :not(:last-child), so it can only ever run
   BETWEEN nodes. The earlier version drew one line on the parent and guessed where
   to stop it, which is why it trailed past 06 -- the parent does not know how tall
   the last step is. This version cannot trail, at any step count or text length. */
.inv-rail__head{ }
.inv-fstep{ position:relative; display:flex; gap:16px; padding-bottom:26px; }
.inv-fstep:last-child{ padding-bottom:0; }
.inv-fstep:not(:last-child)::before{ content:''; position:absolute; left:15px; top:34px; bottom:0;
  width:1px; background:#C2CAD4; }
.inv-fnum{ flex:0 0 31px; }
.inv-fnum .elementor-heading-title{ display:block; width:31px; height:31px; box-sizing:border-box;
  border:1px solid #C2CAD4; border-radius:50%; background:#FFFFFF;
  font-family:Rubik,sans-serif; font-size:11px; font-weight:600; line-height:29px;
  text-align:center; color:#0B6EA8; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.inv-fbody{ padding-top:5px; }
.inv-ftitle .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:16px; font-weight:600;
  line-height:1.35; color:var(--inv-ink); }
.inv-ftext p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; text-wrap:pretty; }
@media(max-width:1024px){ .inv-fstep{ padding-bottom:22px; } }

/* Fixed px on both columns overflows the band's inner width (380+80+680 > 1054)
   and the row wraps. Fix the header column, let the rail take what is left. */
.inv-split > .inv-rail__head{ flex:0 0 380px; max-width:380px; }
.inv-split > .inv-flow{ flex:1 1 0; min-width:0; max-width:none; }
@media(max-width:1024px){
  .inv-split > .inv-rail__head, .inv-split > .inv-flow{ flex:1 1 100%; max-width:100%; }
}

/* Figure in the header column. aspect-ratio locks the crop so the column height
   stays predictable whatever image is swapped in; object-fit keeps it undistorted.
   Square edges, per the system -- no rounded media. */
.inv-railfig img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:0; }
.inv-railcap p{ font-size:13px; line-height:19px; color:var(--inv-meta); margin:10px 0 0; text-wrap:pretty; }
@media(max-width:1024px){ .inv-railfig img{ aspect-ratio:21/9; } }

/* Fixing the figure's aspect ratio makes the header column a different height from
   the rail (92px longer here), and any hand-tuned crop breaks the moment the rail
   gains a step or the headline rewraps. Instead the columns stretch to a shared
   height and the figure absorbs whatever is left, so the two always end flush.
   Desktop only -- once stacked, the image returns to its natural ratio. */
@media(min-width:1025px){
  .inv-split{ align-items:stretch; }
  .inv-split > .inv-rail__head{ display:flex; flex-direction:column; }
  .inv-railfig{ flex:1 1 auto; min-height:170px; }
  .inv-railfig > .elementor-widget-container{ height:100%; }
  .inv-railfig img{ height:100%; width:100%; object-fit:cover; aspect-ratio:auto; }
}

/* ---------- registrations ----------
   Three up, sized by calc so the column gaps are subtracted rather than fighting
   the percentage. The REA card carries the heavier ink rule: it is the registration
   that actually signs the ST submission, and the two-weight border system is how
   this page marks primacy everywhere else. */
.inv-regs > .inv-reg{ flex:0 0 calc((100% - 56px)/3); max-width:calc((100% - 56px)/3); }
.inv-reg{ border-top:1px solid var(--inv-rule); padding-top:18px; }
/* The lead card is distinguished by RULE COLOUR, not weight. A 2px-vs-1px
   difference is not dependable: Chrome floors borders to whole device pixels, so
   at 90% zoom 2px and 1px both render as one pixel and the distinction disappears
   silently. Colour survives every zoom level. */

.inv-regcode .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:15px; font-weight:600;
  line-height:1.2; color:var(--inv-brand-ink); }
.inv-regfull p{ font-size:13px; line-height:19px; color:var(--inv-meta); margin:5px 0 11px; }
.inv-regtext p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; text-wrap:pretty; }
.inv-regcert p{ font-size:13.5px; line-height:20px; color:var(--inv-ink); margin:11px 0 0; }
.inv-regcert b{ font-weight:600; font-variant-numeric:tabular-nums; }
.inv-disclaim p{ font-size:13px; line-height:20px; color:var(--inv-meta); margin:0; max-width:74ch; }
@media(max-width:1024px){ .inv-regs > .inv-reg{ flex:0 0 calc((100% - 28px)/2); max-width:calc((100% - 28px)/2); } }
@media(max-width:600px){ .inv-regs > .inv-reg{ flex:1 1 100%; max-width:100%; } }

/* ---------- pull quote ---------- */
.inv-attr p{ font-size:13px; line-height:19px; color:var(--inv-meta); margin:0; letter-spacing:.02em; }
.inv-quote blockquote{ margin:0; padding:0; border:0; quotes:none;
  font-family:Rubik,sans-serif; font-size:clamp(22px,2.5vw,30px); font-weight:500;
  line-height:1.32; letter-spacing:-.02em; color:var(--inv-ink); max-width:640px; text-wrap:balance; }
.inv-quote blockquote p{ margin:0; font:inherit; color:inherit; }

/* ---------- surface band ---------- */
.inv-band--surface{ background:var(--inv-surface); }

/* ---------- proof rows ----------
   Label column / body / classification, the same three-part rhythm as the service
   groups. Direct vs Partner ESCO is a real commercial distinction, so it gets its
   own column rather than being buried in the description. */
.inv-prow{ border-top:1px solid var(--inv-rule); padding:22px 0; }
.inv-pcol1{ flex:0 0 290px; max-width:290px; }
.inv-pcol3{ flex:0 0 130px; max-width:130px; }
.inv-pt .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:17px; font-weight:600; line-height:1.35; color:var(--inv-ink); }
.inv-pmeta p{ font-size:13px; line-height:19px; color:var(--inv-meta); margin:4px 0 0; }
.inv-pdesc p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; text-wrap:pretty; }
.inv-ptag p{ font-family:Rubik,sans-serif; font-size:12.5px; line-height:19px; font-weight:600;
  color:var(--inv-brand-ink); margin:0; text-align:right; letter-spacing:.02em; }
.inv-partner p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; max-width:80ch; }
.inv-partner b{ color:var(--inv-ink); font-weight:600; }
.inv-sectlabel p{ font-size:13px; line-height:19px; color:var(--inv-meta); margin:0 0 6px; }
.inv-sectors p{ font-size:14.5px; line-height:26px; color:var(--inv-body); margin:0; max-width:86ch; }

/* ---------- statutory clock ---------- */
.inv-crow{ border-top:1px solid var(--inv-rule); padding:15px 0; }
.inv-cwhen{ flex:0 0 160px; max-width:160px; }
.inv-cwhen p{ font-family:Rubik,sans-serif; font-size:13px; line-height:22px; font-weight:600;
  color:var(--inv-brand-ink); margin:0; }
.inv-ctext p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; text-wrap:pretty; }
.inv-ctext b{ color:var(--inv-ink); font-weight:600; }

.inv-cnote{ flex:0 0 340px; max-width:340px; }
.inv-cnote p{ font-size:14.5px; line-height:24px; color:var(--inv-body); margin:0; }
.inv-cnote b{ color:var(--inv-ink); font-weight:600; }
@media(max-width:1024px){
  .inv-pcol1,.inv-pcol3,.inv-cwhen,.inv-cnote{ flex:1 1 100%; max-width:100%; }
  .inv-ptag p{ text-align:left; }
}

/* ---------- fee ladder ----------
   'Starts from' is a visible label above every figure, never a bare number. 'No fee'
   and 'No CAPEX from you' are set in the same type as the prices, because they are
   price positions rather than badges and dressing them as chips would undersell them. */
.inv-fgroup .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:12.5px; font-weight:600;
  line-height:1.2; color:var(--inv-meta); letter-spacing:.08em; text-transform:uppercase; }
.inv-frow{ border-top:1px solid var(--inv-rule); padding:20px 0; }
.inv-fcol1{ flex:0 0 300px; max-width:300px; }
.inv-fcol3{ flex:0 0 175px; max-width:175px; }
.inv-ft .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:17px; font-weight:600; line-height:1.35; color:var(--inv-ink); }
.inv-fmeta p{ font-size:13px; line-height:19px; color:var(--inv-meta); margin:4px 0 0; }
.inv-fdesc p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; text-wrap:pretty; }
.inv-fdesc b{ color:var(--inv-ink); font-weight:600; }
.inv-fprice p{ margin:0; text-align:right; }
.inv-fprice .from{ display:block; font-size:11px; line-height:15px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--inv-meta); }
.inv-fprice .amt{ display:block; font-family:Rubik,sans-serif; font-size:20px; font-weight:600;
  line-height:1.25; color:var(--inv-ink); font-variant-numeric:tabular-nums; }
.inv-fprice .alt{ display:block; font-size:12.5px; line-height:18px; color:var(--inv-meta); margin-top:3px; }
.inv-disclaims p{ font-size:13.5px; line-height:21px; color:var(--inv-meta); margin:0; max-width:88ch; }
.inv-disclaims b{ color:var(--inv-ink); font-weight:600; }
.inv-fnote p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; max-width:78ch; }
.inv-fnote b{ color:var(--inv-ink); font-weight:600; }
@media(max-width:1024px){
  .inv-fcol1,.inv-fcol3{ flex:1 1 100%; max-width:100%; }
  .inv-fprice p{ text-align:left; }
}

/* ---------- guarantee ---------- */
.inv-gcol-a{ flex:1 1 0; min-width:0; }
.inv-gcol-b{ flex:0 0 420px; max-width:420px; }
.inv-decline p{ font-size:16px; line-height:27px; color:var(--inv-ink); font-weight:500; margin:0; text-wrap:pretty; }
.inv-gwhy p{ font-size:15px; line-height:25px; color:var(--inv-body); margin:0; text-wrap:pretty; }
.inv-gwhy b{ color:var(--inv-ink); font-weight:600; }
.inv-terms{ border-top:1px solid var(--inv-ink); padding-top:20px; }
.inv-terms .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:15px; font-weight:600; line-height:1.3; color:var(--inv-ink); }
/* Counter-generated numerals: the list stays a real <ol>, so the order is carried
   by markup rather than by hand-typed digits that drift when a clause is added. */
.inv-tlist ol{ margin:0; padding:0; list-style:none; counter-reset:t; }
.inv-tlist ol li{ counter-increment:t; position:relative; padding-left:32px; margin:0 0 13px;
  font-size:14.5px; line-height:24px; color:var(--inv-body); text-wrap:pretty; }
.inv-tlist ol li:last-child{ margin-bottom:0; }
.inv-tlist ol li::before{ content:counter(t,decimal-leading-zero); position:absolute; left:0; top:0;
  font-family:Rubik,sans-serif; font-size:11px; font-weight:600; line-height:24px;
  color:var(--inv-brand-ink); font-variant-numeric:tabular-nums; }
.inv-tlist ol li b{ color:var(--inv-ink); font-weight:600; }
.inv-fine p{ font-size:12.5px; line-height:19px; color:var(--inv-meta); margin:0; text-wrap:pretty; }

/* ---------- close ---------- */
.inv-ccol-a{ flex:1 1 0; min-width:0; }
.inv-ccol-b{ flex:0 0 380px; max-width:380px; }
.inv-cta .elementor-button{ background:var(--inv-ink); color:#fff; border-radius:0;
  font-family:Rubik,sans-serif; font-size:15px; font-weight:600; line-height:1; padding:17px 28px;
  transition:background .18s ease; }
.inv-cta .elementor-button:hover{ background:var(--inv-brand-ink); }
.inv-tlink2 p{ font-size:14.5px; line-height:22px; margin:0; }
.inv-tlink2 a{ color:var(--inv-brand-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; }
.inv-deliv{ border-top:1px solid var(--inv-ink); padding-top:20px; }
.inv-deliv .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:15px; font-weight:600; line-height:1.3; color:var(--inv-ink); }

/* ---------- where this leads ---------- */
.inv-lgrp .elementor-heading-title{ font-family:Rubik,sans-serif; font-size:12.5px; font-weight:600;
  line-height:1.2; color:var(--inv-meta); letter-spacing:.08em; text-transform:uppercase; }
.inv-lcard p{ margin:0; }
.inv-lcard a{ display:block; border-top:1px solid var(--inv-rule); padding:16px 0; text-decoration:none; }
.inv-lcard a:hover .t{ color:var(--inv-brand-ink); }
.inv-lcard .t{ display:block; font-family:Rubik,sans-serif; font-size:16px; font-weight:600;
  line-height:1.35; color:var(--inv-ink); transition:color .15s ease; }
.inv-lcard .x{ display:block; font-size:14px; line-height:22px; color:var(--inv-body); margin-top:4px; }
.inv-lall p{ font-size:14.5px; line-height:22px; margin:0; }
.inv-lall a{ color:var(--inv-brand-ink); text-decoration:none; font-weight:600; }
.inv-lall a:hover{ text-decoration:underline; }
@media(max-width:1024px){
  .inv-gcol-b,.inv-ccol-b{ flex:1 1 100%; max-width:100%; }
}

/* Column sizing must be declared as a CHILD selector. Elementor gives every
   container its own width rule; a single-class selector ties or loses on
   specificity and the row silently wraps to stacked columns. Same for the button,
   whose colour is set by Elementor's own .elementor-button rule. */
.inv-gcols > .inv-gcol-a{ flex:1 1 0; min-width:0; max-width:none; }
.inv-gcols > .inv-gcol-b{ flex:0 0 420px; max-width:420px; }
.inv-close__cols > .inv-ccol-a{ flex:1 1 0; min-width:0; max-width:none; }
.inv-close__cols > .inv-ccol-b{ flex:0 0 380px; max-width:380px; }
.inv-leads > .inv-lcol{ flex:1 1 0; min-width:0; max-width:none; }
.elementor-widget-button.inv-cta .elementor-button,
.inv-cta .elementor-button.elementor-size-sm,
.inv-cta a.elementor-button{ background-color:var(--inv-ink); color:#FFFFFF; border-radius:0; }
.elementor-widget-button.inv-cta .elementor-button:hover,
.inv-cta a.elementor-button:hover{ background-color:var(--inv-brand-ink); color:#FFFFFF; }
@media(max-width:1024px){
  .inv-gcols > .inv-gcol-a,.inv-gcols > .inv-gcol-b,
  .inv-close__cols > .inv-ccol-a,.inv-close__cols > .inv-ccol-b,
  .inv-leads > .inv-lcol{ flex:1 1 100%; max-width:100%; }
}

/* ---------- statutory citation ----------
   Namespaced deliberately. The bare class name 'reg' is already defined by the
   legacy stylesheet as a bordered card (display:flex, 8px radius, 22px padding),
   which is what turned every regulation reference into a box. Never reuse an
   un-prefixed class name on this site. */
.inv-ctext .inv-cite{ display:inline !important; border:0 !important; padding:0 !important;
  margin:0 !important; background:none !important; border-radius:0 !important;
  font-size:12.5px; line-height:inherit; color:var(--inv-meta); white-space:nowrap; }

/* ---------- ink panels ----------
   Mockup section 3: full bleed is used exactly twice, the hero photograph and the
   conviction panel, with the close panel also on ink. These are the only beats in a
   12,000px scroll -- without them every band is paper and the page reads flat. */
.inv-panel-ink{ background:var(--inv-ink); }
.inv-panel-ink .elementor-heading-title{ color:#FFFFFF; }
.inv-panel-ink p{ color:#C7CDD6; }
.inv-panel-ink b, .inv-panel-ink strong{ color:#FFFFFF; font-weight:600; }
.inv-panel-ink .inv-eyebrow p, .inv-panel-ink .inv-attr p{ color:#98A2B0; }
.inv-panel-ink .inv-fine p, .inv-panel-ink .inv-disclaims p{ color:#98A2B0; }
.inv-panel-ink .inv-list li{ color:#C7CDD6; }
.inv-panel-ink .inv-list li::marker{ color:#98A2B0; }
.inv-panel-ink .inv-deliv{ border-top-color:#3A4250; }
.inv-panel-ink .inv-tlink2 a{ color:#7FC6F5; }
.inv-panel-ink .inv-quote blockquote{ color:#FFFFFF; }
/* CTA inverts on ink: paper fill, ink label */
.inv-panel-ink .inv-cta .elementor-button,
.inv-panel-ink .inv-cta a.elementor-button{ background-color:#FFFFFF; color:var(--inv-ink); }
.inv-panel-ink .inv-cta .elementor-button:hover,
.inv-panel-ink .inv-cta a.elementor-button:hover{ background-color:var(--inv-brand); color:var(--inv-ink); }

/* The conviction line is the single loudest sentence on the page. */
.inv-panel-ink .inv-quote blockquote{ font-size:clamp(26px,3.1vw,38px); line-height:1.24; max-width:900px; }

/* ---------- density ----------
   Row padding, not band rhythm. Mockup fixes band rhythm at 96px, so length comes
   out of the inside of the tables rather than the space between sections. */
.inv-frow{ padding:14px 0; }
.inv-prow{ padding:16px 0; }
.inv-crow{ padding:12px 0; }
.inv-fprice .amt{ font-size:25px; }

/* ---------- band header ----------
   The fault this fixes: a 580px intro measure sitting above a 1060px table makes
   every band open with a narrow column pinned to the left, then jump to full width.
   Heading and intro now sit side by side and together span the same outer edges as
   the content below, so the band reads as one block instead of two mismatched ones. */
.inv-bandhead{ }
.inv-bandhead > .inv-bh-l{ flex:0 0 46%; max-width:46%; }
.inv-bandhead > .inv-bh-r{ flex:1 1 0; min-width:0; }
.inv-bh-r .inv-sub p{ margin:0; max-width:none; }
.inv-bh-l .inv-h2 .elementor-heading-title{ margin:0; }
@media(max-width:1024px){
  .inv-bandhead > .inv-bh-l, .inv-bandhead > .inv-bh-r{ flex:1 1 100%; max-width:100%; }
}

/* ---------- registration cards ----------
   Restored as real bounded cards. They were boxes in the original and reading them
   as six bordered objects is what made the grid legible; a top rule alone left them
   floating. */
.inv-reg{ border:1px solid var(--inv-rule-strong); border-radius:8px; padding:22px 24px 24px; }

.inv-regcert p{ margin-top:12px; }

/* ---------- sectors ----------
   Centred, and each sector its own box, as originally designed. */
.inv-sectorwrap{ text-align:center; }
.inv-sectlabel p{ text-align:center; }
.inv-sectors ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px; }
.inv-sectors li{ border:1px solid var(--inv-rule); border-radius:6px; padding:8px 14px;
  font-size:13.5px; line-height:1.35; color:var(--inv-body); background:var(--inv-paper); }

/* Citation reads better on its own quiet line than jammed onto the sentence end. */
.inv-ctext .inv-cite{ display:block !important; margin-top:6px !important; white-space:normal; }

/* Trailing notes match the content width rather than the narrow intro measure. */
.inv-disclaim p, .inv-partner p{ max-width:none; }

/* The paired header keeps its intro on the same baseline grid as the heading. */
.inv-bh-r .inv-sub p, .inv-bh-r .inv-fnote p{ max-width:none; }

/* ---------- corrections from the 100% review ----------
   1. Fine print is a single column at a readable measure. Three columns of footnotes
      read as content rather than as notes, which is the opposite of their job.
   2. All six registration cards carry the same border. One card in a heavier rule
      read as a selected or hovered state and implied the cards were clickable.
      Primacy is carried by the REA being first and by what the card says. */
.inv-disclaims--row{ display:block !important; }
.inv-disclaims--row > .elementor-widget{ width:100%; max-width:none; }
.inv-disclaims p{ max-width:82ch; }
.inv-disclaims > .elementor-widget + .elementor-widget{ margin-top:10px; }

/* ---------- centred band header, used sparingly ---------- */
.inv-bandhead--centre{ display:block !important; text-align:center; }
.inv-bandhead--centre .inv-bh-l,.inv-bandhead--centre .inv-bh-r{ flex:none !important; max-width:760px !important; margin:0 auto; }
.inv-bandhead--centre .inv-sub p{ margin-left:auto; margin-right:auto; }
.inv-bandhead--centre .inv-bh-r{ margin-top:14px; }

/* ---------- flipped header: intro left, heading right ---------- */
.inv-bandhead--flip{ flex-direction:row-reverse !important; }

/* ---------- timing note sits against the middle of the rail ---------- */
@media(min-width:1025px){ .inv-clock{ align-items:center !important; } }

/* ---------- guarantee, unpicked from a text blob ----------
   The mockup separated this band with boxes and tint. As flat prose the decline
   sentence, the reasoning and the terms all read at the same weight, so the actual
   offer gets lost in the middle. */
.inv-decline{ border-left:3px solid var(--inv-brand); padding:2px 0 2px 18px; }
.inv-decline p{ font-size:17px; line-height:28px; color:var(--inv-ink); font-weight:500; }
.inv-gwhy{ background:var(--inv-paper); border:1px solid var(--inv-rule); border-radius:8px; padding:22px 24px; }
.inv-terms{ background:var(--inv-paper); border:1px solid var(--inv-rule-strong); border-radius:8px;
  padding:24px 26px 26px !important; border-top:1px solid var(--inv-rule-strong) !important; }

/* ---------- onward cards: make the affordance explicit ----------
   Nothing signalled these were links. Chevron plus a hover shift and rule change. */
.inv-lcard a{ position:relative; padding-right:28px; transition:border-color .15s ease; }
.inv-lcard a::after{ content:'\2192'; position:absolute; right:2px; top:16px; font-size:17px;
  color:var(--inv-brand-ink); transition:transform .18s ease; }
.inv-lcard a:hover{ border-top-color:var(--inv-ink); }
.inv-lcard a:hover::after{ transform:translateX(5px); }
.inv-lcard a:hover .t{ color:var(--inv-brand-ink); }
.inv-lcard a:focus-visible{ outline:2px solid var(--inv-brand-ink); outline-offset:3px; }

/* ---------- CTA on the ink panel: brand fill, ink label, as per the mockup ---------- */
.inv-panel-ink .inv-cta .elementor-button,
.inv-panel-ink .inv-cta a.elementor-button{ background-color:var(--inv-brand) !important; color:var(--inv-ink) !important;
  font-size:16px; padding:19px 32px; }
.inv-panel-ink .inv-cta .elementor-button:hover,
.inv-panel-ink .inv-cta a.elementor-button:hover{ background-color:#5FC2FA !important; color:var(--inv-ink) !important; }

/* ---------- instrument figures ---------- */
.inv-figs{ }
.inv-figs img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }
.inv-fig-lg{ flex:1 1 0; min-width:0; }
.inv-fig-lg img{ aspect-ratio:16/9; }
.inv-fig-sm{ flex:0 0 300px; max-width:300px; }
.inv-fig-sm img{ aspect-ratio:4/3; }
.inv-figcap2 p{ font-size:12.5px; line-height:18px; color:var(--inv-meta); margin:8px 0 0; }
@media(max-width:1024px){ .inv-fig-sm{ flex:1 1 100%; max-width:100%; } }

/* ---------- fee ladder: implementation collapses ----------
   Defaults to VISIBLE and is only hidden where :has() is supported, so a browser
   that cannot do the toggle shows every price rather than hiding them. Prices are
   the argument of this page; they must never depend on a script or a selector. */
.inv-feetoggle{ position:absolute; opacity:0; pointer-events:none; }
.inv-feemore label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:Rubik,sans-serif; font-size:13.5px; font-weight:600; color:var(--inv-brand-ink);
  border:1px solid var(--inv-rule-strong); border-radius:6px; padding:10px 16px; background:var(--inv-paper); }
.inv-feemore label:hover{ border-color:var(--inv-ink); }
.inv-feemore label::after{ content:'\002B'; font-size:15px; }
@supports selector(:has(*)){
  .inv-band:not(:has(.inv-feetoggle:checked)) .inv-frow--more,
  .inv-band:not(:has(.inv-feetoggle:checked)) .inv-fgroup--more{ display:none; }
  .inv-band:has(.inv-feetoggle:checked) .inv-feemore{ display:none; }
}

/* Child selectors, again: a bare .inv-fig-lg loses to Elementor's container width
   and the large figure takes the whole row, pushing the two small ones beneath it. */
.inv-figs > .inv-fig-lg{ flex:1 1 0 !important; min-width:0; max-width:none; }
.inv-figs > .inv-fig-sm{ flex:0 0 262px !important; max-width:262px; }
@media(max-width:1024px){
  .inv-figs > .inv-fig-lg{ flex:1 1 100% !important; }
  .inv-figs > .inv-fig-sm{ flex:1 1 calc((100% - 18px)/2) !important; max-width:none; }
}

/* ================= review round 3 ================= */

/* Credentials strip sits on the grid. Running the rules to the viewport edge while
   the cells stop at 1140 left the first and last cell looking unbounded. */
.inv-creds{ border-left:1px solid var(--inv-rule); border-right:1px solid var(--inv-rule); }

/* The conviction attribution is brand, not grey. */
.inv-panel-ink .inv-attr p{ color:var(--inv-brand); }

/* A centred band header has to centre its widgets too, not just the box. */
.inv-bandhead--centre .elementor-heading-title,
.inv-bandhead--centre p{ text-align:center !important; }

/* No rule above the first clock row: it collided with the intro above it. */
.inv-crail > .inv-crow:first-child{ border-top:0; padding-top:0; }
.inv-crail{ margin-top:6px; }

/* Fee notes read as a notes block, not as stray paragraphs pushed left. */

.inv-disclaims p{ max-width:none; font-size:13.5px; }

/* Guarantee columns adopt the header's split so the terms card lines up with the
   intro directly above it instead of sitting narrower than everything else. */
.inv-gcols{ column-gap:56px !important; }
.inv-gcols > .inv-gcol-a{ flex:0 0 46% !important; max-width:46% !important; }
.inv-gcols > .inv-gcol-b{ flex:1 1 0 !important; max-width:none !important; }

/* Close panel: actions on one line at one size; the deliverables become a card. */
.inv-ctarow{ }
.inv-ctarow .inv-cta .elementor-button{ font-size:15px; padding:17px 26px; }
.inv-panel-ink .inv-tlink2 p{ font-size:15px; }
.inv-panel-ink .inv-deliv{ background:#1B2432; border:1px solid #3A4250; border-radius:8px;
  padding:24px 26px 26px !important; border-top:1px solid #3A4250 !important; }
.inv-closelogo img{ width:172px; height:auto; }

/* ---- band 03 in three columns: method, instruments either side ---- */
.inv-split > .inv-figcol{ flex:0 0 240px; max-width:240px; }
.inv-figcol img, .inv-rail__head .inv-railfig img, .inv-subfig img{
  width:100%; height:auto; aspect-ratio:auto !important; object-fit:contain; }
.inv-subfig{ margin-top:20px; }

@media(max-width:1024px){
  .inv-split > .inv-figcol{ flex:1 1 100%; max-width:100%; }
}

/* ================= review round 4 ================= */

/* The tinted note block belongs to the FEE footnotes only. Applied to .inv-disclaims
   generally it boxed the BEI section-3(4) note and the EACG terms note as well. */
.inv-band .inv-disclaims{ background:none; border:0; padding:0; }
.inv-band .inv-disclaims--row{ background:var(--inv-surface); border:1px solid var(--inv-rule);
  border-radius:8px; padding:22px 26px; }

/* Column widths for the process band are scoped to that band. The unscoped version
   squeezed Benchmarking and EACG to a 320px heading column and wrapped their
   headlines to five lines. */
@media(min-width:1025px){
  .inv-procsplit > .inv-rail__head{ flex:0 0 280px !important; max-width:280px !important; }
  .inv-procsplit > .inv-figcol{ flex:0 0 280px !important; max-width:280px !important; }
  .inv-procsplit > .inv-flow{ flex:1 1 0 !important; max-width:none !important; }
}
/* Rail text fills its column; a 60% cap left a wide gap before the right figures. */
.inv-fstep > .inv-fbody{ flex:1 1 auto !important; width:auto !important; max-width:none !important; }

/* Centring: auto margins on the text elements themselves. Setting them on the
   Elementor column did nothing, which is why the heading sat left of its intro. */
.inv-bandhead--centre .inv-bh-l,.inv-bandhead--centre .inv-bh-r{ width:100% !important; max-width:none !important; flex:none !important; }
.inv-bandhead--centre .elementor-heading-title{ max-width:900px; margin-left:auto !important; margin-right:auto !important; }
.inv-bandhead--centre p{ max-width:780px; margin-left:auto !important; margin-right:auto !important; }

/* Credentials strip bounded at the grid, not at the viewport. */
.inv-creds{ border-left:0; border-right:0; }
.inv-cred:first-child{ border-left:1px solid var(--inv-rule); }
.inv-cred:last-child{ border-right:1px solid var(--inv-rule); }

/* Both close actions in one type: same family, size, weight and case. */
.inv-panel-ink .inv-cta .elementor-button{ text-transform:none !important; font-family:Rubik,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:0; }
.inv-ctarow .inv-tlink2 p, .inv-ctarow .inv-tlink2 a{ font-family:Rubik,sans-serif !important;
  font-size:15px !important; font-weight:600 !important; letter-spacing:0; }

/* The reset above is .inv-band .inv-disclaims (0,2,0); the fee block needs equal
   specificity and later position to win back its tint. */
.inv-band .inv-disclaims--row{ background:var(--inv-surface); border:1px solid var(--inv-rule);
  border-radius:8px; padding:22px 26px; }
/* Both close actions at exactly one size. */
.inv-panel-ink .inv-ctarow .elementor-button{ font-size:15px !important; padding:17px 28px !important; }

/* ================= review round 5 ================= */

/* Credentials cells need their own inset now the strip is bounded at the grid; the
   first cell was sitting flush against the new left border. */
.inv-cred{ padding-left:22px; padding-right:22px; }
.inv-cred:first-child{ padding-left:24px; }

/* Eyebrows in Innovast Blue -- the darkened variant, not #38B0F8. The lighter blue
   is 2.06:1 on white and fails AA, which is exactly why --inv-brand-ink exists:
   identical hue at 202 degrees, 5.51:1 on white. */
.inv-eyebrow p{ color:var(--inv-brand-ink); }
.inv-sectlabel p{ color:var(--inv-brand-ink); }

/* Close CTA: white fill, ink label. */
.inv-panel-ink .inv-ctarow .elementor-button{ background-color:#FFFFFF !important; color:var(--inv-ink) !important; }
.inv-panel-ink .inv-ctarow .elementor-button:hover{ background-color:var(--inv-brand) !important; color:var(--inv-ink) !important; }

/* Breathing room under every band header. The intro was landing almost on the first
   row of content, which is hardest to read exactly where the reader is deciding
   whether to carry on. */
.inv-bandhead{ margin-bottom:40px; }
.inv-bandhead--centre{ margin-bottom:44px; }
.inv-eyebrow{ margin-bottom:14px !important; }
.inv-bh-r .inv-sub p, .inv-bh-r .inv-fnote p{ line-height:29px; }

/* SUTO figure under the reasoning box in the guarantee column. */
.inv-gcol-a .inv-subfig{ margin-top:22px; }
.inv-gcol-a .inv-subfig img{ width:100%; height:auto; aspect-ratio:auto !important; }

/* The earlier brand-fill rule is '.inv-panel-ink .inv-cta a.elementor-button' -- the
   element selector makes it (0,3,1), so a (0,3,0) rule loses even with !important.
   Matching the shape rather than escalating. */
.inv-panel-ink .inv-ctarow a.elementor-button,
.inv-panel-ink .inv-ctarow .elementor-button{ background-color:#FFFFFF !important; color:var(--inv-ink) !important; }
.inv-panel-ink .inv-ctarow a.elementor-button:hover,
.inv-panel-ink .inv-ctarow .elementor-button:hover{ background-color:var(--inv-brand) !important; color:var(--inv-ink) !important; }

/* ================= /services/ hub, page 5237 =================
   Two components the audits page did not need. Everything else on the hub reuses
   what is already above. */

/* ---------- entry points ----------
   The hub publishes SIX floors, never a ladder -- rule 1 of the hub copy. The fee ROW
   component (.inv-frow / .inv-fprice) is deliberately NOT reused: a row table is
   exactly what that rule forbids, visually as well as literally, and reusing it would
   invite the full ladder to be pasted back in. These are tiles in a strip, each one a
   floor that points at the deep page carrying the real ladder.

   Markup mirrors .inv-fprice -- .from / .amt / .alt -- so the vocabulary in the canvas
   is the same, but figures set left rather than right-aligned to a table column.

   .from is set to a non-breaking space on the two entries that are NOT prices,
   'No fee' and 'No CAPEX from you'. 5202 omits the span entirely, which is correct for
   a vertical row list where nothing sits beside it. In a horizontal strip an omitted
   label lifts that tile's figure 18px above its neighbours and the row reads broken,
   so the slot is reserved and the figures share a baseline. Do not write 'Starts from'
   against either of them. */
.inv-entries > .inv-entry{ flex:0 0 calc((100% - 72px)/4); max-width:calc((100% - 72px)/4); }
.inv-entries--two > .inv-entry{ flex:0 0 calc((100% - 24px)/2); max-width:calc((100% - 24px)/2); }
.inv-entry{ border-top:1px solid var(--inv-rule-strong); padding-top:16px; }
.inv-eprice p{ margin:0; }
.inv-eprice .from{ display:block; font-family:Rubik,sans-serif; font-size:11px; font-weight:600;
  line-height:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--inv-meta); }
.inv-eprice .amt, .inv-eprice .alt{ display:block; font-family:Rubik,sans-serif; font-size:21px;
  font-weight:600; line-height:1.3; color:var(--inv-ink); font-variant-numeric:tabular-nums; }
.inv-eprice .amt{ margin-top:3px; }
/* Qualifier riding the numeral: 'RM50,000 commercial' at one size overruns a 235px
   tile. The numeral stays the figure; the sector word is set quiet beside it. */
.inv-eprice .q{ font-family:Karla,sans-serif; font-size:13px; font-weight:400; letter-spacing:0;
  color:var(--inv-meta); }
.inv-escope p{ font-size:14px; line-height:22px; color:var(--inv-meta); margin:10px 0 0;
  text-wrap:pretty; }
@media(max-width:1024px){
  .inv-entries > .inv-entry{ flex:0 0 calc((100% - 24px)/2) !important; max-width:calc((100% - 24px)/2) !important; }
}
@media(max-width:600px){
  .inv-entries > .inv-entry,
  .inv-entries--two > .inv-entry{ flex:1 1 100% !important; max-width:100% !important; }
}

/* ---------- inline links inside a service list ----------
   .inv-list carried no links on 5202, so an <a> there falls through to the kit's link
   colour -- the light brand blue, 2.06:1 on white. Scoped to the list, ink blue, and
   it announces itself rather than sitting invisible in running text. */
.inv-list a{ color:var(--inv-brand-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; }
.inv-list a:hover{ text-decoration-thickness:2px; }
.inv-list a:focus-visible{ outline:2px solid var(--inv-brand-ink); outline-offset:2px; }

/* Two service columns. Percentage widths plus a flex gap do not compose: 2 x 50% plus
   a 48px gap overflows and the row stacks. 47% each leaves the gap room. */
.inv-svccols > .inv-svccol{ flex:0 0 47%; max-width:47%; }
@media(max-width:1024px){ .inv-svccols > .inv-svccol{ flex:1 1 100%; max-width:100%; } }