/* ==========================================================================
   BRAND TOKENS — colours and type for this site
   ==========================================================================
   Native CSS custom properties, so every other stylesheet can use them with
   no @import. They are resolved by the browser at runtime, which means load
   order does not matter — any stylesheet may reference these even if it is
   served before this one.

   Requirement: this stylesheet must be present in the layout, since it is
   the only place these are defined.
   ========================================================================== */
:root {
  /* Standard colours — rarely changed */
  --black: #000;
  --white: #fff;

  /* Brand colours — change these per site */
  --text: var(--black);
  --prime: #0A417C;   /* Penpot: brand → color.blue.700 */
  --second: #AD1E22;  /* Penpot: accent → color.red.600 */

  /* Page background. Wired to #container in website_structure.css, so
     changing it here changes the page. White by default; a soft grey such
     as #F1F1F1 is the usual alternative. */
  --background: var(--white);

  /* Borders and rules. A COLOUR, not a shorthand, so each component picks
     its own width and style — 1px solid for form fields, 2px for a table
     header, and so on. Do not put "1px solid" in here: the usage sites
     already supply it, and doing so invalidates every border that reads it. */
  --stroke: #DFE4EA;  /* Penpot: border → color.neutral.200 */

  /* OPTIONAL — uncomment if the brand has a third colour.
     Nothing reads it by default, so it costs nothing to leave commented.
     --third: #000A46; */

  /* Derived shades. These were SCSS lighten() calls, which cannot operate on
     custom properties — so the exact resulting values are named here instead.
     (color-mix() could re-derive them at runtime if you ever want that.) */
  --grey-dark: #404040;    /* was lighten($black, 25%) */
  --grey-light: #ededed;   /* was lighten($black, 93)  */
  --prime-light: #235E97;  /* Penpot: color.blue.600 (was lighten($prime, 20%)) */

  /* Dark brand surfaces — bands and callout cards. */
  --ink:  #04203F;   /* Penpot: color.blue.950 — deep navy (bands, callout cards) */
  --navy: #083C6F;   /* Penpot: color.blue.800 — closing CTA band */

  /* Heading colour (deep navy) vs body text (slate grey) — from the design. */
  --heading: #072F5A;   /* Penpot: text.primary / color.blue.900 */
  --body:    #4A545F;   /* Penpot: color.neutral.600 */
  --red-700: #93191D;   /* Penpot: color.red.700 — deep accent (pull quotes, phone tree) */
  --red-800: #7C181B;   /* Penpot: color.red.800 — the eyebrow label */
  --text-on-dark-dim: #C4CCD6;   /* body copy and eyebrows on the dark bands */
  --text-muted: #636E7B;   /* a shade darker than the board's #6B7683: 4.5:1 on cream (WCAG AA, 8 Oct) */
  --text-muted-board: #6B7683;         /* Penpot: color.neutral.500 — captions, dates, stat labels */

  /* The type scale the boards use more than once (px at the 2400 board). */
  --fs-hero-h1: clamp(2.4rem, 5.2vw, 4.6875rem);   /* 75 — every hero headline */
  --fs-h2: clamp(1.9rem, 3.2vw, 2.8rem);           /* 45 — section headings */

  /* Off-white section band (hero + soft light sections). */
  --cream: #FBFAF9;

  /* Hairlines — the thin brand rules that frame the hero and feature rows. */
  --hairline:         var(--prime);    /* the boards draw every rule 1px solid #0A417C */
  --hairline-on-dark: var(--stroke);   /* …and #DFE4EA on the dark bands */

  /* Muted grey — placeholder text, and the quiet captions on a dark card.
     The designs use this one value for every "not yet filled in" string. */
  --placeholder: #9AA5B3;   /* Penpot: color.neutral.400 */

  /* Role tokens — what framework3's shared components (cards, notch, def-list,
     legal, the style guide) read. Mapped onto this palette; nothing here
     changes an existing rule. */
  --accent: var(--second);
  --text-body: var(--body);
  --text-muted: #636E7B;   /* WCAG AA on cream, see above */              /* Penpot: color.neutral.500 — dates, captions */
  --text-on-dark: var(--white);
  --text-on-dark-dim: #C4CCD6;        /* Penpot: body copy on the dark bands */
  --prime-deep: var(--ink);
  --surface-soft: var(--cream);
  --grad-cta: var(--navy);

  /* The fixed header's height — what sticky things (the guide's sub menu, the
     legal pages' aside) sit under. The nav runs two lines above the 900px
     switch to the mobile menu, hence 104. */
  --header-h: 56px;

  /* Soft decorative blobs behind the hero (radial gradient stops). */
  --blob-cyan: #A6DDEA;   /* Penpot: color.blue.300 */
  --blob-pink: #ECB9B9;   /* Penpot: hero pink wash */

  /* Display heading gradient */
  --heading-gradient-from: #04203F;  /* Penpot: color.blue.950 */
  --heading-gradient-to: #0A417C;    /* Penpot: brand → color.blue.700 */

  /* Hero band gradient — the dark brand wash behind hero copy. Change per site.
     Penpot "Gradiant Blue" stops (#04203F deep navy → #0A417C brand).
     DIRECTION: deepest in the TOP-RIGHT corner, lightest in the BOTTOM-LEFT —
     a deliberate departure from the boards' top-to-bottom, so it reads the
     same on every surface using this token (Contact card, .hero--text). */
  --grad-hero: linear-gradient(to bottom left, var(--heading-gradient-from) 0%, var(--prime) 100%);

  /* Type — change these per site (Penpot: font.body Rubik, font.display Literata) */
  --type-body: Rubik, sans-serif;
  --type-display: Literata, serif;
}
@media (min-width: 1120px) { :root { --header-h: 104px; } }   /* the full bar; below it the menu (header.css) */

body {
    font-size: clamp(1rem, 1.2vw, 1.1875rem);   /* up to 19px, per the design */
    font-family: var(--type-body);
    color: var(--body);
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.55;
    min-height: 100vh;
    width: 100%;
    /* No overflow-x here: website_structure.css already clips on html, and
       `hidden` on body forces the other axis to `auto`, which makes body a
       scroll container and breaks position: sticky inside it. */
}

/* Headings — deep navy, Literata (display), 700. Solid colour, not a gradient
   text-clip. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--type-display);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.14;
    /* Even out the line lengths so a headline never leaves one orphaned word
       on the last line. Progressive enhancement — a browser without it just
       wraps normally, and the cap on balanced lines makes it a no-op on long
       text, so it only ever affects the short strings headings actually are. */
    text-wrap: balance;
}

/* A heading is already 700, so `<strong>` inside one has to go FURTHER to read
   as emphasis — the boards set the emphasised sentence to 800 against the
   heading's 700 (Penpot reports those two shapes' weight as "mixed", every
   other heading as a flat 700). Two headings use this: For Financial Advisors'
   "It isn't, because we do it for you." and Switching's "Almost none. That's
   the point." Needs Literata 800, which fe_page.html.twig now requests. */
:is(h1, h2, h3, h4, h5, h6) strong,
:is(h1, h2, h3, h4, h5, h6) b { font-weight: 800; }

h1 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.06;
    margin-bottom: 0.5em;
}
h1.small { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

h2 {
    margin-bottom: 0.6em;
    font-size: var(--fs-h2);
}
.small h2 { font-size: clamp(1.25rem, 1.6vw, 1.65rem); }

h3 {
    margin: 0 0 0.55em;
    font-weight: 500;   /* the boards' 27px card/feature heading (66 uses on 11 pages) */
    font-size: clamp(1.35rem, 2vw, 1.7rem);    /* Penpot H3 27px */
}

h4 {
    margin: 0 0 0.55em;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);   /* Penpot LG 22px */
}

h5 { margin: 0 0 0.5em; font-size: 1.125rem; }
h6 { margin: 0 0 0.5em; font-size: 1rem; }

a {
    border-bottom: 1px solid var(--prime);
    text-decoration: none;
    color: var(--prime);
    transition: all 0.2s ease;
    &:hover {
        border-bottom: 1px solid var(--second);
        color: var(--second);
    }
}

h1 a,
h3 a,
h2 a,
h1 a:hover,
h3 a:hover,
h2 a:hover {
    border-bottom: 0;
}

hr {
    margin-top: var(--space-60);
    margin-bottom: var(--space-60);
    border: 0;
    position: relative;
    border-top: 1px solid var(--prime);
}

p { margin: 0 0 1.5em; }

/* LISTS
   Here rather than in a component file because the list content element and
   a list typed into the rich text editor emit the SAME markup — plain
   <ul>/<li> and <dl>/<dt>/<dd>, with only the wrapper div differing. Two
   files styling one <li> would race at similar specificity, and the two
   would drift apart visually; one owner means they cannot.

   Not website_standard.css either: that file exists for Contao's quirks,
   and indent, spacing and markers are brand decisions.

   Left on UA defaults these run at a 40px indent, which is far wider than
   the type scale wants. padding-inline-start rather than padding-left so a
   right-to-left site mirrors correctly. */
ul,
ol {
    margin: 0 0 1em;
    padding-inline-start: 1.25em;
}

li {
    margin-bottom: 0.5em;

    /* The list's own bottom margin already provides the gap after the last item;
       without this the two stack up. */
    &:last-child { margin-bottom: 0; }

    /* A nested list belongs to its parent item, so it gets the item's spacing
       above it and none below. */
    > ul, > ol { margin-block: 0.5em 0; }
}

dl { margin: 0 0 1em; }

dt {
    font-weight: 600;
}

/* Browsers indent <dd> by 40px and give it nothing else, which reads as a
   stray indent rather than a definition. Reset and spaced instead. */
dd {
    margin: 0 0 0.75em;
    &:last-child { margin-bottom: 0; }
}

/* TUNING
   Markers are deliberately left at the text colour. Colouring them
   (`ul > li::marker { color: var(--prime); }`) suits some brands, but it
   costs legibility on ordered lists where the number carries meaning. */

/* BUTTONS
   The three rules below (base, hover, small screens) must list the SAME
   selectors. They had drifted: .layout_latest p.more a had a hover but no
   base styling, plain `button` had base styling but only [type=submit]
   got a hover, and the download link appeared in two lists out of three.
   .ce_download is dropped — Contao 5 emits .content-download.

   These name INTENTS, not the button element. A bare `button` selector was
   here and it matched the tag, which means "interactive control" rather than
   "brand call to action" — so it caught every button any third-party
   component renders. Counted across this build it styled ONE button it
   should (the contact form submit) and eleven it should not: four cookie bar,
   three accordion headers, four Colorbox controls. Overriding it was the
   normal case, not the exception, and three stylesheets were each undoing it.
   It is also why a <button> used for correct semantics in a header or footer
   had to be un-styled by hand.

   [type="submit"] separates them cleanly because an attribute selector only
   matches an attribute that is PRESENT: submit is the spec default for
   <button>, but third-party controls either set type="button" or omit it, so
   they are not matched. Contao also puts class="submit" on form submits.

   Consequence worth knowing: a hand-written <button> no longer gets the brand
   styling for free. Add .btn to it.

   The cookie bar is deliberately NOT in this list: that bundle is
   token-driven, so cookiebar.css brands it by setting its own --ccb-*
   properties instead of imposing the site button on its layout. */
.btn a,
a.btn,
button[type="submit"],
input[type="submit"],
.submit,
.content-download .download-element a,
.layout_latest p.more a {
    display: inline-block;
    margin-bottom: 1.5em;
    padding: 13px 28px;
    text-align: center;
    background-color: var(--second);
    border-radius: 30px;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    border: 0;
    line-height: 1.2;
    margin-right: 1em;
    font-size: 0.9375rem;   /* Penpot button 15px */
}

.btn a:hover,
a.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.submit:hover,
.content-download .download-element a:hover,
.layout_latest p.more a:hover {
    background-color: var(--prime);
}

/* BUTTON VARIANTS
   Modifiers layered onto .btn — add the class on the SAME element, e.g.
   <a class="btn alt">, <a class="btn outline">, <a class="btn alt outline">.
   The base .btn is solid --second (hover --prime); these only change colour:
     .alt          solid, colours swapped — --prime (hover --second)
     .outline      transparent with a --prime edge, fills --prime on hover
     .alt.outline  transparent with a --second edge, fills --second on hover
   Borders inset (box-sizing: border-box is global), so an outline button keeps
   the same footprint as a solid one. */

/* .alt — inverse solid: --prime, hover --second */
.btn.alt a,
a.btn.alt,
button[type="submit"].alt,
input[type="submit"].alt,
.submit.alt {
    background-color: var(--prime);
}
.btn.alt a:hover,
a.btn.alt:hover,
button[type="submit"].alt:hover,
input[type="submit"].alt:hover,
.submit.alt:hover {
    background-color: var(--second);
}

/* .outline — transparent with a --prime edge; fills --prime on hover */
.btn.outline a,
a.btn.outline,
button[type="submit"].outline,
input[type="submit"].outline,
.submit.outline {
    background-color: transparent;
    border: 2px solid var(--prime);
    color: var(--prime);
}
.btn.outline a:hover,
a.btn.outline:hover,
button[type="submit"].outline:hover,
input[type="submit"].outline:hover,
.submit.outline:hover {
    background-color: var(--prime);
    color: var(--white);
}

/* .alt.outline — transparent with a --second edge; fills --second on hover.
   Inherits the transparent background and border width from .outline; the
   three-class selector outranks .alt (solid) and .outline so its colours win. */
.btn.alt.outline a,
a.btn.alt.outline,
button[type="submit"].alt.outline,
input[type="submit"].alt.outline,
.submit.alt.outline {
    background-color: transparent;
    border-color: var(--second);
    color: var(--second);
}
.btn.alt.outline a:hover,
a.btn.alt.outline:hover,
button[type="submit"].alt.outline:hover,
input[type="submit"].alt.outline:hover,
.submit.alt.outline:hover {
    background-color: var(--second);
    color: var(--white);
}

/* .light — white pill, prime text: the button treatment for dark bands
   (media-split, callouts). The closing CTA band paints its own; this is the
   reusable class for any dark surface. */
a.btn.light,
.btn.light a,
button[type="submit"].light,
input[type="submit"].light,
.submit.light {
    background-color: var(--white);
    color: var(--prime);
}
a.btn.light:hover,
.btn.light a:hover,
button[type="submit"].light:hover,
input[type="submit"].light:hover,
.submit.light:hover {
    background-color: var(--second);
    color: var(--white);
}

.small,
.small p {
    font-size: clamp(0.75em, 1.35vw, 1.125em);
}

.small p {
    margin-bottom: 0.875em;
}

.small a, a.small {
    display: inline-block;
}

.small li {
    margin-bottom:0;
}

a.download-element:after {
    display: inline-block;
    padding: 0 0 0 .25em;
    border: 0;
    font-family: "Font Awesome 5 Pro";
    text-transform: none;
    content: "\f019";
    font-weight: 900;
}

a.download-element {
    margin-right: .25em;
    margin-left: .25em;
    padding: 0;
    font-weight: bold;
}

.download-element .size {
    display: none;
}


/* EYEBROW
   The small tracked, uppercase label above a section heading. Its own element,
   class="eyebrow". Accent colour on light; add .on-dark for white-on-dark bands.
   (No leading em-dash — the Cornerstone design sets the label plain.) */
.eyebrow {
    display: block;
    margin: 0 0 0.6em;
    font-family: var(--type-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;   /* the boards: 12px, 1.4px tracking */
    text-transform: uppercase;
    color: var(--red-800);
    text-wrap: balance;
}
.eyebrow.on-dark { color: var(--text-on-dark-dim); }


/* FONT AWESOME (SVG + JS kit)
   The kit swaps <i> for an <svg class="svg-inline--fa">. Its own CSS that caps
   the icon to 1em does not always inject before paint, which leaves icons at
   their intrinsic viewBox size (hundreds of px). Cap them here so inline icons
   always track the surrounding font-size. */
.svg-inline--fa,
.row > * .svg-inline--fa {          /* beat framework_v3 .row > * svg containment */
    display: inline-block;
    height: 1em;
    width: auto;
    max-width: none;
    overflow: visible;
    vertical-align: -0.125em;
}


blockquote {
    padding: 0;
    margin: 0;
    
    p { margin-bottom: 0; }
    
    em {
        font-weight: 600;
        color: var(--prime);
    }
    
    em:after { content: " "; }
}

/* ==========================================================================
   BACKGROUND BANDS
   ==========================================================================
   Replaces .full_width, which conflated two separate jobs: breaking out of
   the page container AND painting a grey background. Those are now split,
   because either is useful without the other:

     .bleed-x    break out of the container   (framework — layout)
     .bg-*       paint a background           (here — brand)

   A full-width grey band is both together:  <div class="bleed-x bg-light">

   .full_width also used two 9999em pseudo-elements to fake the breakout,
   which needed `overflow: visible !important` on the element to work. The
   gap engine's .bleed-x does it with margins and needs no override.
   ========================================================================== */

.bg-light { background-color: var(--grey-light); }
.bg-cream { background-color: var(--cream); }
.bg-white { background-color: var(--white); }
.bg-dark { background-color: var(--grey-dark); color: var(--white); }
.bg-prime { background-color: var(--prime);      color: var(--white); }
.bg-ink { background-color: var(--ink);        color: var(--white); }
.bg-navy { background-color: var(--navy);       color: var(--white); }

/* A band needs breathing room, or the text sits on the colour's edge. */
.bg-light,
.bg-cream,
.bg-white,
.bg-dark,
.bg-prime,
.bg-ink,
.bg-navy {
    padding-block: var(--space-40);
    padding-inline: var(--page-gutter);
}

/* A .band already spans the viewport AND re-caps its own children. When a band
   also paints a bg-* colour, drop the band's own inline padding so it doesn't
   fight `.band > *` (which supplies the child gutter) and shift content. */
.band.bg-light,
.band.bg-cream,
.band.bg-white,
.band.bg-dark,
.band.bg-prime,
.band.bg-ink,
.band.bg-navy { padding-inline: 0; }

/* Section vertical rhythm — ONE value for every band on the site, the boards'
   96px (--space-section). A band that differs is a component with its own
   padding (hero, logo strip), never a per-page class. Placed after the bg-*
   block, which pads non-band boxes, so it wins the (0,1,0) tie on order. */
.band { padding-block: var(--space-section); }
/* Theme Toolbox: compact section spacing (Home's logo strip) */
.section-space-50 { margin-block: clamp(20px, 4vw, 50px); }

/* Copy on a dark band is the boards' muted #C4CCD6; headings stay white (below). */
:is(.bg-dark, .bg-prime, .bg-ink, .bg-navy) :is(p, li) { color: var(--text-on-dark-dim); }
:is(.bg-dark, .bg-prime, .bg-ink, .bg-navy) .eyebrow { color: var(--text-on-dark-dim); }

/* On dark bands the headings must not stay --prime (unreadable on navy):
   h1-h4 carry an explicit dark colour, so re-assert white here. The h1 text
   gradient (background-clip) is also cleared so it doesn't vanish. */
.bg-dark  :is(h1, h2, h3, h4),
.bg-prime :is(h1, h2, h3, h4),
.bg-ink   :is(h1, h2, h3, h4),
.bg-navy  :is(h1, h2, h3, h4) {
    color: var(--white);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.full_img_background {
    position: relative;
    padding-bottom: 180px;
    margin-bottom: -120px;
    margin-inline: calc(-1 * var(--page-gutter));
    .content-image { position: absolute; }
}

.all_corners img {
    border-radius: 20px;
}

/* Narrow screens trim the button's HORIZONTAL padding only: space is tight,
   but a touch target must not get smaller than a mouse one. Vertical padding
   and 15px type hold, and `min-height` guards the 44px WCAG 2.5.5 / Apple HIG
   minimum if a variant ever changes the padding. `inline-flex` (not
   `inline-block`) is what lets `min-height` centre the label. */
@media only screen and (max-width: 1050px) {
    .btn a,
    a.btn,
    button[type="submit"],
    input[type="submit"],
    .submit,
    .content-download .download-element a,
    .layout_latest p.more a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 13px 22px;
        font-size: 0.9375rem;      /* hold the design's 15px */
    }
}