@layer page {
.brand-body { margin: 0; color: #0d1635; background: #fff; font-family: "Manrope", sans-serif; }
.brand-page { --brand-navy: #07113b; --brand-blue: #254fe4; --brand-cyan: #75e7f3; --brand-edge: clamp(1.25rem, 5vw, 5rem); color: #0d1635; }
.brand-page *, .brand-page *::before, .brand-page *::after { box-sizing: border-box; }
:where(.brand-page) :where(h1, h2, h3, p, figure) { margin: 0; }
.brand-page h1, .brand-page h2 { font-family: "Unbounded", "Manrope", sans-serif; font-weight: 650; }
.brand-page h3 { font-weight: 750; }
.brand-page p { line-height: 1.65; }
.brand-page a { color: inherit; text-decoration: none; }
.brand-page button, .brand-page input { font: inherit; }
.brand-page a, .brand-page button, .brand-page summary { -webkit-tap-highlight-color: transparent; }
.brand-page :focus-visible { outline: 3px solid #254fe4; outline-offset: 5px; }
.brand-hero :focus-visible, .brand-kit:focus-visible { outline-color: #75e7f3; }
.brand-page [hidden] { display: none; }
.brand-skip { position: fixed; z-index: 200; left: 1rem; top: -6rem; padding: 1rem; background: #fff; color: #07113b; }
.brand-skip:focus { top: 1rem; }
.brand-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 4vw, 5rem); padding: 4.5rem var(--brand-edge) 4rem; color: #fff; background: var(--brand-navy); }
.brand-eyebrow { font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-blue); }
.brand-hero .brand-eyebrow { display: flex; flex-wrap: wrap; gap: .6rem 2rem; color: var(--brand-cyan); }
.brand-hero .brand-eyebrow span { color: #c1cce8; }
.brand-hero h1 { margin-block: 2.1rem 1.7rem; font-size: clamp(2.2rem, 3.95vw, 4.25rem); line-height: 1.2; letter-spacing: -.035em; }
.brand-hero h1 em { color: var(--brand-cyan); font-style: normal; }
.brand-lead { max-width: 34rem; color: #d5ddef; font-size: 1.03rem; text-wrap: pretty; }
.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.brand-button { display: inline-flex; gap: 1.5rem; align-items: center; justify-content: space-between; min-height: 3.1rem; padding: .85rem 1.25rem; border: 1px solid transparent; border-radius: .5rem; background: var(--brand-blue); color: #fff; font-size: .88rem; font-weight: 750; line-height: 1.35; transition: background-color 180ms ease; }
.brand-page .brand-button { color: #fff; }
.brand-button:hover { background: #173bb8; }
.brand-page .brand-button--cyan { color: var(--brand-navy); background: var(--brand-cyan); }
.brand-button--cyan:hover { background: #a1f0f8; }
.brand-page .brand-button--outline { border-color: #a9b4ce; color: var(--brand-navy); background: transparent; }
.brand-button--outline:hover { background: #e5eafa; }
.brand-text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 1rem; font-size: .88rem; font-weight: 700; }
.brand-text-link:hover { text-decoration: underline; text-underline-offset: .3em; }
.brand-hero__meta { margin-top: 1rem; color: #b6c4e0; font-size: .72rem; }
.brand-cover { position: relative; display: flex; min-height: 31rem; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid #506290; border-radius: 1rem; background: #10216e; padding: 1.75rem; }
.brand-cover__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .62rem; font-weight: 750; letter-spacing: .1em; }
.brand-cover__portal { position: absolute; inset: 15% 10% auto; height: 46%; }
.brand-cover__portal i { position: absolute; width: 100%; height: 100%; border: clamp(1.4rem, 3.5vw, 3.5rem) solid var(--brand-blue); border-bottom: 0; }
.brand-cover__portal i + i { width: 67%; height: 83%; inset: 27% auto auto 16.5%; border-color: var(--brand-cyan); border-width: clamp(1.2rem, 2.2vw, 2.5rem); }
.brand-cover__logo { position: relative; z-index: 1; display: block; width: 100%; height: auto; margin-top: auto; margin-bottom: 1.1rem; background: #10216e; }
.brand-cover figcaption { z-index: 1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #687dab; padding-top: 1rem; font-size: .78rem; line-height: 1.5; }
.brand-cover figcaption > span:last-child { color: var(--brand-cyan); font-size: 2rem; }
.brand-nav { display: flex; flex-wrap: wrap; gap: .1rem 1.9rem; border-bottom: 1px solid #d9e0ea; padding: .85rem var(--brand-edge); background: #fff; }
.brand-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; font-weight: 750; }
.brand-nav a:hover { color: var(--brand-blue); }
.brand-section { padding: 5.5rem var(--brand-edge); scroll-margin-top: 5.5rem; }
.brand-section--soft { background: #f3f5fa; }
.brand-section__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.25rem 4rem; align-items: end; margin-bottom: 2.8rem; }
.brand-section__head > .brand-eyebrow { grid-column: 1 / -1; }
.brand-section__head h2 { font-size: clamp(1.7rem, 2.65vw, 2.75rem); line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.brand-section__head > p:last-child { max-width: 33rem; font-size: .96rem; color: #526078; text-wrap: pretty; }
.brand-directions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem; }
.brand-direction { display: flex; flex-direction: column; align-items: flex-start; border-top: 3px solid var(--brand-blue); padding-top: 1.2rem; }
.brand-direction__number { font-size: .7rem; font-weight: 750; color: #526078; }
.brand-direction > strong { margin-block: 1.4rem .9rem; font-family: "Unbounded", sans-serif; font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 650; color: var(--brand-blue); }
.brand-direction h3 { display: flex; align-items: start; min-height: 3.1rem; font-size: 1rem; line-height: 1.5; }
.brand-direction p { margin-top: .6rem; margin-bottom: 1.2rem; font-size: .88rem; color: #526078; }
.brand-direction__link { display: flex; justify-content: space-between; gap: 1rem; width: 100%; margin-top: auto; min-height: 44px; align-items: center; border-top: 1px solid #d9e0ea; font-size: .74rem; font-weight: 750; }
.brand-direction:hover .brand-direction__link { color: var(--brand-blue); }
.brand-caption { margin-top: 2rem; font-size: .79rem; color: #526078; }
.brand-logo-studio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
.brand-logo-stage { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; min-height: 24rem; border: 1px solid #d9e0ea; border-radius: 1rem; padding: 1.5rem; background: #fff; transition: background-color 180ms ease; }
.brand-logo-stage--dark { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.brand-logo-stage__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; width: 100%; font-size: .63rem; font-weight: 750; letter-spacing: .04em; }
.brand-logo-stage img { display: block; width: 90%; height: 9rem; object-fit: contain; }
.brand-logo-stage img[data-brand-logo^="symbol-"] { width: 9rem; }
.brand-logo-stage__note { font-size: .74rem; line-height: 1.6; text-align: center; }
.brand-logo-options { align-self: center; }
.brand-logo-options fieldset { min-width: 0; margin: 0 0 1.3rem; padding: 0; border: 0; }
.brand-logo-options legend { margin-bottom: .65rem; font-size: .85rem; font-weight: 750; }
.brand-segments { display: flex; flex-wrap: wrap; gap: .4rem; }
.brand-segments label { position: relative; cursor: pointer; }
.brand-segments input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brand-segments span { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid #a9b4ce; border-radius: .45rem; padding: .6rem .9rem; color: #34425d; font-size: .79rem; font-weight: 700; }
.brand-segments input:checked + span { border-color: var(--brand-navy); background: var(--brand-navy); color: #fff; }
.brand-segments input:focus-visible + span { outline: 3px solid var(--brand-blue); outline-offset: 3px; }
.brand-logo-downloads { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.brand-logo-options > p { margin-block: 1rem .5rem; font-size: .77rem; color: #526078; }
.brand-page .brand-inline-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--brand-blue); font-size: .8rem; font-weight: 750; text-decoration: underline; text-underline-offset: .25em; }
.brand-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.brand-rules article { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .7rem; align-content: start; }
.brand-rules article > span { padding-top: .15rem; color: var(--brand-blue); font-size: .7rem; font-weight: 750; }
.brand-rules h3 { font-size: .98rem; line-height: 1.4; }
.brand-rules p { grid-column: 2; color: #526078; font-size: .83rem; }
.brand-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.25rem; }
.brand-swatch { --swatch-bg: #07113b; --swatch-fg: #fff; }
.brand-swatch--blue { --swatch-bg: #254fe4; }
.brand-swatch--cyan { --swatch-bg: #75e7f3; --swatch-fg: #07113b; }
.brand-swatch--surface { --swatch-bg: #f3f5fa; --swatch-fg: #07113b; }
.brand-swatch--ink { --swatch-bg: #0d1635; }
.brand-swatch--white { --swatch-bg: #fff; --swatch-fg: #07113b; }
.brand-swatch__sample { display: flex; min-height: 13rem; flex-direction: column; align-items: flex-start; border: 1px solid #d9e0ea; border-radius: .75rem; padding: 1.35rem; color: var(--swatch-fg); background: var(--swatch-bg); }
.brand-swatch__sample > span { font-size: .83rem; font-weight: 700; }
.brand-swatch__sample > strong { margin-top: 1.4rem; font-size: 1.85rem; line-height: 1.2; font-weight: 650; }
.brand-swatch__sample > small { margin-top: .6rem; font-size: .65rem; line-height: 1.4; }
.brand-swatch__sample > button { display: flex; align-items: center; gap: 1.1rem; min-height: 44px; margin-top: auto; border: 0; border-radius: .25rem; padding: .4rem 0; font-size: .71rem; font-weight: 750; background: transparent; color: inherit; cursor: pointer; }
.brand-swatch__sample > button:focus-visible { outline-color: currentColor; outline-offset: 4px; }
.brand-swatch__sample > button:hover { text-decoration: underline; }
.brand-swatch > p { margin-top: .8rem; font-size: .81rem; color: #526078; }
.brand-color-note { display: flex; gap: 2rem; align-items: start; margin-top: 2.3rem; border-left: 3px solid var(--brand-blue); padding-left: 1.2rem; }
.brand-color-note > strong { flex: 0 0 15rem; font-size: .9rem; }
.brand-color-note p { max-width: 49rem; font-size: .84rem; color: #526078; }
.brand-type-section { background: var(--brand-navy); color: #fff; }
.brand-type-section .brand-eyebrow { color: var(--brand-cyan); }
.brand-type-section .brand-section__head > p:last-child { color: #c5d1ea; }
.brand-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-bottom: 2rem; }
.brand-type { display: flex; flex-direction: column; border-top: 1px solid #506290; padding-top: 1.1rem; }
.brand-type__label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.brand-type__label h3 { font-size: 1.2rem; }
.brand-type__label span { font-size: .7rem; color: #c5d1ea; }
.brand-type .brand-type__sample { display: flex; flex-direction: column; justify-content: center; min-height: 16rem; font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.brand-type--display .brand-type__sample { font-family: "Unbounded", sans-serif; font-weight: 650; }
.brand-type__sample em { font-style: normal; color: var(--brand-cyan); }
.brand-type > p:last-child { max-width: 29rem; color: #c5d1ea; font-size: .88rem; }
.brand-template-gallery { display: grid; grid-template-columns: 1fr .66fr 1.45fr; align-items: start; gap: 1.5rem; }
.brand-template img { display: block; width: 100%; height: auto; border-radius: .55rem; }
.brand-template figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; font-size: .79rem; }
.brand-template figcaption span { color: #526078; font-size: .72rem; }
.brand-template--slide { padding-top: 3rem; }
.brand-template-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.4rem; }
.brand-template-bottom > p { max-width: 43rem; font-size: .88rem; color: #526078; }
.brand-template-bottom > a { flex-shrink: 0; }
.brand-photo-note { display: grid; grid-template-columns: 1fr 1.35fr; gap: 2rem; border-top: 1px solid #d9e0ea; margin-top: 3rem; padding-top: 1.7rem; }
.brand-photo-note strong { font-size: 1.05rem; line-height: 1.5; }
.brand-photo-note p { font-size: .86rem; color: #526078; }
.brand-voice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.brand-voice-list article > span { color: var(--brand-blue); font-size: .75rem; font-weight: 750; }
.brand-voice-list h3 { margin-block: 1.15rem .8rem; font-size: clamp(1.02rem, 1.4vw, 1.35rem); line-height: 1.5; }
.brand-voice-list p { font-size: .87rem; color: #526078; }
.brand-details { margin-top: 3rem; border-block: 1px solid #c8d2e4; }
.brand-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; padding-block: 1rem; font-size: .95rem; font-weight: 750; cursor: pointer; list-style: none; }
.brand-details summary::-webkit-details-marker { display: none; }
.brand-details summary > span { font-size: 1.6rem; font-weight: 450; }
.brand-details[open] summary > span { transform: rotate(45deg); }
.brand-details > div { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-bottom: 1.5rem; font-size: .88rem; color: #526078; }
.brand-download-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 3rem; }
.brand-kit { display: flex; flex-direction: column; min-height: 27rem; align-self: start; border-radius: 1rem; background: var(--brand-navy); padding: 2.2rem; }
.brand-page .brand-kit { color: #fff; }
.brand-kit > .brand-eyebrow { color: var(--brand-cyan); }
.brand-kit > img { width: 100%; height: auto; margin-block: 2rem 1rem; }
.brand-kit > p { color: #c5d1ea; font-size: .9rem; margin-bottom: 2rem; }
.brand-kit__download { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; margin-top: auto; border-top: 1px solid #506290; padding-top: 1rem; font-weight: 750; }
.brand-kit:hover .brand-kit__download { color: var(--brand-cyan); }
.brand-kit > small { color: #c5d1ea; margin-top: .7rem; font-size: .75rem; }
.brand-file { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid #d9e0ea; }
.brand-file:first-child { padding-top: .1rem; }
.brand-file h3 { font-size: 1.05rem; line-height: 1.45; }
.brand-file p { margin-top: .35rem; font-size: .83rem; color: #526078; }
.brand-file small { display: block; margin-top: .5rem; color: #526078; font-size: .72rem; }
.brand-file__arrow { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border: 1px solid #c8d2e4; border-radius: 50%; color: var(--brand-blue); font-size: 1.4rem; }
.brand-file:hover .brand-file__arrow { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.brand-usage { max-width: 66rem; margin-top: 2rem; font-size: .76rem; color: #526078; }
.brand-usage a { text-decoration: underline; text-underline-offset: .2em; }
.brand-toast { position: fixed; z-index: 160; inset: auto 1rem 1.25rem auto; max-width: min(28rem, calc(100vw - 2rem)); border-radius: .6rem; background: #07113b; color: #fff; font-size: .9rem; line-height: 1.5; box-shadow: 0 4px 24px #07113b26; }
.brand-toast:not(:empty) { padding: 1rem 1.25rem; }
@media (min-width: 1800px) { .brand-page { --brand-edge: max(5rem, calc((100vw - 1600px) / 2)); } }
@media (max-width: 1100px) {
  .brand-hero { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 2rem; padding-top: 3rem; }
  .brand-hero h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); }
  .brand-cover { min-height: 29rem; padding: 1.2rem; }
  .brand-section__head { gap: 1.1rem 2rem; }
  .brand-directions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 2rem; }
  .brand-direction h3 { min-height: 0; }
  .brand-logo-studio { grid-template-columns: 1.05fr 1fr; gap: 1.5rem; }
  .brand-logo-downloads { flex-direction: column; }
  .brand-type .brand-type__sample { min-height: 14rem; }
}
@media (max-width: 780px) {
  .brand-hero { grid-template-columns: 1fr; }
  .brand-hero h1 { font-size: clamp(2rem, 7.2vw, 3.5rem); }
  .brand-cover { min-height: 23rem; max-width: 40rem; }
  .brand-cover__portal { inset: 13% 23% 27%; }
  .brand-cover__logo { width: min(100%, 23rem); margin-inline: auto; margin-bottom: .8rem; }
  .brand-cover__portal i { border-width: 2.5rem; border-bottom-width: 0; }
  .brand-cover__portal i + i { border-width: 1.6rem; border-bottom-width: 0; }
  .brand-section { padding-block: 3.7rem; }
  .brand-section__head { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2rem; }
  .brand-section__head h2 { font-size: clamp(1.5rem, 4.8vw, 2.4rem); }
  .brand-section__head > p:last-child { max-width: 40rem; font-size: .9rem; }
  .brand-logo-studio { grid-template-columns: 1fr; }
  .brand-logo-stage { min-height: 19rem; }
  .brand-logo-downloads { flex-direction: row; }
  .brand-rules { grid-template-columns: 1fr; gap: 1.5rem; }
  .brand-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .brand-color-note { flex-direction: column; gap: .6rem; }
  .brand-color-note > strong { flex-basis: auto; }
  .brand-type-grid { gap: 2rem; }
  .brand-type .brand-type__sample { min-height: 12rem; font-size: 2rem; }
  .brand-template-gallery { grid-template-columns: 1fr .65fr; gap: 1.5rem; }
  .brand-template--slide { grid-column: 1 / -1; padding-top: 0; }
  .brand-template-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .brand-photo-note { grid-template-columns: 1fr; gap: .8rem; }
  .brand-voice-list { grid-template-columns: 1fr; gap: 1.7rem; }
  .brand-voice-list h3 { margin-top: .65rem; }
  .brand-voice-list h3 br { display: none; }
  .brand-details > div { grid-template-columns: 1fr; gap: 1rem; }
  .brand-download-layout { grid-template-columns: 1fr; gap: 2rem; }
  .brand-kit { min-height: 24rem; }
  .brand-kit > img { max-width: 23rem; }
}
@media (max-width: 480px) {
  .brand-hero { padding-top: 2.2rem; padding-bottom: 2rem; gap: 2.2rem; }
  .brand-hero h1 { margin-top: 1.5rem; font-size: clamp(1.55rem, 6.7vw, 2rem); line-height: 1.3; }
  .brand-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .brand-text-link { justify-content: center; }
  .brand-cover { min-height: 20rem; }
  .brand-cover__portal { inset: 14% 17% 26%; }
  .brand-cover__portal i { border-width: 2rem; border-bottom-width: 0; }
  .brand-cover__portal i + i { border-width: 1.35rem; border-bottom-width: 0; }
  .brand-nav { gap: 0 1.25rem; padding-block: .6rem; }
  .brand-nav a { font-size: .72rem; }
  .brand-section { padding-block: 3rem; }
  .brand-section__head h2 { font-size: 1.45rem; }
  .brand-section__head h2 br { display: none; }
  .brand-directions { grid-template-columns: 1fr; gap: 1.75rem; }
  .brand-direction > strong { margin-block: .8rem .7rem; font-size: 1.5rem; }
  .brand-logo-stage { padding: 1rem; min-height: 17rem; }
  .brand-logo-stage img { width: 100%; height: 7rem; }
  .brand-logo-downloads > a { flex: 1 1 100%; }
  .brand-segments { gap: .35rem; }
  .brand-segments span { padding-inline: .7rem; font-size: .74rem; }
  .brand-palette { gap: 1.6rem .75rem; }
  .brand-swatch__sample { min-height: 11rem; padding: .8rem; }
  .brand-swatch__sample > strong { font-size: 1.2rem; }
  .brand-swatch__sample > span { font-size: .75rem; }
  .brand-swatch__sample > button { gap: .5rem; font-size: .63rem; }
  .brand-swatch > p { font-size: .76rem; }
  .brand-type-grid { grid-template-columns: 1fr; }
  .brand-type .brand-type__sample { min-height: 12rem; font-size: 2.5rem; }
  .brand-template-gallery { gap: 1rem; }
  .brand-template figcaption { display: grid; font-size: .73rem; }
  .brand-template figcaption span { font-size: .62rem; }
  .brand-kit { padding: 1.5rem; }
  .brand-file { gap: .8rem; }
  .brand-file h3 { font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-page *, .brand-page *::before, .brand-page *::after { transition: none; scroll-behavior: auto; }
}
@media print {
  .brand-nav, .brand-toast, .brand-skip, .brand-logo-options [data-brand-controls] { display: none; }
  .brand-section { break-inside: avoid; padding-block: 2rem; }
}
}