/* ==========================================================================
   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;  /* footer radial glow centre                  */
    --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;
    --radius-card:     8px;      /* D57 - measured ~7-8px on all three panels */
    --container:       1300px;   /* 310 -> 1610 at 1920                       */

    --nav-gap:         62px;     /* measured identically in both headers      */
    --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:      1440px;  /* contents at --nav-size 18 (D84)              */
    --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;
}

/* --------------------------------------------------------------------------
   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);
    padding-inline: 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. */
    padding: var(--header-overlay-top)
             clamp(var(--card-inset),
                   calc((100vw - var(--header-bar-fit)) / 2),
                   var(--header-overlay-inset)) 0;
}

/* 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);
    padding-inline: 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) */
.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;
    height: 2px;
    border-radius: 2px;
    background: var(--c-navy);
    transition: background .35s var(--ease);
}

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

/* --------------------------------------------------------------------------
   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 47px;                           /* heading 1537 -> label 1584 */
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--c-white);
}

.iv-drawer__contact { margin-top: 122px; }      /* copy 1415 -> heading 1537 */

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

.iv-drawer__label {
    display: block;
    margin-bottom: 26px;                        /* label 1584 -> value 1610 */
    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); }

.iv-drawer__social-heading { margin-top: 114px; }
.iv-drawer__socials { display: flex; gap: 10px; margin-top: 59px; }

/* --------------------------------------------------------------------------
   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.
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    margin: 19px var(--card-inset) 0;           /* card top y 19 */
    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 0;                     /* eyebrow ink top y 298 */
    height: 100%;
}

.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);
    /* No max-width: the Topic copy carries its own <br>s for the three designed
       lines, and 16em was narrower than the longest of them at every width, so
       it wrapped them a second time. .hero__inner's --container is the bound. */
}

.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%;
    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='M7 17L17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 17px;
}

/* "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);
}

.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;
}

.hero__scroll span {
    writing-mode: vertical-rl;
    letter-spacing: .02em;
}

.hero__scroll::after {
    content: "";
    width: 28px; height: 28px;                 /* measured ~28px circle */
    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 / 14px;
}

/* --------------------------------------------------------------------------
   Footer (brief s15 / s22)
   Inset rounded card, dark navy with a glow toward the right-centre.
   -------------------------------------------------------------------------- */

.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: var(--c-navy-footer)
        radial-gradient(60% 80% at 78% 50%, var(--c-navy-glow) 0%, rgba(18, 36, 80, 0) 70%);
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

/* D60 - the giant mark in the bottom-right is the logo, not bespoke line-art.
   Layer 2 (the chevron lattice along the bottom edge) needs a real export and
   is tracked as B7; the footer is correct without it. */
.site-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px; bottom: -120px;
    width: 620px; height: 620px;
    background-color: #1F4478;
    -webkit-mask: url("../images/logo-mark.png") no-repeat center / contain;
            mask: url("../images/logo-mark.png") no-repeat center / contain;
    opacity: .5;
    pointer-events: none;
}

.site-footer__top {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;                       /* nav row 7355 -> headings 7435 */
    color: var(--c-white);
}

.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); }
.fc-value a { color: inherit; text-decoration: none; }
.fc-value a:hover { color: var(--c-accent); }

/* The social icon aligns to the VALUE column, not the label - 32px below the
   last text line. */
.fc-col .iv-social { margin: 32px 0 0 26px; }

.fc-badges { display: flex; align-items: center; gap: 18px; margin-top: 38px; }

/* 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 */

/* --------------------------------------------------------------------------
   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);
}

.html-innvestio .sec__lede {
    margin: 18px auto 0;
    max-width: 900px;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    color: var(--c-copy);
}

/* The two navy bands (s4, s6). Base fill plus a glow off the top-right, which
   is what the export shows - dark at the left edge, lighter towards the top
   right. Brief s4b records the pair as #142353 -> #183F6F. */
.sec--presence,
.sec--form {
    background: #142353 radial-gradient(90% 130% at 74% 0%,
                rgba(24, 63, 111, .95) 0%, rgba(20, 35, 83, 0) 72%);
    color: var(--c-white);
}

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

.sec--presence .sec__lede,
.sec--form .sec__lede { color: rgba(255, 255, 255, .72); }

/* --- 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. */
.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);
}

.html-innvestio .sv-card__body {
    margin: 0 65px 70px;
    font-size: 20px;
    line-height: 25px;
    text-align: left;
    color: var(--c-copy);
}

.html-innvestio .sv-card__link {
    align-self: flex-start;
    margin: 0 65px 54px;
    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;
    margin-top: auto;                            /* both cards bottom-align */
}

/* --- 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. */
.pf-strip {
    margin-top: 54px;
    padding: 24px 30px;
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius-card);
}

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

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

.pf-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 66px;
}

.pf-strip__item img {
    width: auto;
    max-width: 100%;
    max-height: 54px;
    object-fit: contain;
}

.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;                            /* cards 314-736 | 752-1170 | 1188-1606 */
}

.pf-card {
    display: flex;
    gap: 22px;
    padding: 22px;
    background: #F5F7F8;
    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);
}

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

.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. */
.html-innvestio .pr-group {
    margin: 50px 0 28px;
    text-align: center;
    font-size: 16px;
    line-height: 25px;
    font-weight: 600;
    letter-spacing: .08em;
    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. */
.pr-card {
    position: relative;
    overflow: hidden;
    padding: 30px 28px 26px;
    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 26px;
    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 20px;
    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); }

.html-innvestio .pr-card__body {
    margin: 0 0 26px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: var(--c-copy);
}

.pr-card__link {
    font-size: 13px;
    color: var(--c-accent);
    text-decoration: none;
}

.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. */
.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;
}

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

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

.kn-card__media {
    display: block;
    margin-bottom: 18px;
    aspect-ratio: 276 / 196;
    overflow: hidden;
    border-radius: 4px;
    background: var(--c-page);                  /* holds the box if a post has no picture */
}

.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;
}

.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='M7 17L17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 13px;
    transition: background-color .2s var(--ease);
}

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

.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. */
.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: 34px; height: 34px;
    margin-bottom: 10px;
    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: 8px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--c-navy);
}

.ab-card__title {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--c-navy);
}

.html-innvestio .ab-card__body {
    flex: 1;
    margin: 0 0 14px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--c-body);
}

.ab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}

.ab-chip {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    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 radial-gradient(90% 130% at 74% 0%,
                rgba(24, 63, 111, .95) 0%, rgba(20, 35, 83, 0) 72%);
    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); }

/* 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 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 48px;
}

/* 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);
}

/* .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 .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; }

.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;
}

.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='M7 17L17 7M9 7h8v8' 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. */
.nw-actions { display: flex; justify-content: center; margin-top: 84px; }

.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 overlay gutter is no longer stepped here - .site-header--overlay
       centres the pill at its designed width instead. */
    :root { --nav-gap: 34px; }
    .site-header__bar { padding-inline: 28px; }
    .site-header--overlay.is-stuck .site-header__bar { padding-inline: 28px; }
    .hero__card { right: 40px; width: 400px; }
}

/* 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) {
    :root { --nav-gap: 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-grid { gap: 30px; }
}

/* 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 { 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)); }

    /* .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-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; }

    /* The drawer's vertical rhythm is measured off a 900px-tall panel at 1920
       (122px above Contact Info, 56px between fields, 114px 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; }
    .iv-drawer__heading { margin-bottom: 24px; font-size: 16px; }
    .iv-drawer__field + .iv-drawer__field { margin-top: 24px; }
    .iv-drawer__label { margin-bottom: 10px; }
    .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; }

    .hero { height: clamp(460px, 120vw, 640px); }
    .hero__inner { padding-top: 140px; }
    .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; }

    .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; }

    .sec__title { font-size: 26px; }
    .sec__lede { font-size: 15px; }

    .sv-card__title { margin: 32px 24px 18px; font-size: 20px; }
    .sv-card__body { margin: 0 24px 24px; }
    .sv-card__link { margin: 0 24px 32px; }

    .pf-strip { padding: 18px; }
    .pf-card { flex-direction: column; gap: 16px; }
    .pf-card__media { width: 100%; height: 180px; }

    .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-tabs { gap: 18px; }

    /* 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-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.
   -------------------------------------------------------------------------- */

.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. */
.us-how { padding-bottom: 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). */
.us-form { padding-bottom: 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; }
}