/* ========================================================================== Design tokens — from the Figma variable set (CFG) ========================================================================== */ :root { --blue-1: #091a4c; --blue-2: #1e3062; --blue-3: #515c7c; --blue-4: #a4abbf; --blue-7: #f9fcff; --black-1: #272727; --black-3: #7f8082; --black-5: #d4d7db; --black-6: #f0f2f4; --black-7: #fafafa; --accent-1: #002fa7; --accent-2: #1950df; --footer-navy: #001e55; --font-sans: "Switzer", "Helvetica Neue", Arial, sans-serif; --font-inter: "Inter", "Helvetica Neue", Arial, sans-serif; --color-text: var(--black-1); --color-text-muted: var(--black-3); --color-bg: #ffffff; --container-max: 1440px; --gutter: 80px; --rail: 325px; } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: var(--font-sans); font-size: 16px; line-height: 1.625; -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Layout ------------------------------------------------------------------ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* Full-bleed wrapper that still respects the page's max width */ .container--flush { max-width: var(--container-max); margin-inline: auto; } /* Left rail (eyebrow) + content column */ .rail-grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; } /* Common section header: heading + optional side text */ .section-head { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 130px; } .section-head__side p { color: var(--color-text-muted); line-height: 30px; max-width: 250px; } .section-head__side .textlink { margin-top: 24px; display: inline-block; } .section-head__main { grid-column: 1 / -1; } .section-head__sub { color: var(--color-text-muted); line-height: 26px; max-width: 410px; margin-top: 16px; } /* ========================================================================== Typography ========================================================================== */ .h2 { font-size: 53px; line-height: 60px; font-weight: 400; color: var(--blue-1); max-width: 530px; } .h2--soft { color: var(--blue-2); } .h2--wide { max-width: 1035px; } .eyebrow { font-size: 14px; line-height: 43.2px; font-weight: 400; color: var(--blue-4); white-space: nowrap; } .eyebrow--onblue { font-weight: 300; } /* ========================================================================== Entrance reveals ========================================================================== */ /* hidden state only applies with JS available (.js on ) */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--reveal-delay, 0) * 1ms); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal].is-inview { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Components ========================================================================== */ /* Pill buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 16px 15px 15px; border-radius: 110px; font-family: var(--font-inter); font-size: 14px; line-height: 1; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease; } .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #cdcdcd; } .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); } .btn--outline { border: 1px solid rgba(255, 255, 255, 0.1); color: #cdcdcd; } .btn--outline:hover { border-color: rgba(255, 255, 255, 0.3); } .btn--light { background: #ffffff; color: var(--blue-1); } .btn--light:hover { background: var(--blue-7); } /* Underlined text link */ .textlink { font-size: 16px; line-height: 30px; color: var(--color-text-muted); text-decoration: underline; text-underline-position: from-font; } .textlink:hover { color: var(--blue-1); } /* Circular arrow icon */ .arrow-circle { display: inline-block; width: 30px; height: 30px; flex: none; } .arrow-circle img { width: 100%; height: 100%; } .arrow-circle--prev { transform: rotate(180deg); } .arrow-circle--muted { opacity: 0.3; } /* Hairline + link (+ arrow) row */ .arrowlink { display: flex; align-items: center; gap: 22px; } .arrowlink__rule { width: 197px; height: 1px; background: var(--black-5); flex: none; } /* Navy feature card (Services / Perspectives) */ .card { position: relative; background: var(--blue-1); border-radius: 8px; width: 413px; max-width: 100%; height: 450px; padding: 67px 48px 52px; flex: none; } .card__head { border-left: 1px solid var(--blue-2); padding-left: 65px; min-height: 128px; } .card__title { font-size: 20px; line-height: 26px; font-weight: 400; color: var(--blue-7); padding-top: 8px; } .card__title a::after { content: ""; position: absolute; inset: 0; } .card__desc { font-size: 14px; line-height: 20px; color: var(--black-3); margin-top: 30px; max-width: 190px; } .card > .arrow-circle { position: absolute; left: 114px; bottom: 52px; } .card-row { display: flex; gap: 21px; } /* Large CTA titles (newsletter / footer) */ .cta-title { display: flex; flex-direction: column; gap: 10px; font-size: 36px; line-height: 1.1; font-weight: 400; color: #ffffff; } .cta-title__dim { opacity: 0.4; } /* ========================================================================== Site header (over hero) ========================================================================== */ .site-header { position: absolute; top: 47px; left: 0; right: 0; z-index: 20; } .site-header__inner { max-width: var(--container-max); margin-inline: auto; padding: 32px var(--gutter); display: flex; align-items: center; } .site-header__logo { width: 330px; flex: none; } .site-header__logo img { width: 116px; height: 30px; } .site-header__nav { flex: 1; min-width: 0; } .site-header__nav ul { display: flex; gap: 30px; } .site-header__nav a { font-size: 16px; color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); white-space: nowrap; } .site-header__actions { display: flex; gap: 20px; justify-content: flex-end; flex: none; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; display: flex; flex-direction: column; height: min(100vh, 900px); /* matches the shader's near-black ground so pre-JS paint doesn't flash */ background: #01040f; overflow: hidden; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--accent-2); z-index: 30; } .hero__media { position: absolute; inset: 0; } .hero__canvas { width: 100%; height: 100%; display: block; } .hero__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-1) 0%, rgba(9, 26, 76, 0) 100%), linear-gradient(180deg, var(--blue-1) 0%, rgba(9, 26, 76, 0) 100%); z-index: 1; pointer-events: none; } /* Fallback when WebGL is unavailable: the photo treatment from the fig */ .hero--no-webgl { background: var(--blue-1); } .hero--no-webgl .hero__canvas { display: none; } .hero--no-webgl .hero__media::before { display: none; } .hero--no-webgl .hero__media { background: url("/assets/img/hero-bg.jpg") center / cover no-repeat; } .hero--no-webgl .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-1) 0%, rgba(9, 26, 76, 0) 55%), linear-gradient(180deg, rgba(9, 26, 76, 0) 0%, var(--blue-1) 62%); } .hero__content { position: relative; z-index: 10; width: 100%; margin-top: auto; padding-bottom: 110px; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-areas: ". eyebrow" "aside heading"; } .hero__eyebrow { grid-area: eyebrow; margin-bottom: 14px; } /* stretches over the heading's row: intro top-aligns with the title, the button bottom-aligns with its last line */ .hero__aside { grid-area: aside; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; max-width: 262px; } .hero__intro { font-weight: 300; font-size: 16px; line-height: 22px; color: var(--blue-7); } .hero__heading { grid-area: heading; font-size: 55px; line-height: 55px; font-weight: 400; color: var(--black-7); max-width: 850px; } /* ========================================================================== Coming soon (standalone page, /coming-soon/) Reuses the hero background treatment; layout from the fig at 1440x1024. ========================================================================== */ .hero--cs { height: 100vh; height: 100svh; min-height: 640px; } .cs__content { position: relative; z-index: 10; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 100px; padding-bottom: 100px; } /* two columns: heading left, aside right — right column starts at 947/1440 */ .cs__row { display: grid; grid-template-columns: minmax(0, 1fr) 413px; column-gap: 60px; } .cs__top { align-items: center; } .cs__subtitle { font-size: 18px; line-height: 22px; color: var(--blue-7); } .cs__rule { width: 95px; height: 1px; background: var(--accent-2); } .cs__main { margin-top: auto; margin-bottom: min(190px, 18vh); align-items: end; } .cs__heading { font-size: 48px; line-height: 50px; font-weight: 400; color: var(--black-7); max-width: 600px; } .cs__intro { font-weight: 300; font-size: 16px; line-height: 22px; color: var(--blue-7); } .cs__bottom { align-items: center; } .cs__logo img { width: 116px; height: 30px; } .cs__actions { display: flex; gap: 30px; } /* ========================================================================== Inner-page hero + shared inner-page patterns ========================================================================== */ .hero--page { height: 522px; } .hero__content--page { padding-bottom: 86px; } .hero__rule { width: 1px; height: 103px; margin-left: 13px; background: rgba(255, 255, 255, 0.25); } .hero--page .hero__heading { font-size: 55px; line-height: 55px; max-width: 850px; margin-top: 14px; } /* full-bleed photo strip directly under the inner hero */ .page-band { height: 256px; } .page-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } /* section subnav */ .subnav { border-bottom: 1px solid var(--black-5); } .subnav__row { align-items: center; padding-top: 30px; padding-bottom: 26px; } .subnav__link { font-size: 16px; line-height: 26px; color: var(--black-3); white-space: nowrap; } .subnav__link:hover { color: var(--blue-1); } .subnav__link--active { position: relative; color: var(--black-3); } .subnav__link--active::after { content: ""; position: absolute; left: 0; bottom: -27px; width: 83px; height: 1px; background: var(--blue-1); } .subnav__rest { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .subnav__links { display: flex; gap: 48px; } /* narrower h2 used on inner pages */ .h2--sm { font-size: 48px; line-height: 55px; } .section-head--wide { grid-template-columns: minmax(0, 1fr) 413px; } .section-head__side--wide { max-width: 413px; } .section-head__side--wide p { max-width: none; } .section-head__side--wide p + p { margin-top: 26px; } /* ========================================================================== About: story ========================================================================== */ .story { padding-top: 110px; } .story .h2 { max-width: 420px; } .story__image { height: 400px; margin-top: 83px; } .story__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px 8px 8px 0; } /* ========================================================================== About: convictions (accordion variant) ========================================================================== */ .convictions { padding-top: 150px; } .convictions .h2 { max-width: 522px; } .convictions__row { margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr) 413px; column-gap: 130px; align-items: start; } .convictions__sub { font-weight: 300; font-size: 33px; line-height: 42px; color: var(--black-3); max-width: 410px; } .convictions__intro { color: var(--black-3); line-height: 26px; } .convictions .steps { margin-top: 90px; border-bottom: 1px solid var(--black-5); padding-bottom: 100px; } .steps--wide .steps__number { width: 107px; } .steps--wide .steps__body { margin-left: 107px; max-width: 415px; } /* ========================================================================== About: who we serve ========================================================================== */ .serve { padding-top: 150px; } .serve .h2 { max-width: 955px; } .serve__groups { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } .serve__group { border-left: 1px solid var(--blue-2); padding-left: 44px; min-height: 128px; } .serve__title { font-size: 20px; line-height: 26px; font-weight: 400; color: var(--blue-1); padding-top: 8px; } .serve__desc { font-size: 14px; line-height: 20px; color: var(--black-3); margin-top: 30px; max-width: 190px; } .serve__image { height: 400px; margin-top: 90px; } .serve__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px 8px 8px 0; } /* ========================================================================== About: process timeline ========================================================================== */ .ptimeline { padding-top: 150px; } .ptimeline .h2 { max-width: 955px; } .timeline { margin-top: 170px; border-bottom: 1px solid var(--black-5); padding-bottom: 45px; } .timeline__step { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); column-gap: 47px; } .timeline__media { grid-column: 1; grid-row: 1; margin-top: 82px; height: 198px; } .timeline__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .timeline__content { grid-column: 3; grid-row: 1; margin-top: 82px; padding-top: 2px; } .timeline__title { font-size: 20px; line-height: 26px; font-weight: 400; color: var(--blue-1); } .timeline__desc { font-size: 14px; line-height: 20px; color: var(--black-3); margin-top: 18px; max-width: 220px; } .timeline__step--flip .timeline__media { grid-column: 3; } .timeline__step--flip .timeline__content { grid-column: 1; text-align: right; } .timeline__step--flip .timeline__desc { margin-left: auto; } .timeline__spine { grid-column: 2; grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: center; } .timeline__spine::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: #104eba; opacity: 0.2; } .timeline__step:first-child .timeline__spine::before { background: linear-gradient(180deg, #fff 0%, #104eba 82px); } .timeline__dot { position: relative; z-index: 1; margin-top: 74px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-1); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; } /* ========================================================================== Company ========================================================================== */ .company { padding-top: 100px; } .company__showcase { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; margin-top: 104px; display: grid; grid-template-columns: 405px minmax(0, 1fr); align-items: end; padding-right: var(--gutter); } .company__feature { background: var(--black-6); height: 495px; display: flex; flex-direction: column; padding: 78px 130px 50px var(--gutter); } .company__feature-slides { position: relative; flex: 1; min-width: 0; } .company__feature-slide { position: absolute; inset: 0; visibility: hidden; transition: visibility 0s linear 0.6s; } .company__feature-slide.is-active { visibility: visible; transition: visibility 0s; } /* text: subtle per-line stagger — gentle fade out, slow eased slide-in from the right */ .company__feature-slide .line, .company__feature-slide .company__feature-desc { opacity: 0; transform: translateX(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .company__feature-slide.is-active .line, .company__feature-slide.is-active .company__feature-desc { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s ease; } .company__feature-slide.is-active .line:nth-child(1) { transition-delay: 0.45s; } .company__feature-slide.is-active .line:nth-child(2) { transition-delay: 0.65s; } .company__feature-slide.is-active .company__feature-desc { transition-delay: 0.9s; } .company__feature-title { font-size: 20px; line-height: 26px; font-weight: 400; color: var(--blue-1); } .company__feature-title .line { display: block; } .company__feature-desc { font-size: 14px; line-height: 20px; color: var(--black-3); margin-top: 38px; } .company__feature-nav { display: flex; gap: 13px; margin-top: auto; } .slider-arrow { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity 0.25s ease; } .slider-arrow img { width: 100%; height: 100%; display: block; } .slider-arrow--prev { transform: rotate(180deg); } .slider-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .company__image { position: relative; height: 636px; overflow: hidden; border-radius: 8px 8px 8px 0; /* navy ground so the crossfade never dips to white */ background: var(--blue-1); } .company__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 2.2s ease, transform 4s cubic-bezier(0.22, 0.61, 0.36, 1); } .company__image img.is-active { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .company__feature-slide, .company__feature-slide .line, .company__feature-slide .company__feature-desc, .company__image img { transition: none; } } /* ========================================================================== Services ========================================================================== */ /* the grey band tucks under the company showcase above it, as in the fig */ .services { background: var(--black-7); margin-top: -22rem; padding-top: 30rem; } .services .card-row { margin-top: 100px; position: relative; z-index: 5; } /* ========================================================================== How we work ========================================================================== */ /* white bg pulls up over the services band so the cards straddle the seam */ .process { position: relative; z-index: 0; margin-top: -287px; padding-top: 442px; background: #fff; overflow: hidden; } /* watermark flower, behind the content but above the white ground */ .process::before { content: ""; position: absolute; z-index: -1; top: 169px; right: -195px; width: 1117px; height: 1160px; background: url("/assets/img/deco-testimonials.svg") center / contain no-repeat; transform: scaleY(-1); pointer-events: none; } .process__body .h2 { max-width: 956px; } .process__columns { margin-top: 113px; display: grid; grid-template-columns: minmax(0, 737fr) minmax(0, 410fr); column-gap: 130px; align-items: stretch; } /* the image fills the block — its bottom lands level with the last step */ .process__image { min-height: 467px; } .process__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .process__intro { color: var(--color-text-muted); line-height: 26px; } .steps { margin-top: 120px; } .steps__item { padding: 12px 0; } .steps__heading { font-size: inherit; font-weight: inherit; } .steps__row { display: flex; align-items: center; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .steps__number { font-size: 20px; line-height: 26px; color: var(--blue-4); width: 45px; flex: none; } .steps__title { font-size: 20px; line-height: 26px; font-weight: 400; color: var(--blue-1); flex: 1; } .steps__chevron { flex: none; display: flex; } .steps__chevron img { transform: rotate(-90deg); transition: transform 0.4s ease; } .steps__item--open .steps__chevron img { transform: rotate(90deg); } .steps__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease; } .steps__panel-inner { overflow: hidden; min-height: 0; } .steps__item--open .steps__panel { grid-template-rows: 1fr; } .steps__body { font-size: 14px; line-height: 20px; color: var(--black-3); margin: 14px 0 26px 45px; opacity: 0; transition: opacity 0.4s ease; } .steps__item--open .steps__body { opacity: 1; transition: opacity 0.5s ease 0.15s; } .steps__body strong { font-weight: 400; color: var(--black-1); } @media (prefers-reduced-motion: reduce) { .steps__panel, .steps__body, .steps__chevron img { transition: none; } } /* ========================================================================== Pull quote ========================================================================== */ /* static fallback (no JS / reduced motion): normal flow, fully navy */ .pull-quote { padding-top: 157px; padding-bottom: 40px; } .pull-quote__text { font-weight: 300; font-size: 43px; line-height: 50px; color: var(--blue-1); max-width: 1061px; margin-left: 107px; } .pull-quote .arrowlink { margin-top: 77px; margin-left: 108px; } /* pinned scrub mode (added by JS): tall section, sticky centered viewport */ .pull-quote--pin { height: 250vh; padding: 0; } .pull-quote--pin .pull-quote__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .pull-quote--pin .pull-quote__text { color: var(--black-3); } .pull-quote__text .word { display: inline-block; white-space: nowrap; } .pull-quote__text .char { transition: color 0.25s ease; } .pull-quote__text .char.is-lit { color: var(--blue-1); } /* ========================================================================== Investment options ========================================================================== */ .options { position: relative; margin-top: 70px; } .options__sticky { position: sticky; top: 0; height: 100vh; } .options__grid { height: 100%; max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 710fr) minmax(0, 730fr); } .options__left, .options__right { position: relative; overflow: hidden; } /* stacked layers inside each half: panel <-> image, crossfaded */ .options__layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0s linear 0.8s; } .options__layer.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s ease, visibility 0s; } .options__panel--light { background: var(--black-6); } .options__panel--dark { background: var(--blue-1); } .options__panel-inner { height: 100%; display: flex; flex-direction: column; padding: 48px 108px 110px var(--gutter); } .options__panel--dark .options__panel-inner { padding: 48px var(--gutter) 110px 128px; } .options__panel--light .h2 { margin-top: auto; max-width: 524px; } .options__media { background: var(--blue-1); } .options__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.2s ease, transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .options__media img.is-active { opacity: 1; transform: scale(1); } .options__counter [data-invest-counter] { display: inline-block; } .options__counter .tick { animation: counter-tick 0.45s ease; } @keyframes counter-tick { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* slide stack: all slides share one grid cell, active one staggers in */ .options__slides { margin-top: auto; display: grid; } .options__slide { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 0.6s; } .options__slide.is-active { visibility: visible; transition: visibility 0s; } .options__slide > * { opacity: 0; transform: translateX(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .options__slide.is-active > * { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s ease; } .options__slide.is-active > *:nth-child(1) { transition-delay: 0.4s; } .options__slide.is-active > *:nth-child(2) { transition-delay: 0.55s; } .options__slide.is-active > *:nth-child(3) { transition-delay: 0.7s; } .options__title { font-size: 33px; line-height: 44px; font-weight: 400; color: var(--blue-7); } .options__desc { color: var(--black-3); line-height: 26px; max-width: 305px; margin-top: 16px; } .options__slide .textlink { display: inline-block; margin-top: 44px; } @media (prefers-reduced-motion: reduce) { .options__layer, .options__media img, .options__slide, .options__slide > * { transition: none; } } /* ========================================================================== Sustainability ========================================================================== */ .sustainability { padding-top: 160px; } .sustainability__rail { display: flex; flex-direction: column; align-items: flex-start; } .sustainability__rail .textlink { margin-top: 250px; } .sustainability__cols { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 60px; max-width: 810px; } .sustainability__cols p { color: var(--color-text-muted); line-height: 30px; } .sustainability__image { height: 428px; margin-top: 90px; position: relative; z-index: 5; } .sustainability__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } /* ========================================================================== Testimonials ========================================================================== */ .testimonials { background: var(--black-7); margin-top: -72px; padding-top: 222px; padding-bottom: 128px; } .testimonials__rail { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; height: 100%; } .testimonials__arrows { display: flex; gap: 13px; margin-top: 208px; } /* stacked quotes, crossfading with a gentle drift */ .testimonials__quotes { display: grid; } .testimonials__quote { grid-area: 1 / 1; font-size: 33px; line-height: 45px; color: var(--blue-1); max-width: 846px; visibility: hidden; transition: visibility 0s linear 0.95s; } .testimonials__quote.is-active { visibility: visible; transition: visibility 0s; } /* line-by-line: out cascades down, in rises up — --line set by JS per rendered line */ .testimonials__quote .qword { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--line, 0) * 0.09s); } .testimonials__quote.is-active .qword { opacity: 1; transform: none; transition: opacity 0.85s ease, transform 0.85s ease; transition-delay: calc(0.4s + var(--line, 0) * 0.18s); } .testimonials__meta { display: flex; align-items: center; gap: 32px; margin-top: 93px; } .testimonials__avatars { display: flex; gap: 13px; } .testimonials__thumb { width: 39px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; } .testimonials__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.5; transition: opacity 0.4s ease; } .testimonials__thumb:hover img { opacity: 0.75; } .testimonials__thumb.is-active img { opacity: 1; } /* stacked attributions, name then role staggering in */ .testimonials__attributions { display: grid; } .testimonials__attribution { grid-area: 1 / 1; font-size: 16px; line-height: 22px; visibility: hidden; transition: visibility 0s linear 0.6s; } .testimonials__attribution.is-active { visibility: visible; transition: visibility 0s; } .testimonials__attribution > span { display: block; opacity: 0; transform: translateX(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .testimonials__attribution.is-active > span { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s ease; } .testimonials__attribution.is-active > span:nth-child(1) { transition-delay: 0.65s; } .testimonials__attribution.is-active > span:nth-child(2) { transition-delay: 0.8s; } .testimonials__name { color: var(--black-1); } .testimonials__company { color: var(--black-3); } @media (prefers-reduced-motion: reduce) { .testimonials__quote, .testimonials__quote .qword, .testimonials__attribution, .testimonials__attribution > span, .testimonials__thumb img { transition: none; } } /* ========================================================================== Perspectives ========================================================================== */ .perspectives { padding-top: 95px; } .perspectives .h2 { max-width: 666px; } .perspectives__carousel { margin-top: 123px; overflow: hidden; } .perspectives__track { flex-wrap: nowrap; } .perspectives__arrows { display: flex; gap: 13px; margin-top: 96px; } .perspectives .arrowlink { margin-top: 100px; } .perspectives { padding-bottom: 115px; } /* ========================================================================== Newsletter CTA ========================================================================== */ .newsletter { max-width: calc(var(--container-max) - 80px); margin: 0 40px; background: var(--accent-1); border-radius: 10px; padding: 60px 40px; display: flex; gap: 100px; } @media (min-width: 1520px) { .newsletter { margin-inline: auto; } } .newsletter__label { font-weight: 300; font-size: 14px; color: #ffffff; flex: none; width: 200px; } .newsletter__body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .newsletter__field { background: #ffffff; border: 0; border-radius: 30px; padding: 16px 136px 14px 25px; font-family: var(--font-sans); font-size: 14px; color: var(--footer-navy); } .newsletter__field::placeholder { color: var(--footer-navy); opacity: 0.6; } /* ========================================================================== Footer ========================================================================== */ .site-footer { max-width: calc(var(--container-max) - 80px); margin: 16px 40px 40px; background: var(--footer-navy); border-radius: 10px; padding: 60px 40px; display: flex; flex-direction: column; gap: 60px; color: #ffffff; } @media (min-width: 1520px) { .site-footer { margin-inline: auto; } } .site-footer__cta { display: flex; gap: 100px; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .site-footer__cta-label { font-weight: 300; font-size: 14px; flex: none; width: 200px; } .site-footer__cta-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .site-footer__cta-actions { display: flex; gap: 25px; } .site-footer__links { display: flex; gap: 100px; } .site-footer__brand { flex: none; width: 200px; } .site-footer__brand-1 { font-size: 15px; font-weight: 500; line-height: 25.6px; } .site-footer__brand-2 { font-size: 13px; font-weight: 500; line-height: 25.6px; } .site-footer__cols { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 40px; } .site-footer__col h3 { font-size: 16px; font-weight: 400; margin-bottom: 28px; } .site-footer__col ul { display: flex; flex-direction: column; gap: 24px; } .site-footer__col a { font-weight: 300; font-size: 14px; } .site-footer__col a:hover { text-decoration: underline; } .site-footer__contact p { font-weight: 300; font-size: 14px; line-height: 20px; } .site-footer__phone { margin-top: 28px; } .site-footer__disclaimer { font-family: var(--font-inter); font-weight: 300; font-size: 12px; line-height: 20.4px; opacity: 0.4; } .site-footer__disclaimer p + p { margin-top: 20.4px; } .site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-footer__copyright { font-weight: 300; font-size: 12px; opacity: 0.6; } .site-footer__legal-links { display: flex; gap: 20px; } .site-footer__legal-links a { font-weight: 300; font-size: 12px; opacity: 0.6; } .site-footer__legal-links a:hover { opacity: 1; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1180px) { :root { --gutter: 40px; --rail: 240px; } .h2 { font-size: 42px; line-height: 50px; } .hero__heading { font-size: 44px; line-height: 48px; } .site-header__logo { width: 200px; } .site-header__nav ul { gap: 20px; } .company__showcase { grid-template-columns: 300px minmax(0, 1fr); } .company__feature { padding: 60px 40px 40px var(--gutter); } .options__panel--dark .options__panel-inner { padding-left: 60px; } .card-row { flex-wrap: wrap; } .process { margin-top: 0; padding-top: 155px; } } @media (max-width: 900px) { .rail-grid { grid-template-columns: minmax(0, 1fr); } .rail-grid > .eyebrow { margin-bottom: 8px; } .site-header { top: 5px; } .site-header__inner { flex-wrap: wrap; gap: 16px; padding-block: 20px; } .site-header__nav { order: 3; flex-basis: 100%; } .site-header__nav ul { flex-wrap: wrap; } .site-header__logo { width: auto; margin-right: auto; } .hero { height: auto; } .hero__content { padding-top: 220px; padding-bottom: 80px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "heading" "aside"; } .hero__aside { margin-top: 40px; gap: 32px; justify-content: flex-start; } .section-head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .company__showcase { grid-template-columns: minmax(0, 1fr); padding-right: 0; margin-top: 60px; } .company__feature { height: auto; } .company__feature-slides { min-height: 220px; } .company__feature-nav { margin-top: 40px; } .company__image { height: 420px; border-radius: 0; } .services { margin-top: 0; padding-top: 80px; } .process__columns { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin-top: 60px; } .steps { margin-top: 48px; } .process__deco { display: none; } .pull-quote { padding-top: 100px; } .pull-quote__text { font-size: 30px; line-height: 38px; margin-left: 0; } .pull-quote .arrowlink { margin-left: 0; margin-top: 48px; } .options__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 45% 55%; } .options__panel-inner, .options__panel--dark .options__panel-inner { padding: 32px var(--gutter) 48px; } .options__title { font-size: 26px; line-height: 34px; } .sustainability { padding-top: 80px; } .sustainability__rail .textlink { margin-top: 0; margin-bottom: 24px; } .sustainability__cols { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .sustainability__image { height: 320px; margin-top: 48px; } .testimonials { margin-top: 0; padding-top: 80px; padding-bottom: 80px; } .testimonials__arrows { margin-top: 24px; margin-bottom: 32px; } .testimonials__quote { font-size: 26px; line-height: 36px; } .testimonials__meta { margin-top: 48px; flex-wrap: wrap; } .perspectives { padding-top: 80px; padding-bottom: 80px; } .perspectives__carousel { margin-top: 48px; overflow-x: auto; } .perspectives__track { flex-wrap: nowrap; } .perspectives__arrows { margin-top: 48px; } .perspectives .arrowlink { margin-top: 32px; } .hero--cs { height: auto; min-height: 100vh; min-height: 100svh; } .cs__content { padding-top: 48px; padding-bottom: 48px; } .cs__row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .cs__rule { display: none; } .cs__main { margin-top: 64px; margin-bottom: auto; } .cs__bottom { row-gap: 40px; margin-top: 64px; } .cs__actions { flex-wrap: wrap; gap: 16px; } .hero--page { height: auto; min-height: 420px; } .hero__content--page { padding-top: 200px; padding-bottom: 60px; } .hero__rule { display: none; } .page-band { height: 180px; } .subnav__row { row-gap: 8px; } .subnav__link--active::after { display: none; } .subnav__rest { flex-wrap: wrap; } .subnav__links { gap: 24px; flex-wrap: wrap; } .h2--sm { font-size: 32px; line-height: 40px; } .section-head--wide { grid-template-columns: minmax(0, 1fr); } .story { padding-top: 70px; } .story__image { height: 260px; margin-top: 48px; } .convictions, .serve, .ptimeline { padding-top: 90px; } .convictions__row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 32px; } .convictions .steps { margin-top: 48px; padding-bottom: 48px; } .steps--wide .steps__number { width: 45px; } .steps--wide .steps__body { margin-left: 45px; } .serve__groups { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 32px; } .serve__group { min-height: 0; padding-left: 24px; } .serve__image { height: 260px; margin-top: 48px; } .timeline { margin-top: 60px; } .timeline__step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; } .timeline__media, .timeline__step--flip .timeline__media { grid-column: 2; grid-row: 1; margin-top: 24px; height: 180px; } .timeline__content, .timeline__step--flip .timeline__content { grid-column: 2; grid-row: 2; margin-top: 16px; text-align: left; } .timeline__spine { grid-column: 1; grid-row: 1 / span 2; } .timeline__step--flip .timeline__desc { margin-left: 0; } .timeline__dot { margin-top: 24px; } .newsletter { flex-direction: column; gap: 32px; margin-inline: 16px; padding: 40px 24px; } .newsletter__body { flex-direction: column; align-items: flex-start; gap: 24px; } .newsletter__field { width: 100%; padding-right: 25px; } .site-footer { margin: 16px 16px 16px; padding: 40px 24px; } .site-footer__cta { flex-direction: column; gap: 24px; } .site-footer__cta-body { flex-direction: column; align-items: flex-start; gap: 24px; } .site-footer__links { flex-direction: column; gap: 40px; } .site-footer__cols { flex-wrap: wrap; } .site-footer__col { flex-basis: 40%; } .site-footer__legal { flex-direction: column; align-items: flex-start; } .site-footer__legal-links { flex-wrap: wrap; } } @media (max-width: 560px) { .h2 { font-size: 32px; line-height: 40px; } .hero__heading { font-size: 34px; line-height: 38px; } .cs__heading { font-size: 34px; line-height: 38px; } .card { height: auto; min-height: 400px; padding: 48px 32px 40px; } .card__head { padding-left: 32px; } .card > .arrow-circle { left: 65px; bottom: 40px; } .cta-title { font-size: 28px; } }