/* ==========================================================================
   Innvestio theme - Step 1: header, drawer, hero, footer
   Loaded AFTER DefaultClean's styles.css (see Views/Shared/Head.cshtml), so
   stock nopCommerce pages keep their styling and these rules win where they
   overlap. Class names are namespaced (site-, hero-, fc-) to keep collisions
   with the stock sheet to a minimum.

   Every measured value carries the page coordinate it came from, in the
   1920px artboards. Brief sections: 11, 15, 16, 17, 19, 20, 21, 22.
   ========================================================================== */

:root {
    /* ---- palette -------------------------------------------------------- */
    --c-navy:          #132551;  /* drawer + dropdown panel, nav text on white */
    --c-navy-footer:   #122450;  /* footer base fill                           */
    --c-navy-glow:     #1A3C6D;  /* unused - footer now runs the band image    */
    --c-accent:        #32A2D4;  /* CTA fill, eyebrow, footer column headings  */
    --c-page:          #ECEFF0;  /* page background                            */
    --c-white:         #FFFFFF;

    /* Four muted slates. They are genuinely different in the design - see the
       note in brief section 19. Kept as separate tokens so the drift stays
       visible rather than being averaged away. */
    --c-slate-logo:    #4D5C7C;  /* logo on the solid header  (s21)  */
    --c-slate-label:   #465476;  /* footer T:/E:/A: labels    (s15)  */
    --c-slate-field:   #8992A8;  /* drawer field labels       (s19)  */
    --c-slate-body:    #9199AD;  /* drawer mission copy       (s19)  */
    --c-social:        #465477;  /* social icon circle fill          */

    /* ---- geometry ------------------------------------------------------- */
    /* The design drifts: hero card 15px, drawer 18px, footer 20px. One value,
       per the instruction repeated in brief sections 15, 16 and 19. 15px wins
       - it is what the hero card and the solid header both use. */
    --card-inset:      15px;
    /* D57 read this as ~7-8px off the flattened export. XD's own Appearance
       panel reports 12px on the partner strip and on the proof cards, so the
       estimate was low and the real value applies everywhere the token does -
       hero, footer, solutions cards, proof panel, presence cards. (Client,
       2026-09-21: "Make it 12px everywhere".) */
    --radius-card:     12px;
    --container:       1300px;   /* 310 -> 1610 at 1920                       */

    /* 62px is the measured gap in both headers at 1920, but it cannot be a
       constant: the nav is the only thing in the bar that can give. .iv-nav__list
       has no flex-wrap, every link is white-space:nowrap, and the logo and the
       burger are flex:none. Below ~1632px the overlay gutter has bottomed out at
       --card-inset, so the bar grows 1:1 with the viewport while the row spends
       8 of these gaps (6 in .iv-nav__list, 2 in .site-header__bar) - hence the
       /8 slope, which holds a constant ~38px of headroom all the way down
       instead of the 28px cliff the old max-width:1500 step dropped at 1501px.
       Calibrated on EL, the widest of the five navs: its non-gap row measures
       1053px against EN's 1019 (CDP, 2026-09-24). EN simply carries more slack,
       which margin-left:auto opens up in front of the nav exactly as D72 wants.
       The 20px floor meets the 1280 tier's 18px without a visible jump. (D263)
       The offset carries ~15px for the scrollbar, which 100vw includes and the
       bar's own width does not. */
    --nav-gap:         clamp(20px, calc((100vw - 1136px) / 8), 62px);
    --nav-gap-footer:  42px;
    --nav-size:        18px;     /* XD: header nav is Regular 18/23 (D84)    */

    --header-solid-h:    90px;
    --header-overlay-h:  66px;   /* y 34 -> 99 */
    --header-overlay-top: 34px;
    --header-overlay-inset: 179px;  /* measured gutter at 1920 (bar x 179 -> 1740)    */
    --header-bar-fit:      1562px;  /* the measured bar at 1920: x 179 -> 1741 (D262) */
    --admin-bar-h:          35px;   /* DefaultClean .admin-header-links, line-height  */

    /* Step 2. Section padding measured on Home.png: 102/111 (s2), 113/115 (s3),
       118 (s7) - one value for all of them. Division colours and the chip
       palette are locked by D34 and are copied from that document verbatim. */
    --sec-pad:            110px;
    --c-ppds:          #E23B2E;  /* PPDS red   (D34) */
    --c-fias:          #1F9D57;  /* FIAS green (D34) */
    --c-esg:           #A9781A;  /* ESG amber  (D34) */
    --c-body:          #6B7688;  /* About-card body copy (D34 --muted)      */
    --c-copy:          #7C8498;  /* section body copy - read off the XD panel */
    --c-hairline:      #E5E8EE;  /* card border             (D34 --line)  */

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Undoing DefaultClean. styles.css loads first (see Head.cshtml) and two of its
   rules actively fight the design. Both are listed here rather than fixed at
   the point of use, so the debt to the stock sheet stays in one place.
   -------------------------------------------------------------------------- */

/* .master-wrapper-content is width:90%, then 980px >=1001px and 1200px >=1367px.
   That container is what trapped the hero: it could not go full-bleed, the page
   showed grey margins either side of it, and the narrowed hero put Scroll Down
   on top of the headline. The theme's sections centre themselves on
   --container, so the wrapper itself must not centre anything. */
.html-innvestio .master-wrapper-content { width: 100%; }

/* .topic-block-body is text-align:justify, which the hero <h1> inherits through
   the TopicBlock component - that is the stretched word spacing on the headline.
   Justified text appears nowhere in the design. */
.html-innvestio .topic-block-body { text-align: start; }

/* ...and the same sheet also sets, at (0,1,1):
       .topic-block p { margin: 10px 0; text-align: justify; }
   A DIRECT rule on the element, so it beat both the inherited alignment above
   AND every theme rule written as a single class (0,1,0). One rule was causing
   three separate faults at once: the section body copy came back justified, the
   65px card padding was zeroed back to 10px 0, and every eyebrow, lede and
   group label sat left instead of centred - headings looked correct only
   because they are <h2>/<h3> and this rule does not match them.

   Neutralised with :where(p), which contributes NO specificity: the selector
   scores (0,2,0), enough to outrank (0,1,1) but low enough that a plain
   `.html-innvestio .sec__lede` further down still wins on source order. Every
   theme rule that styles a <p> inside a Topic carries that prefix. (D83) */
.html-innvestio .topic-block :where(p) {
    margin: 0;
    text-align: inherit;
}

/* ...and one more rule from the same sheet, also at (0,1,1):
       .topic-block a, .topic-page a { text-decoration: underline; }
   It outranks every single-class theme rule, so EVERY link the client's Topic
   HTML carries came back underlined - the hero's "Start the conversation"
   pill, .kn-cta, .pf-card__link, .pr-card__link - and none of them is
   underlined anywhere in the design. (.sv-card__link and .au-link already
   carried the .html-innvestio prefix for exactly this reason.)

   Neutralised the same way as the <p> rule above: :where(a) contributes no
   specificity, so the selector scores (0,2,0) - enough to beat (0,1,1), low
   enough that the theme's own underline rules, all (0,3,0) once :hover counts,
   still win. A link that SHOULD be underlined opts in explicitly. (D83) */
.html-innvestio .topic-block :where(a) { text-decoration: none; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.html-innvestio body {
    background: var(--c-page);
    font-family: "proxima-nova", "Proxima Nova", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--c-navy);
    -webkit-font-smoothing: antialiased;
}

/* The Adobe kit has no bold italic (D25/D18) - never let the browser
   synthesise one. */
.html-innvestio em strong,
.html-innvestio strong em,
.html-innvestio b i,
.html-innvestio i b { font-style: normal; }

.iv-container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* The logo is an alpha mask extracted from the artboards, so one file renders
   white, slate or navy. Replace with an SVG if Q18 ever lands - the CSS below
   does not change, only the mask-image URL. */
.iv-logo {
    display: block;
    width: 172px; height: 42px;
    background-color: currentColor;
    -webkit-mask: url("../images/logo.png") no-repeat center / contain;
            mask: url("../images/logo.png") no-repeat center / contain;
}

.iv-logo--mark {
    width: 43px;
    -webkit-mask-image: url("../images/logo-mark.png");
            mask-image: url("../images/logo-mark.png");
}

/* --------------------------------------------------------------------------
   Header - one markup, two skins (D40), sticky with a scroll swap (D56)
   -------------------------------------------------------------------------- */

.site-header {
    z-index: 100;
    transition: padding .35s var(--ease);
}

.site-header__bar {
    display: flex;
    align-items: center;
    /* The bar's own gap is the nav rhythm, so nav -> aside matches the 63px
       measured between B2B Portal and EN. The logo -> nav distance is not this
       gap: .site-header__nav takes the slack with margin-left:auto (D72). */
    gap: var(--nav-gap);
    height: var(--header-solid-h);
    /* The white skin spends 110px on its own padding against the overlay pill's
       19+34, so on the same viewport it runs out ~57px sooner - at 1600 in Greek
       the burger sat 20px from the bar's end instead of 55. It eases down to the
       28px the old 1500 step used, over the range where the row is tightest, and
       is back at the measured 55px from ~1700 up. (D264) */
    padding-inline: clamp(28px, calc(55px - (1700px - 100vw) / 4), 55px);
    background: var(--c-white);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    transition: height .35s var(--ease), background .35s var(--ease),
                border-radius .35s var(--ease), backdrop-filter .35s var(--ease);
}

/* --- solid variant: inner pages. Sticks in flow, so no compensating body
       padding is needed. Measured x 15 -> 1904, y 0 -> 89 (brief s21). ------ */
.site-header--solid {
    position: sticky;
    top: 0;
    padding-inline: var(--card-inset);
}

/* --- overlay variant: home only. Floats over the hero video. Measured bar
       x 179 -> 1740, y 34 -> 99 (brief s11/s17). --------------------------- */
.site-header--overlay {
    position: fixed;
    inset: 0 0 auto 0;
    /* The gutter is the measured 179px at 1920 and then gives way only as fast
       as the bar's contents need the room, down to the card inset. A hard 179px
       was what pushed B2B Portal, EL and the burger outside the pill at every
       width between 1500 and 1920 - the old 1500px step came too late and
       jumped too far.

       D262: that clamp was right in shape and wrong in both of its numbers, so
       the symptom survived it. --header-bar-fit was 1440px, which is neither the
       measured bar (1562px: x 179 -> 1741) nor a content-box figure - the bar
       then spends 19+34 of its own padding, so the clamp was guaranteeing a
       1387px content box to a row that needs ~1500. And the middle regime pins
       the bar at exactly --header-bar-fit for a 328px stretch of viewport, so
       between ~1500 and ~1900 the bar did not grow at all while --nav-gap had
       just jumped from 34 to 62 at the 1501px step. 100% rather than 100vw
       because this element is fixed to the ICB, which excludes the classic
       scrollbar that 100vw counts - 15px that came straight off the bar. */
    padding: var(--header-overlay-top) 0 0;
    padding-inline: clamp(var(--card-inset),
                          calc((100% - var(--header-bar-fit)) / 2),
                          var(--header-overlay-inset));
}

/* nopCommerce renders a 35px admin bar above everything for signed-in admins,
   in normal flow - but this header is fixed at top:0 and does not know about
   it, so the pill rode 35px too high. Its upper edge then sat over the page
   background above the hero and backdrop-filter blurred that light grey into a
   white band across the top of the bar. With the offset the bar sits 15px
   below the hero's top edge, exactly as it does in the artboard (hero y 19,
   bar y 34). Once stuck the admin bar has scrolled away, so it returns to 0.
   Only admins ever see this; the public page was always correct. (D76) */
.master-wrapper-page:has(> .admin-header-links) .site-header--overlay {
    top: var(--admin-bar-h);
}

.master-wrapper-page:has(> .admin-header-links) .site-header--overlay.is-stuck {
    top: 0;
}

.site-header--overlay .site-header__bar {
    height: var(--header-overlay-h);
    /* Asymmetric in the design, not a slip: bar 179 -> 1741, logo ink starts at
       198 (19px) but the burger ends at 1707 (34px). Optical correction for the
       burger glyph, kept as measured. */
    padding-inline: 19px 34px;
    background: rgba(255, 255, 255, .13);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    /* Not a pill. Measured off Home.png at the bar's left end (x 179, y 34-99):
       the corner rounds over ~8px, the same token as every other panel (D57).
       The earlier calc(--header-overlay-h / 2) came from the brief's s17 note,
       which recorded 33px - that note is wrong, see D66. */
    border-radius: var(--radius-card);
}

/* --- D56: once the hero is scrolled past, the overlay becomes the solid skin.
       Reverses D41. `.is-stuck` is only ever set on the overlay variant. ---- */
.site-header--overlay.is-stuck {
    padding: 0 var(--card-inset);
}

.site-header--overlay.is-stuck .site-header__bar {
    height: var(--header-solid-h);
    /* Same white skin, same arithmetic as .site-header__bar above (D264). This
       selector is (0,3,0) and has to restate it, because the overlay pill's
       19px/34px at (0,2,0) would otherwise win once .is-stuck is on. */
    padding-inline: clamp(28px, calc(55px - (1700px - 100vw) / 4), 55px);
    background: var(--c-white);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: 0 2px 16px rgba(19, 37, 81, .08);
}

/* Colour is the only other thing the two skins disagree about. */
.site-header__bar { color: var(--c-slate-logo); }                 /* logo ink */
.site-header--overlay .site-header__bar { color: var(--c-white); }
.site-header--overlay.is-stuck .site-header__bar { color: var(--c-slate-logo); }

.site-header__home { display: flex; flex: none; color: inherit; }

/* The nav takes the slack, not the aside. Measured across the bar at 1920:
   logo ink 198-369, nav 523-1531, EN 1595-1629, burger 1683-1707. That is
   153px between the logo and the nav but only 63px between the nav and EN -
   the language switcher continues the nav's own rhythm rather than sitting
   apart from it. margin-left:auto on .site-header__aside produced the mirror
   image of that: the nav hugged the logo and every spare pixel opened up in
   front of EN. (D72) */
.site-header__nav { margin-left: auto; }

.site-header__aside {
    display: flex;
    align-items: center;
    gap: 53px;                                  /* EN ends 1629 -> burger 1683 */
}

/* --------------------------------------------------------------------------
   Navigation - one list, three renderings (D16 / D46)
   The 62px gap is measured identically in the overlay and solid headers; the
   footer runs the same seven items at 42px (brief s21).
   -------------------------------------------------------------------------- */

.iv-nav__list {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
    margin: 0; padding: 0;
    list-style: none;
}

.iv-nav__item { position: relative; }

.iv-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;                                   /* label 1388 -> chevron 1397 */
    font-size: var(--nav-size);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--c-navy);
    background: none; border: 0; padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* Talk to Us and B2B Portal carry no destination (client, 2026-09-17). They keep
   their place, so the seven-item bar the header geometry is measured against is
   unchanged - they simply do not respond. Same for "Events" in the dropdown. */
.iv-nav__link--inert,
.iv-nav__menu .iv-nav__label {
    cursor: default;
}

.site-header--overlay:not(.is-stuck) .iv-nav__link { color: var(--c-white); }

.iv-nav__link:hover,
.iv-nav__link:focus-visible { color: var(--c-accent); }

.iv-nav__chevron {
    width: 10px; height: 6px;                   /* measured 1397 -> 1406 */
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s var(--ease);
}

.iv-nav__item.is-open .iv-nav__chevron { transform: rotate(180deg); }

/* --- Knowledge dropdown (D55, brief s20) ------------------------------------
   The design shows these two items as bare white text directly on the hero
   video. D55 adds a panel: that is a deliberate departure, because unmediated
   text over moving footage is not legible. Geometry below is measured; only
   the panel itself is new. */
.iv-nav__menu {
    position: absolute;
    top: calc(100% + 15px);                     /* bar bottom 99 -> item 114 */
    left: -20px;                                /* panel edge aligns to 1301 */
    min-width: 232px;
    margin: 0;
    padding: 16px 20px;
    list-style: none;
    background: rgba(19, 37, 81, .9);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: var(--radius-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.iv-nav__item.is-open .iv-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.iv-nav__menu li + li { margin-top: 18px; }     /* 33px pitch, 15px ink band */

.iv-nav__menu a,
.iv-nav__menu .iv-nav__label {
    display: block;
    font-size: var(--nav-size);
    line-height: 1;
    color: var(--c-white);
    text-decoration: none;
    white-space: nowrap;
}

.iv-nav__menu a:hover,
.iv-nav__menu a:focus-visible { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   Language selector + drawer trigger
   -------------------------------------------------------------------------- */

.iv-lang { position: relative; }

.iv-lang__current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-navy);
    background: none; border: 0; padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.site-header--overlay:not(.is-stuck) .iv-lang__current { color: var(--c-white); }

.iv-lang__menu {
    position: absolute;
    top: calc(100% + 14px);
    right: -14px;
    min-width: 104px;
    margin: 0; padding: 10px 0;
    list-style: none;
    background: var(--c-white);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 28px rgba(19, 37, 81, .16);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.iv-lang.is-open .iv-lang__menu { opacity: 1; visibility: visible; transform: none; }

.iv-lang__menu a {
    display: block;
    padding: 8px 18px;
    font-size: 14px;
    color: var(--c-navy);
    text-decoration: none;
}

.iv-lang__menu a:hover { background: var(--c-page); }
.iv-lang__menu [aria-current="true"] { color: var(--c-accent); font-weight: 600; }

/* Hamburger - measured 25px wide, x 1683 -> 1707 (brief s17).
   Traced from Assets/Batch/"Component 2 - 1{, (Hover State)}.png": three 2px
   square-ended bars on an 8px pitch. The middle bar is short (18px) at rest
   and runs out to the full 25px on hover - that extension is the whole
   hover interaction in the design. */
.iv-burger {
    width: 25px; height: 18px;
    flex: none;
    display: flex; flex-direction: column; justify-content: space-between;
    background: none; border: 0; padding: 0;
    cursor: pointer;
}

.iv-burger span {
    display: block;
    width: 25px; height: 2px;
    border-radius: 0;
    background: var(--c-navy);
    transition: background .35s var(--ease), width .35s var(--ease);
}

.iv-burger span:nth-child(2) { width: 18px; }

.iv-burger:hover span:nth-child(2),
.iv-burger:focus-visible span:nth-child(2) { width: 25px; }

.site-header--overlay:not(.is-stuck) .iv-burger span { background: var(--c-white); }

@media (prefers-reduced-motion: reduce) {
    .iv-burger span { transition: none; }
}

/* --------------------------------------------------------------------------
   Off-canvas drawer (brief s19)
   Panel 471 x 900, flat #132551, 40px padding, 8px radius.
   The design shows no scrim; one is added here because a right-hand drawer
   over a light page with no dimming is easy to lose. Flagged for sign-off.
   -------------------------------------------------------------------------- */

.iv-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(19, 37, 81, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
}

.iv-drawer-scrim.is-open { opacity: 1; visibility: visible; }

.iv-drawer {
    position: fixed;
    z-index: 120;
    top: var(--card-inset);
    right: var(--card-inset);
    bottom: var(--card-inset);
    width: 471px;
    max-width: calc(100vw - (var(--card-inset) * 2));
    padding: 40px;
    overflow-y: auto;
    background: var(--c-navy);
    border-radius: var(--radius-card);
    color: var(--c-white);
    transform: translateX(calc(100% + var(--card-inset)));
    transition: transform .35s var(--ease);
}

.iv-drawer.is-open { transform: none; }

.iv-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 44px;                        /* logo row 1196 -> copy 1240 */
    color: var(--c-white);
}

.iv-drawer__close {
    width: 24px; height: 24px;                  /* measured 24 x 24 */
    flex: none;
    background: none; border: 0; padding: 0;
    cursor: pointer;
    background-color: var(--c-white);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3l18 18M21 3L3 21' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3l18 18M21 3L3 21' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The drawer nav is the header nav's small-screen home, so it is hidden until
   the bar gives the list up (<=1024px, D75). Two bugs lived here: there was no
   base rule at all, so the <nav> was visible on every screen; and it inherited
   .iv-nav__list's flex ROW, which is ~1000px wide for seven items and gave the
   471px panel its own horizontal scrollbar. In the drawer the list stacks. */
.iv-drawer__nav {
    display: none;
    margin-bottom: 50px;
}

.iv-drawer__nav .iv-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.iv-drawer__nav .iv-nav__link {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-white);
}

.iv-drawer__nav .iv-nav__link:hover,
.iv-drawer__nav .iv-nav__link:focus-visible { color: var(--c-accent); }

/* Knowledge keeps its two children in the drawer (D77), but expands INLINE.
   The header's .iv-nav__menu is an absolutely positioned panel with its own
   fill and blur - dropped on top of a scrolling 471px column it would cover
   the items beneath it, and the panel fill would sit on a background it was
   never designed against. Same markup, same JS, different geometry. */
.iv-drawer__nav .iv-nav__menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 18px 0 0;
    padding: 0 0 0 16px;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}

.iv-drawer__nav .iv-nav__item.is-open .iv-nav__menu { display: block; }

.iv-drawer__nav .iv-nav__menu li + li { margin-top: 14px; }

.iv-drawer__nav .iv-nav__menu a,
.iv-drawer__nav .iv-nav__menu .iv-nav__label {
    font-size: 14px;
    line-height: 1.3;
    color: var(--c-slate-body);
    white-space: normal;                        /* the panel is narrow here */
}

.iv-drawer__nav .iv-nav__menu a:hover,
.iv-drawer__nav .iv-nav__menu a:focus-visible { color: var(--c-accent); }

/* Mission copy - 16px / 25px, 50px between paragraphs (= 2x the line pitch) */
.iv-drawer__intro .topic-block-body > p,
.iv-drawer__intro > p {
    margin: 0 0 25px;
    font-size: 16px;
    line-height: 25px;
    color: var(--c-slate-body);
}

.iv-drawer__intro .topic-block-body > p:last-child { margin-bottom: 0; }

.iv-drawer__heading {
    margin: 0 0 22px;                           /* heading box -> label box */
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--c-white);
}

/* The six drawer gaps are re-measured off the XD export as BOX-TO-BOX gaps.
   The previous set (122 / 47 / 26 / 56 / 114 / 59) were deltas between text
   ORIGINS, which carry a line's own leading with them, so every gap on screen
   ran ~20px looser than the drawing. Same artboard, read the way a CSS margin
   actually behaves. */
.iv-drawer__contact { margin-top: 103px; }      /* copy box -> heading box */

.iv-drawer__field + .iv-drawer__field { margin-top: 34px; }  /* value -> label */

.iv-drawer__label {
    display: block;
    margin-bottom: 8px;                         /* label box -> value box */
    font-size: 14px;
    line-height: 1;
    color: var(--c-slate-field);
}

.iv-drawer__value {
    display: block;
    font-size: 16px;
    line-height: 1;
    color: var(--c-white);
    text-decoration: none;
}

a.iv-drawer__value:hover { color: var(--c-accent); }

/* Both margins collapse against .iv-drawer__heading's 22px bottom margin and
   win it, which is why the heading rule above needs no exception for the
   social heading. */
.iv-drawer__social-heading { margin-top: 91px; }  /* address box -> heading box */
.iv-drawer__socials { display: flex; gap: 10px; margin-top: 38px; }

/* --------------------------------------------------------------------------
   Social icons - shared by the drawer and the footer
   -------------------------------------------------------------------------- */

.iv-social {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--c-social);
    transition: background .2s var(--ease);
}

.iv-social:hover { background: var(--c-accent); }

.iv-social::before {
    content: "";
    width: 15px; height: 15px;
    background-color: var(--c-white);
    -webkit-mask: var(--icon) no-repeat center / contain;
            mask: var(--icon) no-repeat center / contain;
}

.iv-social--linkedin {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.76-1.95C21.3 8.75 22 11.2 22 14.4V21h-4v-5.9c0-1.4-.03-3.2-2-3.2-2 0-2.3 1.53-2.3 3.1V21h-3.7z'/%3E%3C/svg%3E");
}

.iv-social--youtube {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12s0-3.8-.48-5.6a2.9 2.9 0 00-2.05-2.06C18.66 3.86 12 3.86 12 3.86s-6.66 0-8.47.48A2.9 2.9 0 001.48 6.4C1 8.2 1 12 1 12s0 3.8.48 5.6a2.9 2.9 0 002.05 2.06c1.81.48 8.47.48 8.47.48s6.66 0 8.47-.48a2.9 2.9 0 002.05-2.06C23 15.8 23 12 23 12zM9.75 15.4V8.6L15.6 12z'/%3E%3C/svg%3E");
}

.iv-social--facebook {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.2v1.8H8V12h2.6v9H14v-9h2.6l.4-3.5z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Hero (brief s12 / s16). D53 moved the content off the design's 235px left
   edge onto the 310px page container - the card, the One Group panel and the
   Scroll Down affordance keep their measured positions.
   -------------------------------------------------------------------------- */

/* min-height, not height. The band's own size is a vw curve but its CONTENTS
   are not: the 279px top padding and the 52px CTA are fixed, and the headline
   bottoms out at its clamp floor of 30px. Below ~1200 the sum outgrows the
   clamp - at 1167 it needs 583 against the 560 floor - and .hero is
   overflow:hidden, so the CTA and the card's last line were cut off. Growing
   instead of clipping costs nothing at 1920, where the contents come to ~698
   against 880 and the floor still governs. */
.hero {
    position: relative;
    margin: 19px var(--card-inset) 0;           /* card top y 19 */
    height: auto;
    min-height: clamp(560px, 45.8vw, 880px);    /* 880/1920 */
    border-radius: var(--radius-card);
    overflow: hidden;
    isolation: isolate;
}

.hero__media,
.hero__overlay {
    position: absolute;
    inset: 0;
}

/* Positive z-indexes rather than negative ones: a negative z-index child can
   slip behind an ancestor's background depending on where stacking contexts
   land, and .master-wrapper-content already makes one. */
.hero__media {
    z-index: 0;
    /* Carries first paint, and is what shows if the poster is missing - which
       it currently is, since producing it needs ffmpeg (open item in s12). */
    background: #0D1B3D;
}

.hero__media video,
.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.hero__overlay {
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 27, 61, .78), rgba(37, 53, 87, .68));
}

.hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container);               /* centres to 310 -> 1610 */
    margin-inline: auto;
    padding: 279px 24px 60px;                  /* eyebrow ink top y 298 */
    /* height:auto, or the inner box keeps the band's old fixed size and clips
       identically however much .hero is allowed to grow. The 60px foot is what
       the CTA now has to sit above once the band is content-driven. */
    height: auto;
}

.html-innvestio .hero__eyebrow {
    margin: 0 0 38px;
    font-size: 15px;                            /* XD: Semibold 15/25, 0.75px */
    line-height: 25px;
    font-weight: 600;
    letter-spacing: .75px;
    text-transform: uppercase;
    color: var(--c-accent);
}

.hero__headline {
    margin: 0;
    /* XD is Semibold 50/66, but at 50px the third line ("Food, Cosmetics,
       Pharma & HORECA Markets") runs 22px UNDER .hero__card, where the card's
       backdrop-filter smears the final "s". Cause: D53 moved this copy off the
       design's 235px left edge onto the content container (334px once the 24px
       padding counts) - 99px right - while the card kept its measured x (1337).
       Measured on the artboard, the design leaves an 88px gap there; D53 spent
       all of it. 44px restores ~102px of gap at 1920 and clears the card's top
       edge vertically too. The vw term drops with the cap (44/1920 = 2.29vw) so
       the clearance holds at every width down to 1500, below which the card
       moves right to 40px and the question stops arising. */
    font-size: clamp(30px, 2.29vw, 44px);      /* was 2.6vw / 50px - see above */
    line-height: 1.32;                         /* 66 / 50, kept as a ratio */
    font-weight: 600;
    color: var(--c-white);

    /* A max-width IS needed, and the earlier "16em wrapped the designed lines"
       note had the right objection but the wrong bound. Without one the
       headline simply keeps going into .hero__card's column and the card's
       backdrop-filter smears it - visible in English from ~1100 down, and in
       Greek much earlier, because the translated lines are longer.

       The bound is where the card starts, and the card is anchored to the
       BAND's right edge while the headline is anchored to the centred 1300
       container - so the overlap between them closes as the viewport narrows
       and no percentage describes it. Above 1500 the card is 467 wide at
       right:101, i.e. 568 in from the band's edge, so

           available = 1252 - (568 - (100vw - 30 - 1300)/2) - 40 gap
                     = 50vw - 21

       which is 939px at 1920 - clear of the longest English line at 44px, and
       narrow enough that the longer Greek one wraps rather than slides under.
       Wrapping past the designed <br>s is the correct outcome here; the copy
       staying legible matters more than the three-line shape. The ≤1500 and
       ≤1024 tiers restate this - see those blocks. */
    max-width: calc(50vw - 21px);
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 70px;                          /* headline end 517 -> CTA 587 */
    min-width: 250px; height: 52px;            /* measured: both CTAs are 52 tall */
    padding: 0 4px 0 21px;
    border-radius: 26px;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 20px;                           /* XD: Semibold 20/24 */
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s var(--ease);
}

.hero__cta:hover { background: #2b8dba; color: var(--c-white); }

/* The disc is SOLID NAVY with the same diagonal arrow the cards use - measured
   on both CTAs in Home.png: 43px, inset 4px from the pill's right edge, 15px
   after the label. It was previously a translucent white disc with a straight
   right arrow, which matched neither button in the design. */
.hero__cta::after {
    content: "";
    margin-left: auto;
    flex: none;
    width: 43px; height: 43px;
    border-radius: 50%;
    /* The old path only covered the middle ~half of its own 24-unit viewBox
       (ink ran 6->18 on both axes), so background-size was NOT the glyph size:
       `/ 17px` drew about 8.5px of arrow. Re-authored so the ink fills the
       viewBox corner to corner - endpoints sit at 1 and 23, and the 2-unit
       stroke's round caps take it the last unit each way. background-size is
       now the arrow's real size. Head arms stay at 0.8 of the diagonal.

       XD measures the arrow at 23.81 inside the 43px disc; 14px is the
       client's call (2026-09-21). */
    background: var(--c-navy)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 23L23 1M5.4 1h17.6v17.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 14px;
}

/* "One Group" card - measured 467 x 238 at x 1336 -> 1803, y 536 -> 774.
   It overhangs the 1300px container by design, so it is anchored to the hero
   card's right edge (1904 - 1803 = 101px) rather than to the container. */
.hero__card {
    position: absolute;
    z-index: 2;
    right: 101px;
    top: 58.7%;                                /* (536 - 19) / 880 */
    width: 467px;
    padding: 30px 36px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    color: var(--c-white);
}

/* Stock styles.css ships `.topic-block { margin: 0 0 25px; }`, and the card's
   copy comes through TopicBlock - so 25px of dead space sat between "Unified
   Expertise." and the card's bottom edge, making the bottom gap 55px against
   the top's 30px. Scoped to the card rather than reset globally: the sections
   further down were spaced with that margin already in place. */
.hero__card .topic-block { margin: 0; }

.hero__card .iv-logo { margin-bottom: 26px; color: rgba(255, 255, 255, .55); }

.html-innvestio .hero__card p {
    margin: 0;
    font-size: 32px;                            /* XD: Extrabold 32/39 */
    line-height: 39px;
    font-weight: 800;
    text-align: left;
}

/* Scroll Down - label rotated 90deg, x 55 -> 75 (i.e. 40px inside the card) */
.hero__scroll {
    position: absolute;
    z-index: 2;
    left: 40px; bottom: 36px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    color: var(--c-white);
    text-decoration: none;
    font-size: 17px;                           /* XD: Semibold 17/21 */
    line-height: 21px;
    font-weight: 600;
}

/* XD reads the label bottom-to-top (baseline on the right, "S" at the bottom),
   which is the natural pairing with the arrow sitting below it. `vertical-rl`
   alone reads top-to-bottom; the 180deg flip turns it the other way. Done with
   a transform rather than `sideways-lr`, which only Firefox supports. */
.hero__scroll span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .02em;
}

.hero__scroll::after {
    content: "";
    flex: none;
    width: 37px; height: 37px;                 /* XD: 37 x 37 (was an eyeballed 28) */
    border-radius: 50%;
    background: rgba(255, 255, 255, .18)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 18px;               /* kept at half the disc */
}

/* --------------------------------------------------------------------------
   Footer (brief s15 / s22)
   Inset rounded card, on the same fill as the navy bands.
   -------------------------------------------------------------------------- */

/* The footer runs the SAME band image as .sec--presence / .sec--form /
   .nw-hero, at the client's instruction - it used to have a gradient of its
   own (--c-navy-footer + --c-navy-glow at 78% 50%) whose glow sat centre-right
   rather than top-right, so the footer read as a different blue to every other
   navy surface on the site.

   The batch does hold a footer-shaped export of the same gradient (moise-2.png,
   1880 x 790 - exactly this card's measured size), but it is the same artwork
   as moise.png with the glow in the same relative spot, so there is nothing to
   gain from a second asset. One file, one cache entry, guaranteed to match. */
.site-footer {
    position: relative;
    margin: 0 var(--card-inset) var(--card-inset);
    padding: 69px 0 60px;                      /* panel top -> logo row */
    border-radius: var(--radius-card);
    background: #142353 url("/images/home/band-bg.jpg") no-repeat center / 100% 100%;
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

/* The mark in the bottom-right is a real export, XD "Mask Group 23", 723 x 521.
   Reverses D60, which built it out of the 43px logo-mark.png under a mask and
   a tint - the shape is NOT the plain logo and was never going to be reachable
   that way. It also closes B7: the chevrons along the bottom edge are the foot
   of this same artwork, not a second layer.

   Client's XD inspector gives the placement outright:
       top 7485  left 1177  width 723  height 521
   The footer card measures x 20..1899, y 7216..8005 on the artboard, so inside
   the card that is left 1157 / top 269 - and 1157 + 723 = 1880 and 269 + 521 =
   790 are exactly the card's width and height. The artwork is flush into the
   bottom-right corner, which is why this is right/bottom 0 rather than a pair
   of measured offsets.

   No mask, no tint, no filter, no opacity: the export is finished artwork,
   accent blue (#2CA0D3) with its own alpha topping out at 138/255. XD reports
   opacity 1 and the asset needs none of its own.

   The asset is the SOURCE, and the artboard renders it BLURRED - XD's CSS
   inspector does not export effects, so the panel's `opacity: 1` and nothing
   else does not mean the layer is unfiltered. Cropping the artboard's own
   decorative region and putting it beside a sharp composite settles it in one
   look: the artboard has a soft medallion there and no sharp lattice at all.

   Radius fitted rather than eyeballed. Blurred copies of the asset were scored
   against (artboard - pure gradient) over 34,416 sampled points, least squares
   on a single scale factor. The curve has a real minimum:

       sigma  0 -> rms 11.51      sigma 18 -> rms 10.52
       sigma 10 -> rms 10.57      sigma 22 -> rms 10.56
       sigma 14 -> rms 10.50      sigma 32 -> rms 10.72

   so sigma 14, and the fitted scale converts to about .86 for accent over this
   ground. CSS blur() takes the standard deviation, hence blur(14px).

   ⚠️ Do NOT re-derive the radius from 1-D profiles through the artboard. The
   lines are 1-3px in tight clusters, so a coarse profile smears a cluster into
   a fake Gaussian and a fine one reads the individual lines as sharp - this was
   measured both ways and gave two different wrong answers before the 2-D fit.

   The blur is BAKED INTO THE ASSET rather than applied with filter: blur(),
   because CSS cannot produce the edge the artboard has. filter: blur() treats
   everything outside the image as transparent, so artwork that runs to the
   image's edge fades out across the last ~2 sigma - which left a dead strip
   along the bottom of the card where the design has none. Measured against the
   artboard over the card's last rows (mean delta across x 1400-1870):

       card y      775    785
       artboard   5.65   3.48
       zero-pad   3.55   1.99   <- filter: blur()
       clamped    4.22   3.90   <- what ships

   So wwwroot/images/home/footer-mark.png is NOT the raw export: it is Mask
   Group 23 blurred at sigma 14 with CLAMPED edges (the artwork treated as
   continuing past the crop) and the fitted .86 folded into its alpha, which is
   why this rule carries no filter and no opacity. Peak alpha 59/255. The
   unblurred original stays at Assets/Batch/Mask Group 23.png - regenerate from
   there, do not re-blur the shipped file.

   The sharp chevrons on the bottom edge are a separate object - ::after. */
.site-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0; bottom: 0;
    width: 723px; height: 521px;
    background: url("/images/home/footer-mark.png") no-repeat center / contain;
    pointer-events: none;
}

/* The sharp chevrons hard on the footer's bottom edge. They are NOT part of
   Mask Group 23 - subtracting the gradient and the soft mark above from the
   artboard leaves the whole right-hand side at noise level except these, which
   appear only in the card's last ~30px (mean leftover 0.1 at y 760, jumping to
   44 / 42 / 83 at y 770 / 780 / 788).

   They matter more than their size suggests: measured across the client's own
   two screenshots, calibrated off the card width, the bottom band peaks at
   brightness 99 in XD against 60 in our build, and the soft mark alone only
   reaches 60. The chevrons are the thing the eye actually catches down there -
   which is why the band read as empty while the blur underneath was already
   correct to within a couple of levels.

   ⚠️ This asset is EXTRACTED FROM THE ARTBOARD, not exported from XD. It is the
   residual (artboard − gradient − soft mark) over card x 950-1880 / y 680-790,
   thresholded above the noise floor, tinted --c-accent and scaled so its peak
   delta matches the artboard's measured 45. That is sound at 1:1 - the card is
   1880 wide at a 1920 viewport and this sits at native size - but it carries
   the export's antialiasing and stops 8px short of the card's bottom edge,
   where the rounded corner made the residual unreliable. Replace it with a real
   export when XD can give one; the object still has no name here. */
/* The -3/-6 offsets are the client's, off a devtools edit. They pull the
   artwork back into the corner the extraction had to give up - the asset holds
   14px of blank at its right and 8px at its bottom for exactly that reason - so
   this is putting back most of what the corner exclusion cost rather than
   moving the design. The chevrons now run under the card's rounded corner,
   which is what the artboard shows; overflow:hidden clips them to the radius. */
.site-footer::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -3px; bottom: -6px;
    width: 930px; height: 110px;
    background: url("/images/home/footer-chevrons.png") no-repeat right bottom / 930px 110px;
    pointer-events: none;
}

/* XD measures 171.8px from the logo's box to the first nav item - box to box,
   so it is the flex gap, and it was 60. That 112px is why the whole nav row
   sat left of the artboard's.

   It does not fit the page's 1300 container: the logo is 230, the seven labels
   at 18px with 42px gaps run ~951 (XD has the nav at 647 -> 1598), so the row
   needs 230 + 172 + 951 = 1353 against the 1252 that 1300 minus its gutters
   leaves. Hence the wider measure on the footer's own container below - the
   footer is a full-bleed inset card, not part of the page grid, so widening it
   costs nothing elsewhere. */
.site-footer__top {
    display: flex;
    align-items: center;
    gap: 171.8px;
    margin-bottom: 80px;                       /* nav row 7355 -> headings 7435 */
    color: var(--c-white);
}

/* 1430 - 2 x 24 = 1382, which is the artboard's own footer span (logo ink at
   216, nav ending at 1598). The contact grid below rides the same container
   and moves out with it, toward the 221 XD starts its first column at. */
.site-footer .iv-container { max-width: 1430px; }

.site-footer__top .iv-nav__list { gap: var(--nav-gap-footer); }
.site-footer__top .iv-nav__link { color: var(--c-white); line-height: 23px; }

/* XD: the footer logo is 230 x 56.48, larger than the header's 172 x 42. */
.site-footer .iv-logo { width: 230px; height: 56px; }
.site-footer__top .iv-nav__link:hover { color: var(--c-accent); }

/* The footer nav is a plain list - the Knowledge dropdown belongs to the
   header only. */
.site-footer__top .iv-nav__chevron,
.site-footer__top .iv-nav__menu { display: none; }

/* --- the contact grid. Its content is a single Topic (D58), so these rules
       style markup the client can edit. Keep the class contract stable. ----- */
.fc-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 99px 63px;                            /* normalised from 53/74 drift */
}

/* XD: Semibold 15/25, 0.75px tracking, uppercase, and the rule sits 8px under
   the cap - not the 12px first built. */
.fc-col__title {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-page);
    font-size: 15px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: .75px;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* .fc-item is a <p> inside the footer-contacts Topic, so it needs the
   .html-innvestio prefix to clear the stock .topic-block p rule - without it
   D83's neutraliser zeroes these margins. XD: Regular 16/25, items 19px apart,
   not the 37px first built. */
.html-innvestio .fc-item {
    display: flex;
    gap: 0;
    margin: 19px 0 0;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
}

.fc-label {
    flex: none;
    width: 26px;                               /* label 308 -> value 334 */
    color: var(--c-slate-label);
}

.fc-value { color: var(--c-white); }
/* Phone and email values carry no underline at rest and DO underline on hover
   (client, 2026-09-21). Stated at (0,3,0) rather than the bare `.fc-value a`
   (0,1,1), so D156's Topic-wide `:where(a)` neutraliser - which is (0,2,0) and
   would otherwise strip this back to none - does not reach it.

   :focus-visible is given the same treatment as :hover. It is the keyboard
   equivalent of the same affordance, and these are the footer's only real
   links. 3px offset matches .sv-card__link. */
.html-innvestio .fc-value a { color: inherit; text-decoration: none; }

.html-innvestio .fc-value a:hover,
.html-innvestio .fc-value a:focus-visible {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The social icon aligns to the VALUE column, not the label - 32px below the
   last text line. */
/* Social marks sit on ONE line per row, at the foot of it - not 32px under
   whatever length its own column happens to run to, which is what a plain
   margin-top gave (the three columns end at three different depths, so the
   three marks did too).

   Grid already stretches every .fc-col to the tallest cell in its row, so
   making the column a flex box and giving the mark margin-top:auto drops all
   three onto the row's floor. The 32px moves to the last contact item as a
   minimum, because an auto margin on its own would leave the TALLEST column's
   mark touching its last address line - that column is the one with no slack
   left to absorb. Rows are independent, which is correct: row 2's pair aligns
   to row 2's floor. */
.fc-col { display: flex; flex-direction: column; }

.html-innvestio .fc-col .fc-item:last-of-type { margin-bottom: 32px; }

.fc-col .iv-social { margin: auto 0 0 26px; }

/* No margin-top. The badges are their own grid cell, not something hanging off
   the contact items above them, so the 38px that was here simply pushed them
   ~40px below where the artboard puts them - XD has them starting level with
   the second row's column titles. */
.fc-badges { display: flex; align-items: center; gap: 18px; }

/* XD gives the two marks different boxes - ESG is the taller, narrower one.
   Keyed off the filename rather than :nth-child so reordering cannot break it. */
.fc-badges img { display: block; }
.fc-badges img[src*="esg"] { width: 43px;  height: 60px; }   /* 43.2 x 59.65 */
.fc-badges img[src*="iso"] { width: 125px; height: 46px; }   /* 124.96 x 46.01 */

/* The legal link, under the certification marks (D252). It lives in the
   footer-contacts Topic body, injected by SQL 046, because D58 makes the whole
   grid one Topic - there is no Razor seam under the badges.

   Fixed 24px, NOT margin-top:auto. .fc-col is a flex column and
   `.fc-col .iv-social` uses an auto top margin to drop the social marks to the
   row's floor; the same trick here would push the link away from the badges it
   belongs to, down to the bottom of the tallest column in the row.

   White at rest, not --c-slate-label like the T:/E:/A: prefixes. Those labels
   are 1.8:1 against the footer navy, which is tolerable for a two-character
   prefix sitting beside the value it labels, and not tolerable for the only
   route to the privacy policy. White is 15.9:1, accent 6.5:1.

   Stated at .html-innvestio .fc-legal a for the same reason .fc-value a is
   (see the note above it): D156's `.html-innvestio .topic-block :where(a)` is
   (0,2,0) and would otherwise strip the hover underline. */
.html-innvestio .fc-legal {
    margin: 24px 0 0;
    font-size: 16px;
    line-height: 25px;
}

.html-innvestio .fc-legal a { color: var(--c-white); text-decoration: none; }

.html-innvestio .fc-legal a:hover,
.html-innvestio .fc-legal a:focus-visible {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- the bottom bar: copyright left, credits right (D259/D260) ------------
   D51 said there is no bottom bar and that was a correct reading of the
   artboard; D259 is the client asking for one anyway, so this is an addition
   to the design rather than something recovered from it. Brief s36.

   These are plain class selectors with no .html-innvestio prefix, unlike every
   .fc-* rule above. That prefix exists only because the contact grid lives
   inside a Topic body and has to out-specify stock .topic-block p (0,1,1) and
   D156's .html-innvestio .topic-block :where(a) neutraliser (0,2,0). This bar
   is Razor OUTSIDE .topic-block, so neither rule reaches it.

   The 60px margin-top clears the contact grid; the 24px padding-top sits under
   the hairline. What holds the bar off the CHEVRONS is .site-footer's existing
   60px padding-bottom, which is now the space below this bar rather than below
   the grid. ::after pins footer-chevrons.png at bottom:-6px in a 930x110 box
   whose ink only occupies the last ~40px - about the card's bottom 34px - so
   60px of padding leaves roughly 26px of clearance under this text. DO NOT
   reduce that padding-bottom. Below 1024px the question is moot: D52 already
   turns both ::before and ::after off.

   --c-slate-body (#9199AD) on the card's #142353 is 5.65:1, which clears AA
   for the copyright text. The two links are --c-white (15.9:1) at rest and
   --c-accent (6.5:1) on hover, the same reasoning D257 applied to .fc-legal.
   The hover treatment - accent, underline, 3px offset - matches .fc-value a
   and .fc-legal a so the footer has one link behaviour, not three. */
.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 40px;
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
    line-height: 25px;
    color: var(--c-slate-body);
}

.site-footer__bar p { margin: 0; }

/* The two credits are separate spans rather than one sentence so they can fall
   onto two lines on a narrow desktop without breaking mid-phrase. */
.site-footer__credits { display: flex; flex-wrap: wrap; gap: 4px 24px; }

.site-footer__bar a { color: var(--c-white); text-decoration: none; }

.site-footer__bar a:hover,
.site-footer__bar a:focus-visible {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   STEP 2 - home sections 2, 3, 4, 6-shell and 7
   Every card x-position below was measured on Home.png by scanning for the
   card fill, not estimated. They all land on the same 1300px container the
   hero uses: cards run 313 -> 1607 in every one of these sections, which is
   why there is one .sec__inner and not four.
   -------------------------------------------------------------------------- */

.sec { padding-block: var(--sec-pad); }

/* Four of the seven nav items are anchors into these sections (Q12, settled
   2026-09-17). Both header variants are 90px tall once they are stuck to the
   top, so an un-offset jump would drop the section's first line underneath the
   bar. The section's own 110px top padding supplies the breathing room. */
.sec[id] { scroll-margin-top: var(--header-solid-h); }

/* No `scroll-behavior: smooth` here on purpose. The native version gives no
   control over duration or easing - across this page's 8,000px that reads as a
   blur - and it also hijacks programmatic scrollTo(), which would fight the
   eased animation initAnchorScroll() runs. The JS owns the motion.
   scroll-margin-top above still matters: it is what the browser uses for a page
   LOADED on /#about from another page. */

.sec__inner {
    /* 1294px of content at 1920 (313 -> 1607), then 24px gutters below that. */
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
}

/* Type sizes below are read off the XD panels, not sampled: eyebrow Semibold
   15/25 with 0.75px tracking, title Semibold 50/54, lede Regular 20/25. All
   three carry the .html-innvestio prefix so they outrank the stock
   .topic-block p rule - see D83 above. */
.html-innvestio .sec__eyebrow {
    margin: 0 0 16px;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    font-weight: 600;
    letter-spacing: .75px;
    text-transform: uppercase;
    color: var(--c-accent);
}

.html-innvestio .sec__title {
    margin: 0;
    text-align: center;
    font-size: clamp(28px, 2.6vw, 50px);        /* 50px at 1920 */
    line-height: 1.08;                          /* 54 / 50 */
    font-weight: 600;
    color: var(--c-navy);
}

/* 900px wrapped the presence lede ("...Servicing 9 / countries.") onto a
   second line; XD holds it on one. The sentence measures ~1000px at 20px, so
   the cap is the constraint, not the type size. Raised to 1040, which is still
   a measure rather than the full 1300 container. If XD turns out to set this
   lede smaller than 20px, the size is the better lever - say so and I'll swap. */
.html-innvestio .sec__lede {
    margin: 18px auto 0;
    max-width: 1040px;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    color: var(--c-copy);
}

/* The two navy bands (s4, s6). The fill is the XD export itself
   (Assets/Batch/moise.png) rather than a CSS gradient rebuild of it - the
   hand-written radial-gradient was too dark and its glow sat too low. The
   asset is cropped 12px in on every side to drop the rounded-corner alpha the
   export carries, flattened and shipped at 1280px / JPEG q88 (77 KB); it is a
   smooth gradient, so the downscale costs nothing visible.

   Sized 100% 100% rather than cover on purpose: these bands vary a lot in
   height (the form band is several times the presence band) and cover would
   crop the glow out of the short one. Stretching a soft gradient is invisible
   and keeps the glow at the same relative spot in every band. #142353 stays as
   the fill behind it so the band is never bare while the image loads. */
.sec--presence,
.sec--form {
    background: #142353 url("/images/home/band-bg.jpg") no-repeat center / 100% 100%;
    color: var(--c-white);
}

.sec--presence .sec__title,
.sec--form .sec__title { color: var(--c-white); }

/* The lede on the navy bands. Flat --c-copy (#7C8498) rather than the
   white-at-72% this used to be: over the band image a translucent white
   shifted tone across the glow. #7C8498 is already the section body-copy
   token, so the ledes now match the ones on the grey page exactly - these two
   are no longer a dark-surface special case. */
.sec--presence .sec__lede,
.sec--form .sec__lede { color: var(--c-copy); }

/* --- 2. What are you here to solve? ---------------------------------------
       Two 640px cards, 15px apart (measured 313-952 | 968-1607). The photo is
       full-bleed to the card's bottom edge, so the padding lives on the text
       children rather than on the card. */
/* The background watermark (XD "Mask Group 52", 616 x 947). It is navy #000033
   at a MAXIMUM alpha of 5/255 - the layer opacity is baked into the export, so
   it needs no opacity of its own and must not be given one. Fully transparent
   elsewhere, so it composites straight onto the page's #ECEFF0 with no plate.

   Right-aligned and unrepeated, which is how it sits in the artboard: the
   lines run off the 1920 edge. Position is my read of the export, not a
   measured value - say the word and I will move it.

   Below 1500px the page has less room than the watermark is wide, so it is
   dropped rather than letting it crowd the cards. */
.sec--solutions {
    background: url("/images/home/watermark.png") no-repeat right top / 616px 947px;
}

.sv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 64px;
}

.sv-card {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* Measured on Home.png: card edge 313, text ink starts 377-378, so the inset is
   65px and not the 40px first built. Card top 1152, title ink 1223. Title ink
   band is 29px tall on a 48px pitch; against the calibration from two known
   sizes (the 50px section title inks 43px, the 20px body inks 18px, so ink is
   ~0.90 of the size) that puts the title at 32px. */
.html-innvestio .sv-card__title {
    margin: 58px 65px 40px;
    font-size: 32px;
    line-height: 48px;
    font-weight: 600;
    color: var(--c-navy);
}

/* flex-grow:1 - the shorter paragraph stretches to match the taller one, so
   both .sv-card__body boxes are the same height (the copy is 5 lines against
   8, i.e. 125px against 200px) and everything below them lines up. grow only,
   never `flex: 1`: that would set flex-basis:0 and let the box collapse below
   its own text. */
.html-innvestio .sv-card__body {
    flex-grow: 1;
    margin: 0 65px 20px;
    font-size: 20px;
    line-height: 25px;
    text-align: left;
    color: var(--c-copy);
}

/* The photo butts straight up under the link - reading the artboard back at
   1:1 against the 722px card and the 305px photo, the gap is a single pixel,
   not the 54px first built. That 54 (plus 50 too much under the body) is the
   whole of the card's excess height.

   No margin-top:auto here either - .sv-card__body's flex-grow already absorbs
   the slack, and two auto margins would split it between them. The link and
   the photo align across both cards as a consequence. */
.html-innvestio .sv-card__link {
    align-self: flex-start;
    margin: 0 65px;
    font-size: 16px;
    line-height: 25px;
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sv-card__media {
    display: block;
    width: 100%;
    height: auto;                                /* .sv-card__link owns the slack now */
}

/* --- 3. Proof, not promises -----------------------------------------------
       An inset white card, like the hero (band 1985-2776, 15px each side). */
.sec--proof {
    margin-inline: var(--card-inset);
    background: var(--c-white);
    border-radius: var(--radius-card);
}

/* Partner strip. innvestio.js turns this into an Owl carousel; until it does,
   the flex fallback keeps the logos on one row instead of stacking them. */
/* XD: 1295 x 143, 12px radius (now --radius-card), 1px inner stroke in #ECEFF0
   - the page colour, not the --c-hairline the rest of the theme uses. The
   height falls out of the parts: 105px logo cell + 2 x 18px padding + 2 x 1px
   border = 143. */
.pf-strip {
    margin-top: 54px;
    padding: 18px 30px;
    border: 1px solid var(--c-page);
    border-radius: var(--radius-card);
}

.pf-strip:not(.owl-loaded) {
    display: flex;
    gap: 24px;
    overflow: hidden;
}

.pf-strip:not(.owl-loaded) .pf-strip__item { flex: 1 0 auto; }

/* XD's logo cell is 186 x 105. */
.pf-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 105px;
}

/* Every export IS the cell: 186 x 105 transparent PNGs, each brand optically
   balanced inside the same box by the designer (D192). So the cap just has to
   clear the cell and let the carousel do the sizing - no per-logo tuning here,
   and none wanted, since the balancing already happened in XD. */
.pf-strip__item img {
    width: auto;
    max-width: 100%;
    max-height: 105px;
    object-fit: contain;

    /* Greyscale, because the strip is a roll-call and twenty brand palettes
       at once would out-shout the section (D194). Measured, not assumed: the
       six crops cut from the flattened XD export carry ZERO chroma on every
       ink pixel, so the design desaturates them fully. The cell exports are
       full-colour, hence the filter. No colour-on-hover - the logos are not
       links, and XD supplies no hover state for them. */
    filter: grayscale(1);
}

/* XD reports card 2 at x 752, w 416. Three 416s in the 1295 strip leave 47px,
   so the gap is 23.5 - rounded to 24, which puts our 1300 container's cards at
   417.3. The 16px here was measured off the flattened export and was wrong. */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 34px;
}

/* XD: 416 x 254, #F8F8F8, 12px radius (now --radius-card). 254 - the 198px
   photo = 56, so the padding is 28 all round and the photo sets the height. */
.pf-card {
    display: flex;
    gap: 22px;
    padding: 28px;
    background: #F8F8F8;
    border-radius: var(--radius-card);
}

.pf-card__media {
    flex: none;
    width: 145px;                                /* the source files are 145x198 */
    height: 198px;
    object-fit: cover;
    border-radius: 4px;
}

.pf-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pf-card__title {
    margin: 6px 0 0;
    font-size: 17px;                             /* XD: Extrabold 17/25 */
    line-height: 25px;
    font-weight: 800;
    color: var(--c-navy);
}

/* The division the article belongs to, sitting immediately above "Visit now"
   (client round, item 6 - the same spelled-out labels 039 gave the Presence
   headings). Plain text, not the .nw-card__badge chip: that badge is model-
   driven and these cards are a Topic block with no model behind them, and the
   46-character FIAS string would carry three lines of fill across a 194px
   column. Authored in the Topic body, so it is copy the client edits.

   .html-innvestio prefix per D83: this is a <p> inside a Topic, so the sheet's
   own .topic-block :where(p) { margin: 0 } is (0,2,0) and zeroes the push-down
   out of a plain .pf-card__division. Same reason .sec__lede and .pr-group
   carry it. */
.html-innvestio .pf-card__division {
    /* auto on top takes over the link's push-down; the 36px underneath is the
       client round's "move this up" - the label rises off "Visit now", which
       stays on the card floor. Fixed, not a second auto margin: two autos
       would share out each card's OWN free space, and card 3's 2-line title
       leaves more of it, so the labels would stop lining up across the row. */
    margin: auto 0 36px;
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
    color: var(--c-accent);
}

.pf-card__link {
    margin-top: auto;
    font-size: 15px;                             /* XD: Regular 15/25 */
    line-height: 25px;
    color: var(--c-accent);
    text-decoration: none;
}

/* The label and the link are one block at the foot of the card, so only the
   first of the pair gets margin-top:auto - two autos would split the free space
   between them and pull them apart. :has() keeps the fallback honest: delete
   the label in admin and .pf-card__link goes back to pushing itself down. */
.html-innvestio .pf-card__text:has(.pf-card__division) .pf-card__link { margin-top: 0; }

.html-innvestio .pf-card__link:hover { text-decoration: underline; }

/* --- 4. Local presence, regional reach ------------------------------------
       Cards 314-728 | 752-1166 | 1190-1606, so 414 wide with a 24px gap. */
/* Spacing measured by the client in XD: 50px from the lede down to PPDS, 28px
   from PPDS down to the cards, and 50px again from the card row down to FIAS. */
/* XD panel on the FIAS label: Proxima Nova Semibold 20/25, centred, AV 1px,
   #32A2D4. Was 16px with .08em of tracking (1.28px) - both wrong. */
.html-innvestio .pr-group {
    margin: 50px 0 28px;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--c-accent);
}

.html-innvestio .pr-grid + .pr-group { margin-top: 50px; }

.pr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* The FIAS card really is wider than the three PPDS ones - measured 663 -> 1257
   (595px) against 414px, both 320px tall. It is one card standing for a whole
   division, so it gets the width of roughly one and a half. */
.pr-grid--single {
    grid-template-columns: minmax(0, 595px);
    justify-content: center;
}

/* The chevron lattice sits in each card's top-right. Extracted from the card in
   Home.png, where it lies on a FLAT white fill - that is what made it
   recoverable here when §22 could not lift it out of the footer's gradient
   (B7). Text was masked out of the crop by hand; a min-combine across the three
   cards was tried first and failed, because each card carries a different crop
   of the decoration rather than the same one. overflow:hidden lets the card's
   8px radius clip it. */
/* XD: 415 x 320. Reading the artboard back at 1:1 against that 320 gives the
   internal rhythm, and it is not the one built from the flattened export - the
   region label sits well clear of the domain (55px, not 26) while the body
   tucks close under it (11px, not 20):

       padding-top 42 | region 25 | 55 | domain 25 | 11 | body 66 | 42 |
       link 25 | padding-bottom 29   =  320

   min-height rather than height: that arithmetic is card 1's, whose body runs
   to three lines. Cards 2 and 3 have two, and the FIAS card is taller again
   (its lockup replaces the region label), so a hard 320 would clip it. Grid
   stretch equalises the three PPDS cards at 320 either way. */
.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 320px;
    padding: 42px 28px 29px;
    text-align: center;
    background: var(--c-white) url("/images/home/card-lattice.png") no-repeat top right;
    border-radius: var(--radius-card);
    color: var(--c-navy);
}

/* XD: region Bold 14/25 with 3.5px tracking, domain Semibold 22/25,
   body Regular 16/22 in #7C8498. All centred. */
.html-innvestio .pr-card__region {
    margin: 0 0 55px;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: var(--c-accent);
}

.html-innvestio .pr-card__domain {
    margin: 0 0 11px;
    text-align: center;
    font-size: 22px;
    line-height: 25px;
    font-weight: 600;
    color: var(--c-navy);
}

.html-innvestio .pr-card__domain span { color: var(--c-accent); }

/* XD panel: Proxima Nova Regular 16/22, centred - already correct.

   The body runs on a narrower measure than the rest of the card. XD reads 72px
   from the card's left edge to the text and 70px back to the right, against
   the card's own 28px padding, which put the paragraph at ~273px inside a
   415px card rather than the full 359px the padding leaves. That measured
   value broke the copy too early once the live text was in, so it was opened
   up to 340px on the client's call - still inside the padding, but enough that
   the three-line cards break where the artboard's do.

   max-width with auto margins rather than a fixed 44px of extra margin: on a
   narrower card the paragraph simply fills what it has instead of being
   squeezed from both sides. */
.html-innvestio .pr-card__body {
    max-width: 340px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: var(--c-copy);
}

/* The FIAS card is 595 wide and keeps roughly the same ~67px inset, so its
   measure is wider - 480px. It also carries its own <br>, which only lands
   where the design puts it at this width. Widened with the three-card measure
   above, on the same call. */
.html-innvestio .pr-grid--single .pr-card__body { max-width: 480px; }

/* XD panel: Proxima Nova Regular 15/25, centred, #32A2D4 (was 13px with no
   line-height). margin-top:auto pins it to the card's foot, so the two-line
   cards line their links up with the three-line one, as XD does. */
.pr-card__link {
    margin-top: auto;
    font-size: 15px;
    line-height: 25px;
    color: var(--c-accent);
    text-decoration: none;
}

.html-innvestio .pr-card__link:hover { text-decoration: underline; }

.pr-card__lockup {
    display: block;
    margin: 0 auto 18px;
    max-width: 240px;
    height: auto;
}

/* --- 6. Tell us what you're trying to solve -------------------------------
       SHELL ONLY. The band, heading and white card are built; .sec__form-card
       is an empty slot for the HubSpot embed (D28/D33), which needs a portal
       and form id the client has not supplied. The card is measured at
       158-1762, so it is wider than the 1300 container the rest of the page
       uses - hence the override below. */
.sec--form .sec__inner { width: min(100% - 48px, 1605px); }

.sec--form .sec__title span { color: var(--c-accent); }

/* XD: this lede is Regular 16/33 in a 1081px measure - looser and narrower
   than the 20/25 the other sections use. */
.html-innvestio .sec--form .sec__lede {
    max-width: 1081px;
    font-size: 16px;
    line-height: 33px;
}

.sec__form-card {
    margin-top: 48px;
    min-height: 280px;
    padding: 40px;
    background: var(--c-white);
    border-radius: var(--radius-card);
}

/* --- 5. Learn, Comply & Decide --------------------------------------------
       Cards measured 313-618 | 643-948 | 973-1278 | 1302-1607: four 306px
       cards on a 25px gap, 359px tall, picture inset 15px and 196px tall,
       title ink 16px on a 25px pitch => Extrabold 17/25, the same as the
       section 3 cards. */

/* This section carries the same watermark device as section 2, but its own
   artwork and on the opposite edge - XD "Mask Group 54", 713 x 1037, against
   section 2's "Mask Group 52" at 616 x 947. Same ink: navy #000033 at a
   MAXIMUM alpha of 5/255, layer opacity already baked into the export, so it
   needs no opacity of its own and must not be given one.

   Position is measured off the Home.png artboard rather than eyeballed. The
   lattice's first ink was matched against the asset's own at four columns
   (x = 80/140/200/260) and four rows (y = 300/450/600/750), which put it at
   left 0, top 54px below the section's edge, to within a pixel on every
   sample. So it is flush to the page's left edge - the artwork runs off it,
   which is what the artboard shows - and unrepeated.

   It is 1037 tall against a section that is shorter than that, so the bottom
   of the lattice is clipped by the section box. That is what XD does too: the
   navy form band below simply paints over it.

   Dropped below 1500px with section 2's, for the same reason - 713px of
   watermark on a page that narrow reaches into the cards. */
.sec--knowledge {
    background: url("/images/home/watermark-knowledge.png") no-repeat left 54px / 713px 1037px;
}

.kn-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.kn-tabs__item a {
    font-size: 15px;
    line-height: 25px;
    color: var(--c-navy);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--c-accent);
}

.kn-tabs__code { color: var(--c-accent); font-weight: 600; }

/* D32: the active filter keeps the accent underline; the others drop to body
   colour and lose it. */
.kn-tabs__item:not(.is-active) a {
    color: var(--c-copy);
    text-decoration: none;
}

/* The DIVISION filter row - PPDS / FIAS - which sits under the language tabs on
   the listing. Two orthogonal axes, so the two rows read as a pair: the same
   flex/centred idiom and the same active treatment, at a smaller size and a
   tighter gap so the division row is plainly the subordinate one. */
.kn-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.kn-filters__item a {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--c-navy);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--c-accent);
}

.kn-filters__item:not(.is-active) a {
    color: var(--c-copy);
    font-weight: 400;
    text-decoration: none;
}

.kn-grid {
    /* The width one card has when the row is full - four tracks and three 25px
       gaps. Restated at each breakpoint so the centring rule below follows the
       4 / 2 / 1 step without having to know the count itself. */
    --kn-track: calc((100% - 75px) / 4);

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    margin-top: 40px;
}

/* A PARTIAL ROW IS CENTRED, not pinned left against empty tracks. With
   repeat(4, 1fr) a single article sits in track one and the other three stand
   empty, which reads as a broken row rather than as one article (client,
   2026-09-22). Switching to a fixed track lets auto-fit collapse the unused
   ones and justify-content centre what is left - and because the track is the
   width four cards would have given it, the card stays the designed size
   instead of stretching across the row.

   The selector matches 1, 2 or 3 children: the last child is also one of the
   first three. At four it does not apply at all, so the designed full row is
   untouched. */
.kn-grid:has(> :last-child:nth-child(-n + 3)) {
    grid-template-columns: repeat(auto-fit, var(--kn-track));
    justify-content: center;
}

.kn-card {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: var(--c-white);
    border-radius: var(--radius-card);
}

/* XD: 276 x 131. The 196 came from scanning the flattened export and was half
   again too tall - which is what pushed our titles down and, because each post
   supplies its own picture at its own aspect, left them landing at four
   different heights. The img below is object-fit:cover, so a fixed box crops
   every source to the same frame and the titles line up. */
.kn-card__media {
    position: relative;                         /* the division badge's positioning context */
    display: block;
    margin-bottom: 18px;
    aspect-ratio: 276 / 131;
    overflow: hidden;
    border-radius: 4px;
    background: var(--c-page);                  /* holds the box if a post has no picture */
}

/* The media box is the container and the image link fills it - the same split
   .nw-card__media went through when the badge became a filter link, for the
   same reason: an anchor cannot legally sit inside another one.

   The badge itself wears .nw-card__badge, not a class of its own: it is the
   same badge at the same metrics, and a second set of declarations here would
   only let the two drift. */
.kn-card__media-link { display: block; width: 100%; height: 100%; }

.kn-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kn-card__title {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 25px;
    font-weight: 800;
    color: var(--c-navy);
}

.kn-card__title a { color: inherit; text-decoration: none; }
.kn-card__title a:hover { color: var(--c-accent); }

.kn-card__more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    font-size: 15px;
    line-height: 25px;
    color: var(--c-navy);
    text-decoration: none;
}

/* Same re-authored arrow as .hero__cta: the old path covered only the middle
   half of its 24-unit viewBox, so background-size was not the glyph size. The
   ink now fills the viewBox, so 8px means 8px (client, 2026-09-21). */
.kn-card__more::after {
    content: "";
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-navy)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 23L23 1M5.4 1h17.6v17.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 8px;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}

.kn-card__more:hover { color: var(--c-accent); }

/* On hover the arrow swings from the diagonal to the horizontal - XD's own
   hover card shows it level while the other three stay at 45deg. Rotating the
   whole disc rather than the glyph alone: the disc is a circle, so it looks
   identical turned, and this needs no extra pseudo-element. */
.kn-card__more:hover::after {
    background-color: var(--c-accent);
    transform: rotate(45deg);
}

.kn-actions { display: flex; justify-content: center; margin-top: 46px; }

/* The CTA reuses the hero's pill wholesale - same height, same navy arrow disc
   (brief s16). It is a shorter button: measured 208 x 52, x 856 -> 1063. Only
   the width floor and the hero's top margin differ. */
.kn-cta { margin-top: 0; min-width: 208px; }

/* --- 7. What makes us the Industrial & Ingredients Architect --------------
       Locked by D34: nine cards, 3 columns, measured 314-729 | 754-1169 |
       1194-1609 => 416 wide, 25px gap. The chip palette and the division
       colours below are copied from that document rather than re-sampled.

       SCALE (2026-09-21). The type sizes here were taken from that document at
       face value, but its preview is not full size - it sits in a 1080px
       .sheet with 26px padding and a 14px gutter, so its cards are 333px wide
       against this page's 417px. Everything lifted 1:1 therefore rendered ~20%
       small. All five values below are the client's, multiplied by

           417 / 333 = 1.25

       so the card keeps the proportions of the document it came from. These
       are arithmetic, not readings off the XD panel - if the artboard
       disagrees, it wins. */
.ab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 52px;
}

.ab-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    background: var(--c-white);
    border: 1px solid var(--c-hairline);
    border-radius: 12px;
    overflow: hidden;
}

/* The coloured top border encodes the division. A split border means the card
   belongs to two of them - that is the whole point of the system, so the
   gradients are hard 50% stops, not blends. */
.ab-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--ab-top, var(--c-navy));
}

.ab-card--group     { --ab-top: var(--c-navy); }
.ab-card--ppds      { --ab-top: var(--c-ppds); }
.ab-card--fias      { --ab-top: var(--c-fias); }
.ab-card--ppds-fias { --ab-top: linear-gradient(90deg, var(--c-ppds) 50%, var(--c-fias) 50%); }
.ab-card--group-esg { --ab-top: linear-gradient(90deg, var(--c-navy) 50%, var(--c-fias) 50%); }

/* D34 rings the "method" card - it is the thesis the other eight support. */
.ab-card--anchor { box-shadow: inset 0 0 0 2px var(--c-navy); }

.ab-card__icon {
    width: 42px; height: 42px;                  /* 34 x 1.25 */
    margin-bottom: 13px;                        /* 10 x 1.25 */
    background-color: var(--c-navy);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}

/* Card 1 carries the 25+ figure instead of an icon - that is D34's design, not
   a missing asset. The span stays in the Topic so all nine cards keep the same
   shape for the client to edit. */
.ab-card__icon--growth { display: none; }

.ab-card__icon--method         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L5 20'/%3E%3Cpath d='M12 3 L19 20'/%3E%3Cpath d='M8.5 13 h7'/%3E%3Ccircle cx='12' cy='3' r='1.4'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L5 20'/%3E%3Cpath d='M12 3 L19 20'/%3E%3Cpath d='M8.5 13 h7'/%3E%3Ccircle cx='12' cy='3' r='1.4'/%3E%3C/svg%3E"); }

.ab-card__icon--support        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 a7 7 0 0 1 14 0'/%3E%3Crect x='4' y='13' width='3' height='5' rx='1'/%3E%3Crect x='17' y='13' width='3' height='5' rx='1'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 a7 7 0 0 1 14 0'/%3E%3Crect x='4' y='13' width='3' height='5' rx='1'/%3E%3Crect x='17' y='13' width='3' height='5' rx='1'/%3E%3C/svg%3E"); }

.ab-card__icon--sustainability { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21 C6 17 6 8 12 4 C18 8 18 17 12 21 Z'/%3E%3Cpath d='M12 21 V8'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21 C6 17 6 8 12 4 C18 8 18 17 12 21 Z'/%3E%3Cpath d='M12 21 V8'/%3E%3C/svg%3E"); }

.ab-card__icon--production     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 h4 v5 l3.5 8 a2 2 0 0 1 -1.8 3 H8.3 a2 2 0 0 1 -1.8 -3 L10 8 Z'/%3E%3Cpath d='M8 15 h8'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 h4 v5 l3.5 8 a2 2 0 0 1 -1.8 3 H8.3 a2 2 0 0 1 -1.8 -3 L10 8 Z'/%3E%3Cpath d='M8 15 h8'/%3E%3C/svg%3E"); }

.ab-card__icon--supply         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 l7 3 v5 c0 5 -3 8 -7 10 c-4 -2 -7 -5 -7 -10 V6 Z'/%3E%3Cpath d='M9 12 l2 2 l4 -4'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 l7 3 v5 c0 5 -3 8 -7 10 c-4 -2 -7 -5 -7 -10 V6 Z'/%3E%3Cpath d='M9 12 l2 2 l4 -4'/%3E%3C/svg%3E"); }

.ab-card__icon--agnostic       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='4' rx='1'/%3E%3Crect x='4' y='11' width='16' height='4' rx='1'/%3E%3Crect x='4' y='17' width='16' height='3' rx='1'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='4' rx='1'/%3E%3Crect x='4' y='11' width='16' height='4' rx='1'/%3E%3Crect x='4' y='17' width='16' height='3' rx='1'/%3E%3C/svg%3E"); }

.ab-card__icon--digital        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 3 v3 M15 3 v3 M9 18 v3 M15 18 v3 M3 9 h3 M3 15 h3 M18 9 h3 M18 15 h3'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 3 v3 M15 3 v3 M9 18 v3 M15 18 v3 M3 9 h3 M3 15 h3 M18 9 h3 M18 15 h3'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1'/%3E%3C/svg%3E"); }

.ab-card__icon--natural        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 C16 10 18 13 18 16 a6 6 0 0 1 -12 0 C6 13 8 10 12 4 Z'/%3E%3Cpath d='M9.5 16 l2 2 l3.5 -4'/%3E%3C/svg%3E");
                                         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 C16 10 18 13 18 16 a6 6 0 0 1 -12 0 C6 13 8 10 12 4 Z'/%3E%3Cpath d='M9.5 16 l2 2 l3.5 -4'/%3E%3C/svg%3E"); }

.ab-card__num {
    display: block;
    margin-bottom: 10px;                        /* 8 x 1.25 */
    font-size: 37.5px;                          /* 30 x 1.25 */
    font-weight: 800;
    line-height: 1;
    color: var(--c-navy);
}

.ab-card__title {
    margin: 0 0 8px;                            /* 6 x 1.25 */
    font-size: 18px;                            /* 14.5 x 1.25 */
    line-height: 1.3;
    font-weight: 600;
    color: var(--c-navy);
}

.html-innvestio .ab-card__body {
    flex: 1;
    margin: 0 0 17px;                           /* 14 x 1.25 */
    text-align: left;
    font-size: 14.5px;                          /* 11.5 x 1.25 */
    line-height: 1.55;
    color: var(--c-body);
}

.ab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;                                   /* 5 x 1.25 */
    margin-top: auto;
}

/* The chip's height was never declared - it fell out of the font's own
   `normal` line-height plus the padding, which at 10.5px lands around 21px and
   drifts with whatever face is actually resolved. Set explicitly instead:
   line-height 1 plus a min-height the flex centring works against, so the box
   is a stated size rather than a by-product of the type metrics. */
.ab-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 10.5px;                          /* 8.5 x 1.25 */
    line-height: 1;
    font-weight: 800;
    letter-spacing: .3px;
}

.ab-chip--group { background: #EEF1F5; color: var(--c-navy); border: 1px solid #D3D9E2; }
.ab-chip--ppds  { background: #FDECEB; color: var(--c-ppds); border: 1px solid #F5C2BD; }
.ab-chip--fias  { background: #E9F7EF; color: var(--c-fias); border: 1px solid #B7E4C7; }
.ab-chip--esg   { background: #FFF8E8; color: var(--c-esg);  border: 1px solid #F0DCA0; }

/* --------------------------------------------------------------------------
   Step 3 - the news list page (/blog). Measured on Innvestio News.png (1920 x
   2697). The page is two pieces: a navy band directly under the solid header,
   and a card grid that is pulled up over the band's lower third.

       header      y   0 ->   89
       navy band   y  90 ->  527   x 15 -> 1904, like the header above it
       card row 1  y 374 ->  664   so the grid overlaps the band by 153px
       row pitch       291 + 45
       Load more   y1753 -> 1804   220 x 52, centred
       footer      y1887
   -------------------------------------------------------------------------- */
.nw-hero {
    position: relative;
    margin-inline: var(--card-inset);
    padding: 106px 0 194px;
    border-radius: 12px;
    /* the same fill as the two home navy bands, so the three read as one
       surface across the site */
    background: #142353 url("/images/home/band-bg.jpg") no-repeat center / 100% 100%;
    color: var(--c-white);
}

.html-innvestio .nw-hero .sec__title { color: var(--c-white); }

/* The band's h1 carries .sec__title, so it inherits the section scale (50/54 at
   1920) without a page-specific type rule. */
.nw-hero__tabs { margin-top: 18px; gap: 62px; }

/* The tabs were built for home section 5, which sits on the grey page - so
   their ink is navy, and on this band the active label all but disappeared.
   Recoloured for the dark surface, keeping D32's distinction: the active item
   is white and underlined in accent, the others dim and unmarked. The language
   code stays accent-blue in both, which is what the export shows. */
.nw-hero .kn-tabs__item a { color: var(--c-white); }
.nw-hero .kn-tabs__item:not(.is-active) a { color: rgba(255, 255, 255, .72); }

/* The division row, on the same dark surface and by the same rule. Dimmer than
   the language row when inactive, so the two rows stay in hierarchy. */
.nw-hero__filters { margin-top: 14px; }

.nw-hero .kn-filters__item a { color: var(--c-white); }
.nw-hero .kn-filters__item:not(.is-active) a { color: rgba(255, 255, 255, .6); }
.nw-hero .kn-filters__item:not(.is-active) a:hover { color: rgba(255, 255, 255, .9); }

/* Pulled up over the band. z-index because the band paints a background and the
   cards have to sit on top of it. */
.nw-body {
    position: relative;
    z-index: 1;
    margin-top: -153px;
    padding-bottom: 83px;
}

.nw-grid {
    /* As .kn-grid: the width one card has when the row is full. */
    --nw-track: calc((100% - 48px) / 2);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 48px;
}

/* The listing has the same partial-row problem as the home grid, and the same
   fix - a single article was sitting in the left column with an empty right
   one. Only one child here, because the row is two wide. */
.nw-grid:has(> :last-child:nth-child(1)) {
    grid-template-columns: repeat(auto-fit, var(--nw-track));
    justify-content: center;
}

/* Photo beside text. The card's height is set by the 260px media box, and the
   body's 36px bottom padding is what puts Read More on the line the design has
   it on in cards with two title lines and with four. */
.nw-card {
    display: flex;
    padding: var(--card-inset);
    background: var(--c-white);
    border-radius: 12px;
}

.nw-card__media {
    position: relative;
    flex: none;
    display: block;
    width: 250px;
    height: 260px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--c-page);
}

/* The media box is the container and the image link fills it. They used to be
   one element; they were split when the badge became a filter link, because an
   anchor cannot legally sit inside another one.

   .rich-blog-image is the plugin's own wrapper - it is what the widget in the
   bloglist_page_before_post_body zone renders, and it brings its own <a>. */
.nw-card__media-link,
.nw-card__media .rich-blog-image,
.nw-card__media .rich-blog-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.nw-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The division badge (D94). Colour is keyed off the division's own name, so a
   third division is one rule here and nothing in the view. */
.nw-card__badge {
    position: absolute;
    top: 10px;
    left: 11px;
    padding: 2px 7px;
    min-width: 43px;
    border-radius: 2px;
    background: var(--c-navy);
    color: var(--c-white);
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    text-align: center;
}

/* D39: these two are the Knowledge area's own coding, not the About grid's
   red/green chips - the same divisions are deliberately coloured differently in
   the two contexts. The orange is sampled from the export. */
.nw-card__badge[data-division="ppds"] { background: var(--c-accent); }
.nw-card__badge[data-division="fias"] { background: #DE6C14; }

/* The badge is a link to its own division's listing, so it needs to behave like
   one: no underline at rest, and a state on hover and on keyboard focus. It is
   above the image link in the stacking order, hence the z-index. */
.nw-card__badge {
    z-index: 1;
    text-decoration: none;
    transition: filter .2s var(--ease);
}

.nw-card__badge:hover,
.nw-card__badge:focus-visible { filter: brightness(1.12); color: var(--c-white); }
.nw-card__badge:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }

.nw-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 20px 0 36px 30px;
}

.nw-card__date {
    display: block;
    font-size: 16px;
    line-height: 20px;
    color: var(--c-accent);
}

.nw-card__title {
    margin: 18px 0 0;
    font-size: 22px;
    line-height: 25px;
    font-weight: 800;
    color: var(--c-navy);
}

.nw-card__title a { color: inherit; text-decoration: none; }
.nw-card__title a:hover { color: var(--c-accent); }

/* Same component as the home cards' Read More, one size up - 31px against 28px,
   measured on both exports. */
.nw-card__more {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding-top: 24px;
    font-size: 16px;
    line-height: 25px;
    font-weight: 600;
    color: var(--c-navy);
    text-decoration: none;
}

/* Re-authored arrow, as .kn-card__more above - 14px was drawing ~7px. */
.nw-card__more::after {
    content: "";
    flex: none;
    width: 31px; height: 31px;
    border-radius: 50%;
    background: var(--c-navy)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 23L23 1M5.4 1h17.6v17.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 14px;
    transition: background-color .2s var(--ease);
}

.nw-card__more:hover { color: var(--c-accent); }
.nw-card__more:hover::after { background-color: var(--c-accent); }

/* D12 - a button, not a pager. Measured 220 x 52, fully rounded, centred.

   The row stays in the DOM on the last page and is hidden instead of removed,
   so a filter that widens the result set can bring it back without this
   stylesheet's localised button label having to exist in JavaScript. display:
   flex would otherwise beat the [hidden] attribute's own rule. */
.nw-actions { display: flex; justify-content: center; margin-top: 84px; }
.nw-actions[hidden] { display: none; }

.nw-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 26px;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.nw-more:hover { background: #2b8dba; color: var(--c-white); }
.nw-more.is-busy { opacity: .7; pointer-events: none; }

.nw-empty {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    font-size: 18px;
    color: var(--c-copy);
}

/* --------------------------------------------------------------------------
   STEP 4 - the news detail page (/blog/<slug>). Measured on News Detail.png
   (1920 x 3104), brief section 33. Two pieces, like the listing: the same navy
   band, and one white card pulled up over it.

       header      y    0 ->   89
       navy band   y   90 ->  527   438 tall - PIXEL-IDENTICAL to the listing's
       card        y  175 -> 2185   x 459 -> 1461, 1003 x 2011, radius 12
       footer      y 2294

   The card's top edge is 85px below the band's, so 353px of it sits on navy
   and the remaining 1658px on the grey page.
   -------------------------------------------------------------------------- */

:root {
    --ar-card-w:   1000px;   /* measured 1003 at 1920 - Q34 */
    --ar-card-pad:   80px;   /* one column for header and body alike - Q31  */
    --ar-band-h:    438px;   /* y 90 -> 527                                 */
    --ar-pull:      353px;   /* card top 175 = band bottom 528 - 353        */
}

/* The band carries no content on this page, so it cannot take its height from
   padding the way the listing's does. Same fill, same inset, same radius -
   .nw-hero supplies all three. */
.nw-hero--bare {
    height: var(--ar-band-h);
    padding: 0;
}

.ar-body {
    position: relative;
    z-index: 1;                       /* the band paints a background */
    margin-top: calc(var(--ar-pull) * -1);
    padding-bottom: 109px;            /* card bottom 2185 -> footer 2294 */
}

/* Centred on the PAGE (centre x 960), not on the 1300 container the rest of
   the site uses - measured, and the reason this is not .sec__inner. */
.ar-card {
    width: min(100% - 48px, var(--ar-card-w));
    margin-inline: auto;
    padding: 70px var(--ar-card-pad) var(--ar-card-pad);
    background: var(--c-white);
    border-radius: 12px;              /* full width reached 12 rows down */
    /* No border and no shadow: the export is flat #ECEFF0 right up to the
       card's edge, checked on three rows. */
}

.ar-date {
    display: block;
    font-size: 16px;
    line-height: 27px;
    color: var(--c-accent);
}

/* 27/45 at 1920, weight 800. The size is derived from Proxima Nova's cap
   height (0.667em) against a measured 18px cap - 28px would have measured 19.
   Clamped because 27px of headline is most of a phone's width. */
.ar-title {
    margin: 6px 0 0;
    font-size: clamp(22px, 1.4vw, 27px);
    line-height: 1.667;               /* 45 / 27 */
    font-weight: 800;
    color: var(--c-navy);
}

/* 850 x 421 at 1920. The ratio is held rather than the height, so the box
   scales with the card; the photographs themselves are 3:2, hence the cover. */
.ar-media {
    position: relative;
    margin-top: 23px;
    aspect-ratio: 850 / 421;
    overflow: hidden;
    border-radius: 6px;
    background: var(--c-page);
}

.ar-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The listing's badge at this page's inset - 14/13 against the card's 11/10. */
.ar-badge { top: 13px; left: 14px; }

/* --- the post's own Body HTML ---------------------------------------------
   Everything below the photograph comes out of the admin's rich-text editor,
   so these are type rules, not a layout. The design has ONE heading style: the
   two-line block under the photo measures identically to the three below it
   (21px, weight 800, same 27px pitch) and only looks different because it
   wraps. */
.ar-copy {
    margin-top: 48px;                 /* image bottom 809 -> first heading */
    font-size: 16px;
    line-height: 27px;
    color: var(--c-copy);
}

.ar-copy > :first-child { margin-top: 0; }

.ar-copy p { margin: 0; }
.ar-copy p + p { margin-top: 27px; }

.ar-copy h2,
.ar-copy h3,
.ar-copy h4 {
    margin: 56px 0 16px;
    font-size: 21px;
    line-height: 27px;
    font-weight: 800;
    color: var(--c-navy);
}

/* Not measurable from the export - the two example bitmaps carry different
   amounts of internal whitespace (87px of apparent gap after one, 20px after
   the other), so one value for both. Q33. Left-aligned to the column at
   natural size, which is what the design shows; neither example fills it. */
.ar-copy img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 40px 0;
}

/* The admin's editor wraps a pasted image in a paragraph of its own, which
   would then add the 27px paragraph gap on top of the image's own 40px. The
   paragraph gives up its margins and the image's collapse through it. */
.ar-copy p:has(> img) { margin: 0; }

.ar-copy a {
    color: var(--c-accent);
    text-decoration: underline;
}

.ar-copy ul,
.ar-copy ol { margin: 27px 0; padding-left: 22px; }
.ar-copy li + li { margin-top: 8px; }

.ar-copy strong,
.ar-copy b { font-weight: 600; color: var(--c-navy); }

/* --------------------------------------------------------------------------
   Responsive. The XD file is desktop-only (D3), so everything below 1280px is
   proposed rather than measured. D52: the footer grid is 3 / 2 / 1.
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
    /* The header is no longer stepped here at all. D263 made --nav-gap and the
       white skin's padding-inline fluid, so they cross this width without a
       cliff; the three rules that lived here (--nav-gap:34px and padding-inline:
       28px twice) were the 28px jump that broke the bar the moment the viewport
       went one pixel over 1500. The second of them was dead anyway: plain
       .site-header__bar is (0,1,0) and never beat .site-header--overlay
       .site-header__bar at (0,2,0), so the home pill never saw 28px. */
    .hero__card { right: 40px; width: 400px; }

    /* Scroll Down has nowhere to stand once the container stops being narrower
       than the band. Its x is fixed at 40px inside the hero, while the copy
       starts at (hero width - 1300)/2 + 24 - which is 295px in from the edge at
       1920 but only 24px once the hero is under 1300 wide. Below ~1480 the two
       occupy the same column, and at 1167 the label prints straight through
       "Printing & Packaging Industries". Hidden rather than moved: the artboard
       gives it one position and no second one. */
    .hero__scroll { display: none; }

    /* The card is 400px here instead of 467, so its 32px copy wraps "Multiple
       Diverse Markets." onto two lines and the block outgrows the space below
       its 58.7% top - "Unified Expertise." was cut off by the band's edge. At
       24/30 the three designed lines each fit their line again. */
    .html-innvestio .hero__card p { font-size: 24px; line-height: 30px; }
    .hero__card .iv-logo { margin-bottom: 18px; }

    /* The card is 400 wide at right:40 here, so it starts 440px in from the
       band's edge. Below ~1330 the container and the band are the same width,
       which makes that a straight percentage: 440 - 24 of inner padding + 40
       of gap. Between 1330 and 1500 it is a little conservative (the headline
       wraps slightly sooner than it must), which is the safe direction. */
    .hero__headline { max-width: calc(100% - 456px); }

    /* 616px of watermark against a page this narrow crowds the cards. 713px of
       the section 5 one crowds them harder, so the pair goes together. */
    .sec--solutions,
    .sec--knowledge { background-image: none; }
    /* The artboard's 171.8px only fits while the container is at its 1430 cap.
       Below that the logo, the gap and the seven 18px labels exceed the row, so
       it steps back to the 60px the footer used before - which is what this
       tier rendered all along. (The row is genuinely tight between ~1300 and
       1400 whatever the gap; .site-footer is overflow:hidden, so it clips
       rather than breaking the card. Pre-existing, not introduced here.) */
    .site-footer__top { gap: 60px; }
}

/* Compact tier (D74). The bar keeps all seven items down to 1025px, which it
   can only do if the type, the logo and the gaps all come in together. At
   1025px the bar's content box is 942px (1025 - 30 card inset - 19 - 34
   padding); the measured labels total 661px at 16px, so at 14px they are 578px
   and the whole row lands at ~918px. That is the tightest the design survives -
   below it the nav goes to the drawer. */
@media (max-width: 1280px) {
    /* 18px is the tier's designed gap and it holds from ~1065px up. The comment
       above does the arithmetic in EN; in EL, the widest of the five navs, the
       same row is 34px longer and lands 0.5px over at 1025 on the white skin.
       Same /8 slope as the desktop gap, so the last 40px of the tier gives way
       rather than clipping. (D263) */
    :root { --nav-gap: clamp(12px, calc((100vw - 920px) / 8), 18px); --nav-size: 14px; }
    .site-header__aside { gap: 18px; }
    /* Scoped to the bar: the drawer and footer logos keep their size. */
    .site-header__bar .iv-logo { width: 140px; height: 34px; }

    .fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 40px; }
    .site-footer { padding-inline: 40px; }
    .hero__inner { padding-top: 22vw; }

    .nw-hero__tabs { gap: 34px; }
    .nw-hero__filters { gap: 20px; }
    .nw-grid { gap: 30px; --nw-track: calc((100% - 30px) / 2); }
}

/* Below this the seven-item bar genuinely stops fitting: the nav moves into the
   drawer, which already holds the same list (D75, restores D65's 1024px). */
@media (max-width: 1024px) {
    .site-header__bar { gap: 20px; }
    .site-header__nav { display: none; }
    .iv-drawer__nav { display: block; }

    /* The nav carries margin-left:auto (D72), so with the nav hidden nothing
       pushes the language switcher and burger over and they sat against the
       logo. The aside takes the auto margin back here. */
    .site-header__aside { margin-left: auto; }

    .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer::before,
    .site-footer::after { display: none; }     /* D52 - decoration dropped */

    /* Step 2 sections. The two-up and three-up grids halve; .pf-grid goes
       straight to one column instead, because its cards are photo-beside-text
       and a 2/1 split would leave one orphan on a row of its own. */
    .sv-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --kn-track: calc((100% - 25px) / 2); }

    /* .nw-grid goes straight to one column for the same reason .pf-grid does:
       the card is photo-beside-text, and at half of 1024px the text column is
       narrower than the photo. The band's overlap shrinks with it. */
    .nw-grid { grid-template-columns: minmax(0, 1fr); --nw-track: 100%; }
    .nw-hero { padding: 76px 0 150px; }
    .nw-body { margin-top: -120px; }
    .nw-actions { margin-top: 56px; }

    /* The article card keeps its proportions but gives back padding, and the
       band shrinks with it - 438px of decoration is measured against a 3,100px
       page and is simply too much of a laptop screen. */
    :root { --ar-band-h: 340px; --ar-pull: 260px; --ar-card-pad: 48px; }
    .ar-card { padding-top: 48px; }
    .ar-body { padding-bottom: 72px; }
    .ar-copy { margin-top: 40px; }

    .hero__card { display: none; }             /* it would cover the headline */
    .hero__scroll { display: none; }
    /* With the card gone there is nothing to keep clear of, so the headline
       gets the full measure back. */
    .hero__headline { max-width: none; }

    /* The drawer's vertical rhythm is measured off a 900px-tall panel at 1920
       (103px above Contact Info, 34px between fields, 91px above the socials).
       Once the nav moves in as well, that spacing turns the panel into a long
       scroll on a laptop or a phone, so it compresses here. */
    .iv-drawer__top { margin-bottom: 30px; }
    .iv-drawer__intro .topic-block-body > p,
    .iv-drawer__intro > p { font-size: 14px; line-height: 22px; margin-bottom: 22px; }
    .iv-drawer__contact { margin-top: 40px; }
    /* Only the font size is a change now: the base 22px is already tighter than
       the 24px this tier used to impose, and the 8px label gap needs no
       compressing at all, so neither is overridden here any more. */
    .iv-drawer__heading { font-size: 16px; }
    .iv-drawer__field + .iv-drawer__field { margin-top: 24px; }
    .iv-drawer__social-heading { margin-top: 40px; }
    .iv-drawer__socials { margin-top: 24px; }
}

@media (max-width: 768px) {
    :root { --card-inset: 10px; }
    .site-header__bar { height: 70px; padding-inline: 18px; }
    .site-header--overlay { padding: 10px var(--card-inset) 0; }
    /* radius is already --radius-card (D66); the 34px optical right padding is
       too much of a phone's width to give away, so it goes back to symmetric */
    .site-header--overlay .site-header__bar { height: 70px; padding-inline: 18px; }
    .site-header--overlay.is-stuck .site-header__bar { height: 70px; }

    /* Growing rather than clipping is the base rule's job now; this tier only
       lowers the floor, because 45.8vw of a phone is not a hero. The copy runs
       to eight lines here - the three designed lines carry their own <br>s and
       each wraps again in a ~340px measure - so the band is content-driven at
       this width whatever the floor says. */
    .hero { min-height: clamp(460px, 120vw, 640px); }
    .hero__inner { padding-top: 110px; padding-bottom: 56px; }
    .hero__headline { font-size: 30px; }
    .hero__cta { margin-top: 40px; }

    .fc-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; }
    .site-footer { padding: 40px 24px; }
    .site-footer__top { flex-direction: column; align-items: flex-start; gap: 30px; }
    .site-footer__top .iv-nav__list { flex-wrap: wrap; gap: 18px 28px; }

    /* Split left/right is a desktop arrangement; at phone width the two halves
       would each be one word per line. Centred and stacked instead, and the
       credits centre within themselves so the two lines sit under each other
       rather than hugging opposite edges. .site-footer drops to 40px padding
       at this tier, but the chevrons are already off (D52) so nothing under
       the bar needs clearing. */
    .site-footer__bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        margin-top: 40px;
    }

    .site-footer__credits { justify-content: center; gap: 4px 16px; }

    .iv-drawer { width: auto; left: var(--card-inset); padding: 28px; }

    /* Step 2 sections at phone width. The 110px band padding is measured at
       1920 and is simply too much of a small screen to spend on whitespace. */
    :root { --sec-pad: 64px; }

    /* These five carry .html-innvestio for the same reason their base rules do
       (D83): the base is (0,2,0) and a media query adds NO specificity, so the
       unprefixed versions that were here scored (0,1,0) and lost to the desktop
       rules they were meant to replace. Every one of them was dead - the phone
       rendered 32px card titles inside 65px margins, and 20px ledes. If you add
       a phone override for anything whose base rule is prefixed, prefix it. */
    .html-innvestio .sec__title { font-size: 26px; }
    /* Same trap as the card title below: the base line-height is a fixed 25px
       set against 20px type, so dropping to 15px here made the leading LOOSER
       on a phone (1.67) than on the desktop it was measured for (1.25). */
    .html-innvestio .sec__lede { font-size: 15px; line-height: 1.45; }

    /* line-height has to be restated. The base is a FIXED 48px, measured for
       32px type on the artboard; inherited by 20px type it reads as a ratio of
       2.4 and the two title lines drift apart. A ratio here instead, so the
       leading tracks whatever size this breakpoint sets.

       24px, not 20: the body copy is 20px and the phone override never touched
       it, so at 20px the title was the same size as the paragraph under it and
       stopped reading as a heading. */
    .html-innvestio .sv-card__title {
        margin: 32px 24px 18px;
        font-size: 24px;
        line-height: 1.3;
    }
    .html-innvestio .sv-card__body { margin: 0 24px 24px; }
    .html-innvestio .sv-card__link { margin: 0 24px 32px; }

    .pf-strip { padding: 18px; }
    /* Stacked, the card is sized by its own content, so the auto margin has no
       slack to absorb and the desktop 36px would only open a hole between the
       label and the link. Real margins take over instead - with the autos
       collapsed the title, the label and "Visit now" would otherwise sit
       line-on-line. */
    .pf-card { flex-direction: column; gap: 16px; }
    .html-innvestio .pf-card__division { margin: 24px 0 18px; }
    /* contain, not the desktop cover: the stacked card turns the 145x198 box
       into a 180px-tall full-width band, and since the client round the three
       tiles are article artwork on white - a press, a diagram and the
       INNVOLUTIONS lockup - none of which survives a landscape crop. cover was
       clipping the lockup's last two letters. No background: the tiles carry
       their own white and sit centred on the card's grey. */
    .pf-card__media { width: 100%; height: 180px; object-fit: contain; }

    .pr-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-grid--single { grid-template-columns: minmax(0, 1fr); }

    .ab-grid { grid-template-columns: minmax(0, 1fr); }
    .kn-grid { grid-template-columns: minmax(0, 1fr); --kn-track: 100%; }
    .kn-tabs { gap: 18px; }
    .kn-filters { gap: 16px; }

    /* At phone width the card stacks: photo on top, full bleed inside the
       card's padding, then the text underneath. */
    .nw-hero { padding: 50px 0 110px; }
    .nw-hero__tabs { gap: 18px; }
    .nw-hero__filters { gap: 16px; }
    .nw-body { margin-top: -80px; padding-bottom: 50px; }
    .nw-card { flex-direction: column; }
    .nw-card__media { width: 100%; height: 200px; }
    .nw-card__body { padding: 20px 4px 4px; }
    .nw-card__title { font-size: 19px; line-height: 24px; }
    .nw-card__more { padding-top: 20px; }

    /* At phone width the card is the page, so it keeps only enough padding to
       stay a card. The body's 27px line pitch stays - it is what makes a long
       article readable on a small screen - but the block spacing comes in. */
    :root { --ar-band-h: 260px; --ar-pull: 200px; --ar-card-pad: 24px; }
    .ar-card { padding-top: 32px; }
    .ar-body { padding-bottom: 50px; }
    .ar-media { margin-top: 18px; }
    .ar-copy { margin-top: 32px; }
    .ar-copy h2,
    .ar-copy h3,
    .ar-copy h4 { margin: 40px 0 12px; font-size: 19px; line-height: 25px; }
    .ar-copy img { margin: 28px 0; }

    .sec__form-card { padding: 24px; min-height: 220px; }
}

/* The D44 mitigation is deliberately gone. It hid the video below 1024px AND
   for prefers-reduced-motion, falling back to a poster that was never produced
   - so a reduced-motion desktop got a broken image instead of the hero. The
   client's instruction is that the video plays on every screen, so both gates
   are removed rather than repaired. The 46 MB payload now reaches phones too;
   optimising the file is the outstanding item, not gating it. */

/* --------------------------------------------------------------------------
   STEP 5 - the Special topic detail page. Measured on Special topic detail.png
   (1920 x 3219), brief section 36. Rendered by
   Themes/Innvestio/Views/Topic/TopicDetailsSpecial.cshtml, reached through a
   second TopicTemplate row (D129) rather than a blanket override of
   TopicDetails.cshtml.

   THE SHELL IS THE NEWS DETAIL PAGE'S, verified by pixel scan against News
   Detail.png - band y 90 -> 527 (438 tall), card x 459 -> 1461 (1003 wide,
   centre 960, radius 12), card top y 175. So .nw-hero--bare, .ar-body, .ar-card
   and the whole .ar-copy typography block above are REUSED, not restated, and
   everything below is only what actually differs. Reusing .ar-card also means
   the 1024/768 steps on --ar-band-h / --ar-pull / --ar-card-pad come for free.

   MEASURED, ink row scan at x 550-1400:

       title          286 -> 309   one line, cap 18 -> 27/45 weight 800
       media top      389          badge top 402, left 553
       media bottom   806          389 + 417, the 850 x 421 ratio held
       lede           866, 893     two lines, pitch 27
       body           937 ...      pitch 27
       list items     39px apart, wrapped lines 24 apart, marker 5px at x 557
       byline        2213 -> 2231

   THE CARD'S TOP PADDING IS 100, NOT THE NEWS PAGE'S 70. The news card spends
   its first 27px line box on the date; this one opens on the headline, and the
   design gives the headline the same optical start rather than sliding it up.
   Derived, not guessed: cap top 286 less the 9px half-leading of a 27/45 line
   puts the line box at 277, and 277 - 175 = 102.

   EVERYTHING SITS ON ONE COLUMN, which is D122 applied again. The export has
   the title and the media box at x 539 and the body copy 18px further in at
   557 - the identical step section 33 found on the news detail page and ruled
   was hand-placement drift (Q31). Reproducing it would mean a text measure that
   disagrees with the media box above it by 18px on one side and 25px on the
   other, which is drift, not design. So: one column, the card's 80px padding,
   exactly as .ar-card already gives.

   That also explains the badge. At x 553 against a media box at 539 it is
   inset 14 - which is .ar-badge's measured inset on the news page, to the
   pixel. The two pages place their chip identically.

   WHAT IS NOT REUSED, AND WHY:

     .ar-media   is cover on --c-page. The three supplied images are a
                 transparent product shot (1037x585), a flat diagram
                 (1200x516) and a 191x54 logo lockup. Cover would crop two of
                 them and the grey would show through the first.
     .nw-card__badge  has the right metrics but is the DIVISION chip - navy
                 unless [data-division] matches, min-width 43px, centred. This
                 label is free editorial text a client types ("Geographical
                 Dispersed", measured 141px), so it gets its own rule and a
                 future retint of the news badge cannot reach this page.

   ONE DELIBERATE DEPARTURE FROM THE EXPORT. The paragraph closing the bulleted
   list is set at a 21px pitch in the artboard against 27 everywhere else. Same
   family of drift as Q31, resolved the same way: one body rhythm, 27px.
   -------------------------------------------------------------------------- */

/* (0,3,0), so it also beats the unqualified .ar-card { padding-top } inside the
   1024 and 768 blocks above - which is why this page has to restate its own
   value at both of those breakpoints further down. Composing a second class
   onto .ar-card instead would have lost to them on source order. */
.html-innvestio .special-topic-page .ar-card { padding-top: 100px; }

/* .ar-title carries margin-top:6px to clear the date above it on the news page.
   There is no date here, so the card's padding is the whole gap. */
.html-innvestio .special-topic-page .st-title { margin-top: 0; }

/* .ar-copy's 48px is the gap under the news page's photograph. Here the copy
   OPENS with the media block, so the gap is title line box bottom 322 -> media
   top 389. text-align is restated because a Topic body is the one place in this
   theme where DefaultClean's justification has historically leaked in (D83). */
.html-innvestio .special-topic-page .st-copy {
    margin-top: 69px;
    text-align: start;
}

/* --- the media block ------------------------------------------------------
   A Topic has no picture field and no badge field - that was Q15. Both are
   authored in the Topic's Body HTML against these class names (D130):

       <figure class="st-media">
         <img src="/images/topics/proof-press.png" alt="" />
         <figcaption class="st-badge">Geographical Dispersed</figcaption>
       </figure>
   -------------------------------------------------------------------------- */
.html-innvestio .st-media {
    position: relative;
    margin: 0 0 56px;                 /* media bottom 806 -> lede line box 862 */
    aspect-ratio: 850 / 421;
    border-radius: 6px;
    background: var(--c-white);
    overflow: hidden;
}

/* contain, NOT the news page's cover, and white rather than --c-page: none of
   the three supplied images is a photograph that survives a crop, and the first
   is transparent, so the card's own white has to show through. */
.html-innvestio .st-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;                        /* beats .ar-copy img's 40px block margin */
}

/* Article 3 ships only the 191x54 INNVOLUTIONS lockup - no photograph exists
   (D131, B10). Held at 850/421 it would sit marooned in the middle of a 417px
   box, and upscaled it would be mush. So the ratio is dropped, the box shrinks
   to the mark plus air, and the image is never scaled past its own size. */
.html-innvestio .st-media--mark {
    aspect-ratio: auto;
    min-height: 160px;
    display: grid;
    place-items: center;
}

.html-innvestio .st-media--mark img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Same fill, radius, metrics and 13/14 inset as .nw-card__badge + .ar-badge on
   the news pages - measured identically here. Free-width, though: min-width and
   text-align:center are right for a 4-letter division code and wrong for a
   phrase. max-width keeps a long label off the far edge of the picture. */
.html-innvestio .st-badge {
    position: absolute;
    top: 13px;
    left: 14px;
    max-width: calc(100% - 28px);
    padding: 2px 7px;
    border-radius: 2px;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Article 2's diagram carries a description line in the source copy. The
   figcaption slot is the badge, so the caption follows the figure - and :has
   pulls the figure's bottom margin in so the caption reads as belonging to the
   picture rather than floating between blocks. Same mechanism as .ar-copy
   p:has(> img) above. Italic at 400: the kit has no other italic (D18/D25). */
.html-innvestio .special-topic-page .st-media:has(+ .st-caption) { margin-bottom: 14px; }

.html-innvestio .special-topic-page .st-caption {
    margin: 0 0 54px;
    font-size: 15px;
    line-height: 22px;
    font-style: italic;
    color: var(--c-copy);
}

/* --- the copy -------------------------------------------------------------
   Everything else is the .ar-copy typography block - 16/27 body, h2 at 21/27
   weight 800 on a 56/16 rhythm (D123). These are the five additions the article
   structure needs, all authored as classes in the Topic body so the client can
   see what they are doing.
   -------------------------------------------------------------------------- */

/* The standfirst. Deliberately the same component as .ar-copy h2 rather than a
   new size: it is a deck, and giving it an <h2> would put a second-level
   heading above every real one. */
.html-innvestio .special-topic-page .st-lede {
    margin: 0 0 16px;
    font-size: 21px;
    line-height: 27px;
    font-weight: 800;
    color: var(--c-navy);
}

/* .ar-copy p + p would otherwise collapse a 27px margin against the lede's 16
   and win, since collapsing siblings take the LARGER. Measured gap is 16. */
.html-innvestio .special-topic-page .st-lede + p { margin-top: 0; }

/* Items 39px apart, wrapped lines 24 - both measured. The marker is a 5px
   accent dot on the column's left edge with the text 12px in, which is why the
   list gives up list-style and its indent rather than restyling ::marker:
   ::marker takes colour but not position, and the design needs both.
   margin-top 0 lets the preceding h2's 16px bottom margin stand. */
.html-innvestio .special-topic-page .st-list {
    margin: 0 0 15px;
    padding-left: 0;
    list-style: none;
}

.html-innvestio .special-topic-page .st-list li {
    position: relative;
    padding-left: 12px;
    line-height: 24px;
}

.html-innvestio .special-topic-page .st-list li + li { margin-top: 15px; }

.html-innvestio .special-topic-page .st-list li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-accent);
}

/* The closing line. The source copy marks it bold AND italic; the Adobe kit
   zzc0fre has regular, medium, semibold, bold and extrabold but italic at 400
   ONLY (D18/D25), so asking for both would get a browser-synthesised faux
   oblique of the bold face sitting next to five real ones. The nested reset is
   the point of the second rule and is not redundant - a paste from the source
   document brings a <strong> with it. */
.html-innvestio .special-topic-page .st-closing {
    margin-top: 56px;
    font-style: italic;
    color: var(--c-navy);
}

.html-innvestio .special-topic-page .st-closing strong,
.html-innvestio .special-topic-page .st-closing b,
.html-innvestio .special-topic-page .st-closing em {
    font-style: italic;
    font-weight: 400;
}

/* "Name - Role, Company". Article 2 credits two people, so this stacks rather
   than assuming one. */
.html-innvestio .special-topic-page .st-byline {
    margin-top: 48px;
    color: var(--c-copy);
}

.html-innvestio .special-topic-page .st-byline + .st-byline { margin-top: 10px; }

.html-innvestio .special-topic-page .st-byline__name {
    font-weight: 600;
    color: var(--c-navy);
}

/* --------------------------------------------------------------------------
   Responsive. The XD file is desktop-only (D3), so this is proposed, not
   measured. 1500 and 1280 need nothing: the card is a fixed 1000px until the
   viewport reaches ~1048px, and the band and side padding already step through
   --ar-*. What IS needed at 1024 and 768 is restating the card's top padding,
   because the .ar-card rules inside those two blocks are (0,1,0) and this
   page's is (0,3,0) - without these, a laptop would keep the full 100px.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .html-innvestio .special-topic-page .ar-card { padding-top: 48px; }
    /* 67px of whitespace under the headline is measured against a 3,200px page
       and is too much of a laptop screen, exactly as the 438px band was. */
    .html-innvestio .special-topic-page .st-copy { margin-top: 44px; }
    .html-innvestio .st-media { margin-bottom: 40px; }
    .html-innvestio .special-topic-page .st-caption { margin-bottom: 40px; }
}

@media (max-width: 768px) {
    .html-innvestio .special-topic-page .ar-card { padding-top: 32px; }
    .html-innvestio .special-topic-page .st-copy { margin-top: 28px; }
    .html-innvestio .st-media { margin-bottom: 32px; }
    .html-innvestio .st-media--mark { min-height: 120px; }
    .html-innvestio .special-topic-page .st-caption { margin-bottom: 32px; }
    /* Tracks .ar-copy h2's own phone size, so the deck and the headings under
       it stay one family. */
    .html-innvestio .special-topic-page .st-lede { font-size: 19px; line-height: 25px; }
    .html-innvestio .special-topic-page .st-closing { margin-top: 40px; }
    .html-innvestio .special-topic-page .st-byline { margin-top: 36px; }
    /* A 141px chip is a third of a phone's width, so it wraps rather than
       running off the picture. */
    .html-innvestio .st-badge { white-space: normal; }
}


/* --------------------------------------------------------------------------
   STEP 6 - the login page (/login) and the 404 page (/page-not-found).
   Rendered by Themes/Innvestio/Views/Customer/Login.cshtml and
   Themes/Innvestio/Views/Common/PageNotFound.cshtml.

   NOT MEASURED. Neither page is in the XD file - Assets/Batch carries five
   full-page screens and neither of these is one of them - so every number below
   is derived from the artboards that WERE measured (D3), never sampled.

   THE SHELL IS THE NEWS LIST ONE, REUSED WHOLE. Both pages carry a title that
   names the page rather than its content, and that is exactly the distinction
   between the two shells this theme already has:

       .nw-hero      + .nw-body   eyebrow and h1 IN the band   -> /blog
       .nw-hero--bare + .ar-body  empty band, title in the card -> a post

   So .nw-hero, .sec__inner, .sec__eyebrow, .sec__title and .nw-body are reused
   unchanged, and their 1024 and 768 steps (lines 1887 and 1962) come with them.
   That is why the responsive block at the foot of STEP 6 is four declarations
   rather than a second layout.

   WHAT IS ACTUALLY NEW is one card and a set of form controls.

   THE CARD IS NARROWER THAN AN ARTICLE, deliberately. .ar-card is 1000px
   because it holds prose and photographs. A login form is a single input
   column, and a 1000px field under a three-word label reads as a mistake.
   560px puts the field at roughly the 430px the contact panel gives its inputs
   on Home.png, plus the card padding. The 404 takes 760px: it is prose, but
   three short lines of it, and the measure .ar-copy is built for would leave
   the last line of each bullet orphaned.

   UNDERLINE FIELDS, NOT BOXES. The only form in the whole design system is the
   HubSpot panel in home section 6, and its fields are hairline underlines on
   white - no box, no fill. Boxed inputs would be the one control on the site
   that looks like it came from somewhere else.

   THREE THINGS HAD TO BE PAID BACK for dropping the stock .login-page class
   (D83, and see the view header):

     1. THE PASSWORD EYE. styles.css scopes it .login-page .password-eye, so it
        vanished with the class. Restated below against the same two images the
        theme already ships in Content/images.
     2. THE FONT ON THE SUBMIT BUTTON. .nw-more sets no font-family, because the
        news list uses it on an <a> which inherits Proxima Nova from body. A
        <button> inherits nothing and styles.css:117 hands every button Arial.
        One declaration, easy to miss, and it shows on this page only.
     3. THE BASE INPUT RULES. styles.css:106 gives every text input a 36px
        height, a #ddd box and 8px of padding at (0,1,1), and :focus recolours
        it at (0,2,1). .html-innvestio .au-input is (0,2,0) and its :focus
        (0,3,0), so both win - but only because of the .html-innvestio prefix.
        Without it the box would come back on focus alone, which is the kind of
        half-broken that survives a review.
   -------------------------------------------------------------------------- */

:root {
    --au-card-w:    560px;   /* login - one field column        */
    --au-card-w-wd: 760px;   /* 404   - a short prose measure   */
    --au-card-pad:   64px;
}

/* .nw-body already supplies position:relative and z-index:1, so the card sits
   over the band without needing a stacking context of its own. */
.html-innvestio .au-card {
    width: min(100% - 48px, var(--au-card-w));
    margin-inline: auto;
    padding: 56px var(--au-card-pad) var(--au-card-pad);
    background: var(--c-white);
    border-radius: 12px;
}

/* Redeclaring the token rather than the width keeps the min() and the gutter in
   one place, and lets the breakpoints below step both cards at once. */
.html-innvestio .au-card--wide { --au-card-w: var(--au-card-w-wd); }

/* --- fields ---------------------------------------------------------------
   The label is a caption, not a sentence: uppercase, tracked, and in the slate
   the drawer already uses for field labels (brief s19). */
.html-innvestio .au-field + .au-field { margin-top: 30px; }

.html-innvestio .au-label {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--c-slate-field);
}

.html-innvestio .au-input {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 30px 0 2px;   /* right pad clears the 24px eye at right:10px */
    border: 0;
    border-bottom: 1px solid var(--c-hairline);
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
    /* Not inherit: the base sheet sets the family on <input> itself, so there
       is nothing useful to inherit from. */
    font-family: "proxima-nova", "Proxima Nova", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--c-navy);
    transition: border-color .2s var(--ease);
}

.html-innvestio .au-input:focus {
    outline: none;
    border-bottom-color: var(--c-accent);
    color: var(--c-navy);
}

.html-innvestio .au-input::placeholder { color: var(--c-slate-body); }

/* --- the password eye -----------------------------------------------------
   styles.css:4027-4045 verbatim, minus the .login-page ancestor this theme
   does not opt into. The URLs resolve from Content/css to Content/images
   exactly as they do in the sheet they came from. */
.html-innvestio .login-password { position: relative; }

.html-innvestio .password-eye {
    display: block;
    position: absolute;
    top: calc(50% - 12px);
    right: 10px;
    width: 24px;
    height: 24px;
    background-image: url('../images/eye-closed.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    opacity: .75;
    cursor: pointer;
}

.html-innvestio .password-eye-open { background-image: url('../images/eye.png'); }

/* --- remember me / forgot password ---------------------------------------- */
.html-innvestio .au-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
}

.html-innvestio .au-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.html-innvestio .au-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--c-accent);
    cursor: pointer;
}

.html-innvestio .au-check label {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--c-copy);
    cursor: pointer;
}

.html-innvestio .au-link {
    font-size: 15px;
    line-height: 20px;
    color: var(--c-accent);
    text-decoration: none;
}

.html-innvestio .au-link:hover { text-decoration: underline; }

.html-innvestio .au-captcha { margin-top: 26px; }

/* --- actions --------------------------------------------------------------
   .nw-actions is not reused: its 84px top margin is spacing for a grid of news
   cards, not for a form. The button itself is .nw-more untouched. */
.html-innvestio .au-actions {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* Point 2 of the three paid-back rules above. */
.html-innvestio .au-actions .nw-more { font-family: inherit; }

/* --- validation -----------------------------------------------------------
   ASP.NET suppresses the ModelOnly summary element entirely when the model is
   valid, so .au-summary needs no hiding rule - verified against the rendered
   page. The per-field spans ARE always emitted, empty, carrying
   .field-validation-valid, which styles.css:390 sets to display:block in green
   at 13px centred. :empty collapses them instead. */
.html-innvestio .au-summary {
    margin: 0 0 28px;
    padding: 13px 18px;
    border-radius: 6px;
    background: rgba(226, 59, 46, .08);
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ppds);
}

.html-innvestio .au-summary ul { margin: 6px 0 0; padding-left: 18px; }

.html-innvestio .au-error {
    display: block;
    margin-top: 8px;
    text-align: start;
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ppds);
}

.html-innvestio .au-error:empty { display: none; }

/* An empty .external-authentication still has the base sheet margin under it,
   which on a page with nothing in it is a hole between card and footer. */
.html-innvestio .auth-page .external-authentication:empty { display: none; }

/* --- 404 copy -------------------------------------------------------------
   The body is the PageNotFound Topic (D140), so this restates the .ar-copy
   rhythm INSIDE a .topic-block. It has to: line 80 of this sheet zeroes
   paragraph margins in every Topic with :where(p) (D83), which is right for the
   home sections - one designed paragraph per slot - and wrong for the one Topic
   on the site that is genuinely prose. */
.html-innvestio .nf-copy .topic-block { margin: 0; }

/* The Topic has an empty Title in all five languages, so this never fires
   today. It is here so that a title typed into admin later does not print the
   h1 a second time. */
.html-innvestio .nf-copy .topic-block-title { display: none; }

.html-innvestio .nf-copy .topic-block-body {
    text-align: start;
    font-size: 16px;
    line-height: 27px;
    color: var(--c-copy);
}

.html-innvestio .nf-copy .topic-block-body p { margin: 0; }
.html-innvestio .nf-copy .topic-block-body p + p { margin-top: 27px; }

.html-innvestio .nf-copy .topic-block-body ul,
.html-innvestio .nf-copy .topic-block-body ol {
    margin: 22px 0 0;
    padding-left: 22px;
    list-style: disc;
}

.html-innvestio .nf-copy .topic-block-body ol { list-style: decimal; }
.html-innvestio .nf-copy .topic-block-body li + li { margin-top: 8px; }

.html-innvestio .nf-copy .topic-block-body strong,
.html-innvestio .nf-copy .topic-block-body b {
    font-weight: 600;
    color: var(--c-navy);
}

.html-innvestio .nf-copy .topic-block-body a { color: var(--c-accent); }


/* --------------------------------------------------------------------------
   Responsive (step 6). The band and the pull-up step themselves - both pages
   ride .nw-hero and .nw-body, which are already handled at 1024 and 768. Only
   the card padding and the meta row need saying.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    :root { --au-card-pad: 48px; }
    .html-innvestio .au-card { padding-top: 48px; }
}

@media (max-width: 768px) {
    :root { --au-card-pad: 24px; }
    .html-innvestio .au-card { padding-top: 32px; }
    /* Two items that each want a full line rather than a 150px column. */
    .html-innvestio .au-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    /* A 220px pill in a 24px-padded card on a 360px phone is close enough to
       the edges that filling the row reads as deliberate instead. */
    .html-innvestio .au-actions .nw-more { width: 100%; }
}


/* --------------------------------------------------------------------------
   STEP 7 - the "Landing page" topic template and its first user, Unattended
   Stores (/unattended-stores). Rendered by
   Themes/Innvestio/Views/Topic/TopicDetailsLanding.cshtml; every class below is
   authored in the Topic's own Body HTML, which _docs/sql/027-innvestio-
   unattended-topic.sql writes and documents. Brief section 39.

   SOURCE, NOT AN ARTBOARD. This page is not in the XD file. It is rebuilt from
   the live WordPress page at https://www.innvestio-group.com/unattended-stores/
   and from unnattended topic/www.innvestio-group.com-unattended-stores.png, a
   1905 x 6314 full-page capture. Colours below were SAMPLED off that capture
   (darkest pixel inside a glyph box, so antialiasing cannot skew them);
   geometry was measured on it the same way every other step measured an
   artboard. Where the capture and this design system disagree, the system wins
   - see the two notes on type and on container width below.

   THE GREEN IS PAGE-SCOPED ON PURPOSE (D145). Unattended Stores is a sub-brand
   with its own green, and the client asked to keep it. Putting --us-green on
   :root would make it a site token, which it is not. It lives on .landing-page,
   so nothing outside this template can reach it and the page cannot leak green
   into home, news or the Proof articles.

   TYPE IS OURS, COLOUR IS THEIRS. The source page sets body copy in a serif at
   near-black (#313433). Proxima Nova and --c-copy are used instead: the
   decision was to keep the sub-brand accent colour, not to import another site
   type system.
   -------------------------------------------------------------------------- */

/* THE PAGE FIELD IS A TEXTURE ON WHITE, NOT --c-page, AND IT IS BANDED.
   Client direction, 2026-09-22: the supplied Assets/Batch/unnatended-section-bg.png,
   then where the upper band stops (the .us-why / .us-how boundary), then the
   lower band on the interest form.

   That is the source page, measured. A left-margin scan of
   unnattended topic/www.innvestio-group.com-unattended-stores.png (1905 x 6314,
   x 20-200, outside every content box) reads:

       y    0 ->  715   hero, dark
       y  720 -> 1549   TEXTURE      .us-intro + .us-why
       y 1550 -> 3735   white        .us-how
       y 3740 -> 4655   dark         .us-video
       y 4660 -> 5136   white        .us-cta
       y 5137 -> 6195   TEXTURE      .us-form
       y 6200 ->        footer

   So the field is white and the texture is a band, not the other way round.
   Both band edges fall on section boundaries, which is why this needs no
   wrapper and no extra markup in the Topic body.

   EVERY PIXEL IN THE SUPPLIED FILE CARRIES ALPHA 26 - the texture is a 10%
   overlay, not a colour, which is why the base stays its own declaration and
   the white .us-why__card still reads as a plate on top of it.

   Scoped to the sections, not to body, for the same reason D145 scopes
   --us-green to .landing-page rather than :root. */
.html-landing-page body {
    background-color: var(--c-white);
}

/* DefaultClean puts margin: 0 0 100px on .center-1, the _ColumnsOne wrapper
   (styles.css:180). A MARGIN IS OUTSIDE THE BACKGROUND BOX, so that 100px sat
   between .us-form's textured bottom edge and the footer as unpainted white,
   and the band looked like it stopped short of the page. The source runs the
   texture to the footer with no gap (band ends 6195, footer 6200).

   Zeroed on this template only. Every other page is a flat field where the
   100px is the stock rhythm and nothing reveals it, so this is not a bug in
   .center-1 - it is a rule that only becomes visible once a section paints. */
.html-landing-page .center-1 { margin-bottom: 0; }

.us-intro,
.us-why,
.us-form {
    background-image: url("/images/topics/unattended/pattern.png");
}

/* .us-intro AND .us-why SHARE ONE EDGE AND MUST SHARE ONE LATTICE. A 36 x 60
   tile restarts at each box's origin, so painting both from the top would step
   the pattern wherever .us-intro's height is not a multiple of 60 - and that
   height is content-driven, so it varies by language. Anchoring the upper
   section to its BOTTOM and the lower one to its TOP puts both origins on the
   line they share, so the lattice runs through unbroken; the leftover phase
   break moves to .us-intro's top edge, which is the hero's dark underside and
   shows nothing.

   .us-form needs none of this: it is a band on its own, white above and the
   footer below, so the default left/top origin has no neighbour to disagree
   with. */
.us-intro { background-position: left bottom; }
.us-why   { background-position: left top; }

.landing-page {
    --us-green:       #1E744A;  /* headings, step titles, icon gradient end;
                                   sampled identically in four separate glyph
                                   boxes, so this is the one green on the page */
    --us-green-panel: #35825C;  /* the Interest-form panel  (450,5400)         */
    --us-navy:        #132651;  /* icon gradient start; band top samples
                                   #132A50, the same colour under the capture
                                   dither                                      */

    /* The four step photos are 488 x 480. A 490px cell is therefore exactly
       1:1, and filling the 1300px container would upscale every one of them -
       the failure D125 exists to prevent. So the ladder and the feature card
       cap here instead, which is also what the source page does (its content
       column measures 471 -> 1449, i.e. 978). */
    --us-narrow:      980px;
}

/* .us-inner is .sec__inner by another name. Restated rather than aliased onto
   that selector because the Topic body is the client to edit, and a class that
   only works because of a selector list three hundred lines away is a trap. */
.us-inner {
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
}

/* Section headings. Centred green, one size, used by five of the seven bands -
   the source page draws no distinction between them either. */
.html-innvestio .us-title {
    margin: 0;
    text-align: center;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--us-green);
}

.html-innvestio .us-title--on-dark { color: var(--c-white); }

/* --- 1. hero ---------------------------------------------------------------
       Full-bleed, image 1920 x 590 (hero.webp, the source banner). Measured on
       the capture the band runs y 186 -> 703, i.e. 517 tall, so the image is
       cropped rather than letterboxed - background-size: cover, not contain.
       min-height keeps the headline off the phone photo subject.

       The photo carries its interest on the RIGHT (a hand at a terminal) and
       its copy on the LEFT, so the scrim is horizontal, not the flat overlay
       the home hero uses. */
.us-hero {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1920 / 590;
    min-height: 420px;
    background: var(--us-navy) url("/images/topics/unattended/hero.webp")
                no-repeat center / cover;
}

.us-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
                rgba(19, 38, 81, .92) 0%,
                rgba(19, 38, 81, .55) 38%,
                rgba(19, 38, 81, 0)   70%);
}

/* D53 call, applied again: the source page starts its hero text at x 190, but
   every other band on this site starts at the 1300px container 310. The
   container wins - three different left edges on one page is the fault s16
   recorded, not a feature. */
.us-hero__inner {
    position: relative;
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
}

.html-innvestio .us-hero__title {
    margin: 0;
    /* Two lines at a ~80px pitch with ~48px glyph bands on the capture. Against
       the calibration this theme already uses (ink is ~0.90 of the size) that
       is 54px; clamped because the band is fluid. */
    font-size: clamp(30px, 2.85vw, 54px);
    line-height: 1.18;
    font-weight: 700;
    color: var(--c-white);
}

.html-innvestio .us-hero__sub {
    margin: 14px 0 0;
    font-size: clamp(21px, 1.98vw, 38px);
    line-height: 1.2;
    font-weight: 400;
    color: var(--c-white);
}

/* "24/7" and the button share a baseline on the capture (button y 556 -> 608,
   the numeral ink y 540 -> 620), so they are one flex row rather than two
   blocks that happen to line up. */
.html-innvestio .us-hero__row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 10px 0 0;
}

.us-hero__stat {
    font-size: clamp(42px, 3.96vw, 76px);
    line-height: 1.1;
    font-weight: 300;
    color: var(--c-white);
}

/* Measured 133 x 52. Square-ish corners, unlike the site full-pill .hero__cta -
   this is the sub-brand button, and it is the one place the source own shape is
   kept rather than normalised. */
.html-innvestio .us-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 133px;
    height: 52px;
    padding-inline: 20px;
    border-radius: 3px;
    background: var(--c-white);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: var(--us-green);
    text-decoration: none;
    transition: background .25s var(--ease), color .25s var(--ease);
}

.html-innvestio .us-btn:hover {
    background: var(--us-green);
    color: var(--c-white);
}

/* --- 2. intro --------------------------------------------------------------
       The hero button target. --header-solid-h because this template renders
       the solid 90px skin; initAnchorScroll() applies the same offset when the
       click happens in-page, and this is what a page LOADED on
       /unattended-stores#learn-more uses. */
.us-intro {
    padding-block: var(--sec-pad);
    scroll-margin-top: var(--header-solid-h);
}

.html-innvestio .us-lead {
    margin: 0 0 32px;
    text-align: center;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--us-green);
}

.html-innvestio .us-intro p {
    margin: 0 auto 18px;
    max-width: 760px;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    color: var(--c-copy);
}

.html-innvestio .us-intro p:last-child { margin-bottom: 0; }

/* The two <strong> runs the source page bolds - "24/7 availability" and
   "convenience and speed". Darkened off --c-copy so the emphasis reads. */
.html-innvestio .us-intro strong {
    font-weight: 700;
    color: var(--c-navy);
}

/* --- 3. why choose ---------------------------------------------------------
       A white card on the page background, card 474 -> 1447 x 997 -> 1473 on
       the capture (973 x 476). Widened to --us-narrow: the icons are vector and
       the copy is short, so the extra 7px costs nothing and the card then lines
       up with the step ladder directly under it. */
.us-why { padding-bottom: var(--sec-pad); }

.us-why__card {
    width: min(100% - 48px, var(--us-narrow));
    margin-inline: auto;
    padding: 64px 56px 72px;
    border-radius: var(--radius-card);
    background: var(--c-white);
}

.us-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

.us-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* The four SVGs are 61-83 wide by 81-92 tall and all four are drawn with the
   same navy -> green gradient the page is built on, so they ship as supplied
   (D145) rather than being recoloured to --c-accent. A fixed height rather than
   a fixed width is what makes four different aspect ratios sit on one baseline. */
.us-feature__icon {
    display: block;
    height: 88px;
    width: auto;
    margin-bottom: 26px;
}

.html-innvestio .us-feature__title {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--c-navy);
}

.html-innvestio .us-feature__body {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-copy);
}

/* --- 4. how it works -------------------------------------------------------
       Four steps, each a 2-up row of a text cell and a 488 x 480 photo, with
       the photo alternating sides. The cells touch: the source page butts the
       images against the text column with no gutter, which is what gives the
       ladder its woven look. gap: 0 is therefore deliberate, not an omission. */
/* padding-BLOCK, not -bottom. Until D182 banded the texture, the gap above
   "How It Works?" came from .us-why's bottom padding. That padding is now
   inside the textured band, so it reads as the previous section's tail and the
   heading sat hard on the boundary (client: "add some padding before How it
   works"). .us-how now owns its own top gap, like .us-intro and .us-cta do.

   --sec-pad, not the source's measurement. The capture puts 76px of texture
   below the card and 85px of white above the cap, against our 110 + 110; the
   whole page already runs ~1.4x the source at section boundaries because
   --sec-pad is the design system's number, and STEP 7's rule is that where the
   capture and the system disagree, the system wins. Matching 85px here would
   make this one boundary tighter than every other on the page. */
.us-how { padding-block: var(--sec-pad); }

.us-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100% - 48px, var(--us-narrow));
    margin: 48px auto 0;
    padding: 0;
    list-style: none;
}

/* Each <li> spans the full row and lays its own two cells out, so the
   alternation is one `order` flip rather than four hand-placed grid areas. */
.us-step {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

.us-step:nth-child(even) .us-step__text  { order: 2; }
.us-step:nth-child(even) .us-step__media { order: 1; }

.us-step__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}

/* The four step icons are PNG at 94-147 wide by 144-152 tall - the only raster
   icons on the site. Rendered at their own height so nothing is upscaled;
   flagged in the brief as the one place the D125 2x rule is not met. */
.us-step__icon {
    display: block;
    height: 145px;
    width: auto;
    margin-bottom: 28px;
}

.html-innvestio .us-step__title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--us-green);
}

/* A lighter green, not --c-copy: on the capture the caption is plainly the
   title colour at reduced weight and opacity, and grey under a green title
   reads as a mistake. */
.html-innvestio .us-step__body {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: rgba(30, 116, 74, .72);
}

/* 488 x 480 native. object-fit: cover so a row whose text cell grows taller
   than 480 does not letterbox its photo. */
.us-step__media {
    display: block;
    width: 100%;
    aspect-ratio: 488 / 480;
    object-fit: cover;
}

/* --- 5. video --------------------------------------------------------------
       The one band that carries the navy AND the green: a vertical gradient
       from the page navy at the top to the sub-brand green at the bottom,
       sampled #132A50 at y 3800 and #1C6C4A at y 4560.

       CLICK TO LOAD (D146). The MP4 is 75.9 MB. The poster is 139 KB and is all
       that loads with the page; initLandingVideo() swaps in a <video> on click.
       The play button is injected by that function rather than authored in the
       Topic body, so the client HTML carries no interactive markup to break -
       the same call D79 made for the partner carousel. */
.us-video {
    padding-block: var(--sec-pad);
    background: linear-gradient(180deg, var(--us-navy) 0%, var(--us-green) 100%);
}

/* Measured x 390 -> 1530 on the capture. */
.us-video__player {
    position: relative;
    width: min(100%, 1140px);
    margin: 40px auto 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: #000;
}

.us-video__poster,
.us-video__player video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.us-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: rgba(19, 38, 81, .28);
    color: var(--c-white);
    cursor: pointer;
    transition: background .25s var(--ease);
}

.us-video__play:hover { background: rgba(19, 38, 81, .12); }

/* The disc and its triangle, drawn rather than shipped - the site already
   builds every other circular affordance this way (.kn-card__more,
   .nw-card__more). */
.us-video__play::before {
    content: "";
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
    transition: transform .25s var(--ease);
}

.us-video__play::after {
    content: "";
    position: absolute;
    /* A 26 x 30 triangle, nudged 4px right so it looks centred in the disc
       rather than measuring centred. */
    margin-left: 4px;
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent var(--us-green);
}

.us-video__play:hover::before { transform: scale(1.06); }

/* --- 6. call to action -----------------------------------------------------
       Green heading, muted body, then the two lock-ups side by side. */
.us-cta { padding-block: var(--sec-pad); }

.html-innvestio .us-cta p {
    margin: 22px auto 0;
    max-width: 760px;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    color: var(--c-copy);
}

.html-innvestio .us-cta strong {
    font-weight: 700;
    color: var(--c-navy);
}

.html-innvestio .us-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    margin-top: 48px;
}

/* The Innvestio lock-up is the mask the whole site already uses, tinted navy by
   currentColor - the source page own innvestio-logo.png is not shipped, because
   we have the same artwork as a one-file, any-colour mask (D62). */
.us-logos .iv-logo {
    width: 232px;
    height: 56px;
    color: var(--c-navy);
}

/* fiftytwo is a partner mark and has no mask, so it ships as the supplied
   493 x 101 PNG. */
.us-logos img {
    display: block;
    height: 44px;
    width: auto;
}

/* --- 7. interest form ------------------------------------------------------
       Green panel, white form card inside it. Panel measured x 383 -> 1533 on
       the capture (1150 wide); squared corners there, rounded here to
       --radius-card so it matches every other panel on the site.

       .us-form__slot IS EMPTY IN THE TOPIC BODY. initHubspotForms() reads the
       portal, form and region off its data attributes and calls
       hbspt.forms.create into it (D147). */
/* padding-BLOCK, for the reason D185 gave .us-how the same treatment: the gap
   above the green panel used to be .us-cta's bottom padding, and now that the
   texture starts at this section's top edge that gap has to be INSIDE the band
   or the panel sits hard on it. The source carries 99px of texture above the
   panel (band starts 5137, panel top 5236, sampled #35825C = --us-green-panel);
   --sec-pad is 110 and wins per D186, and it brings the <=1024 step with it. */
.us-form { padding-block: var(--sec-pad); }

.us-form__card {
    width: min(100% - 48px, 1150px);
    margin-inline: auto;
    padding: 56px 40px 64px;
    border-radius: var(--radius-card);
    background: var(--us-green-panel);
}

.html-innvestio .us-form__title {
    margin: 0 0 40px;
    text-align: center;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--c-white);
}

.us-form__slot {
    min-height: 420px;
    padding: 32px;
    border-radius: 4px;
    background: var(--c-white);
}

/* What little of a HubSpot embed is reachable from outside its iframe. The
   fields themselves are NOT - see B11 in brief section 39.

   SCOPED TO .hs-form-iframe, NOT to `iframe`. The slot holds a SECOND iframe:
   hbspt drops a reCAPTCHA badge (256 x 60) in a hidden sibling div, and a bare
   `.us-form__slot iframe` rule stretched that one to 100% too. Hidden today,
   so it showed up as nothing - which is exactly why it is worth naming the one
   iframe we mean. */
.us-form__slot .hs-form-iframe {
    display: block;
    width: 100% !important;
    border: 0;
}


/* --------------------------------------------------------------------------
   Responsive (step 7). The source page is desktop-only, like the XD file, so
   everything here is proposed rather than measured (D3). 1500 needs nothing -
   the hero is fluid and both content columns are already narrower than the
   viewport at that width.
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    /* The video player stops being 1140 fixed and starts tracking the gutter. */
    .us-video__player { width: min(100% - 48px, 1140px); }
}

@media (max-width: 1024px) {
    .us-why__card { padding: 48px 32px 56px; }
    /* Four 245px columns become two 340px ones rather than four 160px ones -
       "Ideal for offices, universities, airports, and hotels." needs the width
       more than the row needs to stay on one line. */
    .us-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 44px 32px;
        margin-top: 44px;
    }
    .us-step__icon { height: 120px; }
    .us-video__play::before { width: 72px; height: 72px; }
    .us-form__card { padding: 44px 24px 52px; }
    .html-innvestio .us-logos { gap: 40px; }
}

@media (max-width: 768px) {
    /* A 590/1920 band is 110px tall on a phone, which is not a hero. Let the
       content set the height and let the photo crop. */
    .us-hero {
        aspect-ratio: auto;
        min-height: 440px;
        padding-block: 56px;
    }
    /* The scrim goes vertical with the layout - a horizontal fade has nothing
       left to fade across at 360px. */
    .us-hero::before {
        background: linear-gradient(180deg,
                    rgba(19, 38, 81, .88) 0%,
                    rgba(19, 38, 81, .70) 100%);
    }
    .html-innvestio .us-hero__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .html-innvestio .us-btn { width: 100%; }

    .us-intro { padding-block: 64px; }
    .html-innvestio .us-lead { font-size: 18px; }
    .us-why { padding-bottom: 64px; }
    .us-why__card { padding: 36px 20px 44px; }
    .us-features {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        margin-top: 36px;
    }

    .us-how { padding-bottom: 64px; }
    /* The alternation is meaningless in one column - it would only move the
       photo above the caption on every other step. Photo first, every time. */
    .us-steps { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .us-step { grid-template-columns: minmax(0, 1fr); }
    .us-step .us-step__media,
    .us-step:nth-child(even) .us-step__media { order: 1; }
    .us-step .us-step__text,
    .us-step:nth-child(even) .us-step__text  { order: 2; }
    .us-step__icon { height: 96px; margin-bottom: 20px; }
    .html-innvestio .us-step__title { font-size: 20px; }

    .us-video { padding-block: 64px; }
    .us-video__play::before { width: 60px; height: 60px; }
    .us-video__play::after { border-width: 11px 0 11px 19px; }

    .us-cta { padding-block: 64px; }
    /* Two lock-ups of very different proportions do not share a 360px row. */
    .html-innvestio .us-logos { flex-direction: column; gap: 32px; }
    .us-logos .iv-logo { width: 196px; height: 47px; }

    .us-form { padding-bottom: 64px; }
    .us-form__card { padding: 32px 16px 40px; }
    .us-form__slot { padding: 20px 14px; }
}