/* ========================================================= TriWealth Partners — Website v2 Type from the "Services We Provide" sheet: Libre Franklin (Thin/Regular, Medium, SemiBold, Italic) Official brand colors: #113F67 navy, #5E83A5 steel, #595959 dark gray, #979797 light gray, white. No gold. Fonts are loaded via in each page's (parallel, non-blocking) rather than an @import here (which would load serially after this CSS). ========================================================= */ :root { --navy: #113F67; --navy-deep: #0C2C49; --navy-darker: #081f36; --steel: #5E83A5; --steel-soft: #EAF1F7; --gray-dark: #595959; --gray-light: #979797; --white: #FFFFFF; --off-white: #F7F8FA; --line: rgba(17,63,103,0.13); --line-soft: rgba(17,63,103,0.07); --body: #374455; --font-display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --font-sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --container: 1180px; --nav-h: 96px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --shadow-xs: 0 1px 4px rgba(8,31,54,0.06); --shadow-sm: 0 3px 12px rgba(8,31,54,0.07), 0 1px 3px rgba(8,31,54,0.05); --shadow-md: 0 16px 40px -16px rgba(8,31,54,0.2), 0 4px 12px rgba(8,31,54,0.06); --shadow-lg: 0 40px 80px -24px rgba(8,31,54,0.36), 0 12px 28px -12px rgba(8,31,54,0.18); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* overflow-x: clip, not hidden — Safari treats an overflow:hidden body as a scroll container, which silently kills position:sticky (services rail, bio photo). clip contains the same overflow without that side effect; the hidden declaration stays first as the fallback for Safari < 16. */ body { font-family: var(--font-sans); color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 40px; } .section { padding: clamp(80px, 10vw, 140px) 0; } .section--tight { padding: clamp(56px, 6vw, 96px) 0; } /* ---------- Keyframes ---------- */ @keyframes kenburns { 0% { transform: scale(1.08) translateY(0); } 100% { transform: scale(1.00) translateY(0); } } @keyframes cueDrop { 0% { top: -50%; } 60%, 100% { top: 100%; } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ---------- Eyebrow ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--steel); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; } .eyebrow--light { color: rgba(255,255,255,0.76); } .eyebrow--light::before { background: rgba(255,255,255,0.5); } /* ---------- Type ---------- */ .display { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; } .display em { font-style: italic; font-weight: 500; color: var(--steel); } .h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 5vw, 66px); line-height: 1.06; letter-spacing: -0.018em; color: var(--navy); text-wrap: balance; } .h1 em, .h2 em { font-style: italic; font-weight: 500; color: var(--steel); } .h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -0.015em; color: var(--navy); text-wrap: balance; } .h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; color: var(--navy); } .lede { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.56; color: var(--gray-dark); text-wrap: pretty; } .on-dark .lede { color: rgba(255,255,255,0.82); } .body { font-family: var(--font-sans); font-weight: 400; font-size: 17px; line-height: 1.72; color: var(--body); text-wrap: pretty; } .meta { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--gray-light); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 32px; border-radius: 999px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), transform 320ms var(--ease), box-shadow 320ms var(--ease); white-space: nowrap; } .btn .arr { transition: transform 320ms var(--ease); } .btn:hover .arr { transform: translateX(5px); } .btn--primary { background: var(--navy); color: #fff; } .btn--primary:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); } .btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); transform: translateY(-2px); } .btn--line { background: var(--white); color: var(--navy); border-color: rgba(17,63,103,0.25); } .btn--line:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: var(--steel); transform: scaleX(0); transform-origin: 0 50%; transition: transform 80ms linear; pointer-events: none; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: var(--nav-h); background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 2px 20px -12px rgba(8,31,54,0.14); transition: height 400ms var(--ease), box-shadow 400ms var(--ease); display: flex; align-items: center; } .nav.is-solid { height: 72px; box-shadow: 0 6px 28px -18px rgba(8,31,54,0.4); } .nav__inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } /* ---- Home-page scroll morph: nav starts transparent ("the background"), resolves into a white bar as the hero logo shrinks into place. --t / --r set by JS. ---- */ .has-hero .nav { --t: 0; --r: 0; height: calc(96px - 24px * var(--t)); background: rgba(255,255,255, var(--t)); border-bottom-color: rgba(17,63,103, calc(0.13 * var(--t))); box-shadow: 0 6px 28px -18px rgba(8,31,54, calc(0.4 * var(--t))); transition: none; } .has-hero .brand__logo { height: calc(80px - 20px * var(--t)); transition: none; } /* Nav items are visible from the first frame (over the transparent bar — readable on the bright hero fog); only the bar's white background fades in on scroll. */ .has-hero .nav__links, .has-hero .nav__phone, .has-hero .nav__cta { opacity: 1; transform: none; transition: none; } /* flex:0 0 auto + max-width:none are load-bearing: as a shrinkable flex item the brand absorbs any width deficit in the nav and the fixed-height logo gets compressed out of proportion. Slack must come from the link gap, not the mark. */ .brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; } .brand__logo { height: 80px; width: auto; max-width: none; flex: none; transition: height 400ms var(--ease); } .nav.is-solid .brand__logo { height: 60px; } .nav__links { display: flex; align-items: center; gap: 38px; list-style: none; } .nav__link { font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); text-decoration: none; position: relative; padding: 6px 0; transition: color 240ms; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--ease); } .nav__link:hover { color: var(--steel); } .nav__link:hover::after { transform: scaleX(1); background: var(--steel); } .nav__link.is-active { color: var(--steel); } .nav__link.is-active::after { transform: scaleX(1); background: var(--steel); } .nav__right { display: flex; align-items: center; gap: 20px; } .nav__phone { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--navy); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; transition: color 240ms; } .nav__links { gap: clamp(18px, 2.4vw, 36px); } .nav__phone:hover { color: var(--steel); } .nav__cta { padding: 11px 24px; font-size: 11px; } .nav__toggle { display: none; flex-direction: column; gap: 5px; width: 28px; background: none; border: none; cursor: pointer; padding: 4px 0; } .nav__toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 340ms var(--ease), opacity 340ms; } .nav__toggle span:nth-child(1) { width: 100%; } .nav__toggle span:nth-child(2) { width: 72%; } .nav__toggle span:nth-child(3) { width: 100%; } .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 100%; } .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 140; background: var(--navy-darker); display: flex; flex-direction: column; justify-content: center; padding: 0 40px; opacity: 0; visibility: hidden; transform: translateX(-16px); transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 400ms; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; } .mobile-menu a { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 9vw, 52px); color: #fff; text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); transition: color 240ms, padding-left 300ms var(--ease); } .mobile-menu a:hover { color: var(--steel); padding-left: 12px; } .mobile-menu a:last-child { border: none; } .mobile-menu .mm-contact { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.54); letter-spacing: 0.06em; margin-top: 28px; } /* ---------- Reveal ---------- */ /* will-change is intentionally NOT set here: with dozens of .reveal elements a permanent will-change spawns dozens of compositor layers and is a major scroll cost. The transition alone is plenty smooth for a one-shot entrance. */ .reveal { transition: opacity 900ms var(--ease), transform 900ms var(--ease); } .has-js .reveal { opacity: 0; transform: translateY(28px); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: 80ms; } .reveal[data-d="2"] { transition-delay: 160ms; } .reveal[data-d="3"] { transition-delay: 240ms; } .reveal[data-d="4"] { transition-delay: 320ms; } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 44%, #eef3f8 100%); } .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__photo { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 68%; background: url('../assets/chicago-skyline.jpg') center 32% / cover no-repeat; opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%); animation: kenburns 34s ease-out forwards; will-change: transform; } .hero__vid { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 68%; width: 100%; object-fit: cover; object-position: center 32%; opacity: 0; transition: opacity 1.2s ease; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%); } /* Whichever copy is mid-playthrough is faded up; the other waits behind it */ .hero__vid.show { opacity: 1; } /* Once a flyover is live, drop the still photo so they don't double up */ .hero__bg.has-vid .hero__photo { opacity: 0 !important; transition: opacity 1.6s ease; } .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(58% 48% at 50% 40%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.52) 46%, rgba(255,255,255,0) 74%), linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 30%); } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: calc(var(--nav-h) + 32px) 40px clamp(200px, 30vh, 380px); display: flex; align-items: center; justify-content: center; } .hero__content { max-width: 820px; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Minimal centered hero */ .hero__center { display: flex; flex-direction: column; align-items: center; gap: 32px; } .hero__meta { display: flex; flex-direction: column; align-items: center; gap: 32px; } .hero__logo-center { width: clamp(320px, 42vw, 560px); height: auto; display: block; filter: drop-shadow(0 16px 34px rgba(17,38,68,0.16)); } .hero__rule { width: 64px; height: 1px; background: rgba(17,63,103,0.30); margin: 4px 0 -2px; } .hero__tagline { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.7vw, 23px); color: var(--navy); text-align: center; max-width: none; white-space: nowrap; line-height: 1.55; letter-spacing: 0.01em; } .hero .display { color: #fff; margin: 0 0 26px; } .hero .display em { color: rgba(255,255,255,0.85); } .hero__sub { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.52; color: rgba(255,255,255,0.88); max-width: 680px; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; } .hero__cue { position: absolute; left: 50%; bottom: 32px; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,0.35); } .hero__cue span { font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; } .hero__cue .line { width: 1px; height: 48px; background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent); position: relative; overflow: hidden; } .hero__cue .line::after { content: ''; position: absolute; left: 0; width: 100%; height: 50%; top: -50%; background: rgba(255,255,255,0.95); animation: cueDrop 2.4s var(--ease) infinite; } /* ---------- Page header (interior) ---------- */ .page-head { position: relative; background: var(--navy-deep); overflow: hidden; } .page-head--photo { background: var(--navy-darker); } .page-head__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; animation: kenburns 28s ease-out forwards; } .page-head__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,31,54,0.60) 0%, rgba(8,31,54,0.78) 100%); } .page-head__inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: calc(var(--nav-h) + 72px) 40px 80px; } .page-head .h1 { color: #fff; margin: 20px 0 0; } .page-head__sub { margin-top: 22px; max-width: 660px; } /* ========================================================= SERVICES INDEX (home page) ========================================================= */ .svc-index { border-top: 1px solid var(--line); } .svc-row { display: grid; grid-template-columns: 56px 1fr 320px 32px; align-items: center; gap: 32px; padding: 28px 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background 300ms, padding-left 300ms var(--ease); } .svc-row:hover { background: var(--off-white); padding-left: 24px; } .svc-row__num { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; color: var(--gray-light); } .svc-row__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.008em; color: var(--navy); transition: color 300ms; } .svc-row:hover .svc-row__name { color: var(--navy-deep); } .svc-row__desc { font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--gray-dark); } .svc-row__arr { color: var(--steel); font-size: 20px; transition: transform 300ms var(--ease); text-align: right; } .svc-row:hover .svc-row__arr { transform: translateX(6px); } /* ========================================================= SERVICES PANELS (services page — desktop) ========================================================= */ .panels { display: flex; gap: 12px; height: clamp(460px, 64vh, 640px); } .panel { position: relative; flex: 1 1 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--navy-deep); transition: flex 650ms var(--ease-io); box-shadow: var(--shadow-sm); outline: none; } .panel.is-active { flex: 5.2 1 0; } .panel.is-active:focus { box-shadow: 0 0 0 3px rgba(94,131,165,0.5), var(--shadow-md); } /* Each panel has a distinct navy tone */ .panel[data-i="0"] { background: linear-gradient(160deg, #173e62, #0c2c49); } .panel[data-i="1"] { background: linear-gradient(160deg, #1b4875, #0e3457); } .panel[data-i="2"] { background: linear-gradient(160deg, #113f67, #081f36); } .panel[data-i="3"] { background: linear-gradient(160deg, #1d4a71, #0c2c49); } .panel[data-i="4"] { background: linear-gradient(160deg, #14436c, #091f36); } .panel__inner { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; } .panel__head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .panel__icon { width: 50px; height: 50px; border-radius: 13px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); color: #fff; transition: background 520ms var(--ease), border-color 520ms var(--ease); } .panel__icon svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .panel.is-active .panel__icon { background: var(--steel); border-color: transparent; } .panel.is-active .panel__inner::after { content: ''; position: absolute; top: 8px; right: 30px; z-index: 0; font-family: var(--font-display); font-weight: 700; line-height: 0.78; font-size: clamp(150px, 17vw, 260px); color: rgba(255,255,255,0.06); pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease) 200ms; } .panel.is-active .panel__inner::after { opacity: 1; } .panel[data-i="0"].is-active .panel__inner::after { content: '01'; } .panel[data-i="1"].is-active .panel__inner::after { content: '02'; } .panel[data-i="2"].is-active .panel__inner::after { content: '03'; } .panel[data-i="3"].is-active .panel__inner::after { content: '04'; } .panel[data-i="4"].is-active .panel__inner::after { content: '05'; } .panel__num { font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; color: rgba(255,255,255,0.54); } .panel__label { position: absolute; bottom: 32px; left: 28px; z-index: 2; transform-origin: left bottom; transform: rotate(-90deg) translateX(0); white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: rgba(255,255,255,0.88); transition: opacity 300ms; pointer-events: none; } .panel.is-active .panel__label { opacity: 0; } .panel__content { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease) 100ms, transform 480ms var(--ease) 100ms; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 1; max-width: 640px; } .panel.is-active .panel__content { opacity: 1; transform: none; } .panel:not(.is-active) .panel__content { transition-delay: 0s; } .panel__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; color: #fff; text-wrap: balance; } .panel__rule { width: 40px; height: 1px; background: var(--steel); margin: 16px 0; flex-shrink: 0; } .panel__desc { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.52; color: rgba(255,255,255,0.88); margin-bottom: 20px; } .panel__bullets { list-style: none; display: flex; flex-direction: column; gap: 9px; } .panel__bullets li { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.45; color: rgba(255,255,255,0.76); padding-left: 18px; position: relative; } .panel__bullets li::before { content: '·'; position: absolute; left: 0; color: var(--steel); font-size: 11px; top: 1px; } .panels-mobile { display: none; } /* ========================================================= TEAM ========================================================= */ .team-banner { position: relative; overflow: hidden; background: var(--navy-deep); height: clamp(480px, 72vh, 720px); } .team-banner__media { position: absolute; inset: 0; overflow: hidden; } .team-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 46%; display: block; transform-origin: 66% 46%; animation: teamBannerZoom 20s ease-out forwards; } @keyframes teamBannerZoom { from { transform: scale(1.34); } to { transform: scale(1.24); } } .team-banner__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,31,54,0.35) 0%, rgba(8,31,54,0.0) 40%, rgba(8,31,54,0.72) 100%); } .team-banner__cap { position: absolute; bottom: 0; left: 0; right: 0; } .team-banner__cap .container { padding-bottom: 44px; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 2.6vw, 38px) 24px; } .member { display: block; text-decoration: none; color: inherit; position: relative; } .member__photo { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--off-white); box-shadow: var(--shadow-xs); position: relative; } .member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform 900ms var(--ease); } .member:hover .member__photo img { transform: scale(1.04); } .member__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--navy); margin-top: 13px; line-height: 1.3; } .member__cred { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 11px; letter-spacing: 0.01em; color: var(--gray-light); margin-top: 2px; line-height: 1.35; } .member__role { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: var(--steel); margin-top: 5px; line-height: 1.3; } .member__rule { width: 18px; height: 2px; background: var(--steel); margin-top: 11px; transition: width 380ms var(--ease); border-radius: 1px; opacity: 0.45; } .member:hover .member__rule { width: 30px; opacity: 1; } .member::after { content: 'View bio \2192'; display: inline-flex; align-items: center; margin-top: 9px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); opacity: 0.78; transition: opacity 240ms var(--ease), transform 240ms var(--ease); } .member:hover::after { opacity: 1; transform: translateX(4px); } /* Pending headshot: non-linking card with a "photo coming soon" portrait */ .member--pending { cursor: default; } .member--pending::after { display: none; } .member__photo--soon { display: flex; align-items: center; justify-content: center; background: var(--steel-soft); box-shadow: inset 0 0 0 1px var(--line); } .member__photo--soon span { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); text-align: center; line-height: 1.85; } /* Home team teaser */ .team-faces { display: flex; } .team-faces img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 3px solid #fff; margin-left: -14px; box-shadow: var(--shadow-xs); transition: transform 380ms var(--ease); } .team-faces img:first-child { margin-left: 0; } .team-faces:hover img { transform: translateY(-4px); } /* Team spotlight (home) — full-width team photo with the copy laid over the photo's naturally-empty left side (windows), so all 21 people stay large and sharp. */ .team-band { position: relative; background: var(--navy-deep); overflow: hidden; min-height: clamp(520px, 64vh, 700px); } .team-band__media { position: absolute; inset: 0; } .team-band__photo { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; background: var(--navy-deep); } .team-band__swipe { display: none; } /* Navy gradient over the left so the white copy reads cleanly, fading out before the people so no face is darkened or covered */ .team-band__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9,36,62,0.97) 0%, rgba(9,36,62,0.92) 22%, rgba(9,36,62,0.55) 36%, rgba(9,36,62,0.14) 48%, rgba(9,36,62,0) 58%), linear-gradient(180deg, rgba(9,36,62,0.22) 0%, rgba(9,36,62,0) 26%); } .team-band__overlay { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(40px, 5vh, 64px) 40px; min-height: clamp(420px, 46vh, 540px); display: flex; align-items: center; } .team-band__copy { max-width: 430px; } /* The copy sits in a narrow column over the photo, so it runs a step smaller than the full-width section headings — at the section scale it read oversized. */ .team-band__copy .h2 { font-size: clamp(26px, 2.4vw, 36px); } .team-band__copy .body { font-size: 16px; } @media (max-width: 1080px) { .team-band { aspect-ratio: auto; } .team-band__media { position: relative; inset: auto; } .team-band__photo { position: relative; inset: auto; height: auto; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; } .team-band__scrim { background: linear-gradient(0deg, var(--navy-deep) 0%, rgba(9,36,62,0.18) 22%, rgba(9,36,62,0) 42%); } .team-band__overlay { position: relative; min-height: 0; max-width: none; padding: clamp(28px, 7vw, 44px) 24px clamp(40px, 9vw, 60px); } .team-band__copy { max-width: none; } } /* Phones: the panorama is too wide to show 21 people legibly at full width, so the photo alone scrolls horizontally at a comfortable height — every face stays full-size and uncropped, and the user swipes to pan the room. */ @media (max-width: 640px) { .team-band__media { overflow: visible; } .team-band__photo { width: 100%; max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; } .team-band__scrim { display: none; } .team-band__swipe { display: none; } } /* ========================================================= CONTACT ========================================================= */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .contact-rows { border-top: 1px solid var(--line); } .contact-row { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; } .contact-row .k { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel); padding-top: 3px; } .contact-row .v { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--navy); } .contact-row .v a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 240ms; } .contact-row .v a:hover { border-color: var(--navy); } .form { display: grid; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-dark); } .field input, .field textarea { font-family: var(--font-sans); font-size: 15.5px; color: var(--navy); background: var(--off-white); border: 1.5px solid rgba(17,63,103,0.12); border-radius: 10px; padding: 14px 16px; transition: border-color 240ms, background 240ms, box-shadow 240ms; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--steel); background: #fff; box-shadow: 0 0 0 4px rgba(94,131,165,0.1); } .field textarea { resize: vertical; min-height: 140px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form__note { font-size: 12px; color: var(--gray-light); line-height: 1.6; } .form__sent { display: none; font-size: 14px; color: var(--steel); font-family: var(--font-sans); line-height: 1.5; } .map-frame { border: 0; width: 100%; height: 300px; border-radius: 12px; margin-top: 32px; filter: grayscale(0.18) contrast(0.96); } /* ========================================================= CTA BAND ========================================================= */ .cta-band { position: relative; background: var(--navy-deep); overflow: hidden; padding: clamp(64px,8vw,112px) 0; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 110% at 8% 30%, rgba(94,131,165,0.22), transparent 55%); } .cta-band__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 36px; } /* ========================================================= LIFESTYLE PHOTO SECTIONS ========================================================= */ .photo-frame { position: relative; } .photo-frame::after { content: ''; position: absolute; inset: -16px 16px 16px -16px; border: 1px solid rgba(17,63,103,0.18); border-radius: 14px; z-index: -1; } .photo-frame img { width: 100%; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow-md); } .photo-slot { width: 100%; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background-color: var(--off-white); background-image: repeating-linear-gradient(135deg, rgba(17,63,103,0.05) 0 12px, rgba(17,63,103,0) 12px 24px); border: 1px solid rgba(17,63,103,0.16); } .photo-slot__tag { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 13px; letter-spacing: 0.04em; color: var(--navy); text-transform: uppercase; } .photo-slot__hint { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 11px; color: var(--gray-light); max-width: 220px; line-height: 1.5; } /* ========================================================= PRINCIPLE PILLARS (about / value-prop section) ========================================================= */ .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--line); padding-top: 26px; } .principle { display: flex; flex-direction: column; gap: 6px; } .principle__k { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--navy); } .principle__v { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--gray-dark); text-wrap: pretty; } @media (max-width: 620px) { .principles { grid-template-columns: 1fr; gap: 18px; } } /* About copy — lead paragraph + keyline foot (replaces principle pillars) */ .about-copy__lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: var(--navy); } .about-copy__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .about-copy__tag { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-light); } @media (max-width: 620px) { .about-copy__foot { margin-top: 28px; padding-top: 22px; } } /* ========================================================= SERVICES CARDS (home page — redesigned) ========================================================= */ .svc-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px 72px; align-items: end; margin-bottom: 56px; } .svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .svc-cards__foot { margin-top: 44px; } .svc-card { position: relative; display: flex; flex-direction: column; min-height: 322px; padding: 34px 32px 30px; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-xs); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 460ms var(--ease), box-shadow 460ms var(--ease), border-color 460ms var(--ease); } .svc-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--steel)); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease); } .svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; } .svc-card:hover::before { transform: scaleX(1); } .svc-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; } .svc-card__icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: transparent; color: var(--navy); border: 1px solid var(--line); transition: background 460ms var(--ease), color 460ms var(--ease), border-color 460ms var(--ease), transform 460ms var(--ease); } .svc-card__icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .svc-card:hover .svc-card__icon { background: var(--navy); color: #fff; transform: translateY(-2px); } .svc-card__num { display: none; } .svc-card__body { display: flex; flex-direction: column; flex: 1; } .svc-card__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.18; letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; } .svc-card__rule { width: 32px; height: 2px; border-radius: 2px; background: var(--steel); margin: 16px 0; transition: width 460ms var(--ease); } .svc-card:hover .svc-card__rule { width: 58px; } .svc-card__desc { font-family: var(--font-sans); font-weight: 400; font-size: 14.5px; line-height: 1.6; color: var(--gray-dark); text-wrap: pretty; } .svc-card__cta { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); } .svc-card__cta .arr { transition: transform 320ms var(--ease); } .svc-card:hover .svc-card__cta .arr { transform: translateX(5px); } /* Photo / CTA tile */ .svc-card--photo { padding: 0; border: none; box-shadow: var(--shadow-sm); } .svc-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); } .svc-card--photo:hover img { transform: scale(1.06); } .svc-card--photo::before { display: none; } .svc-card__photo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,31,54,0.05) 0%, rgba(8,31,54,0.30) 44%, rgba(8,31,54,0.88) 100%); } .svc-card__photo-cap { position: relative; z-index: 2; margin-top: auto; padding: 30px; display: flex; flex-direction: column; gap: 16px; } .svc-card__name--light { color: #fff; } .svc-card__cta--light { color: #fff; } @media (max-width: 960px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .svc-head { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 560px) { .svc-cards { grid-template-columns: 1fr; } .svc-card { min-height: 0; padding: 28px 26px; } .svc-card__top { margin-bottom: 22px; } .svc-card__icon { width: 50px; height: 50px; } } /* ========================================================= ABOUT MEDIA (layered family photo + inset) ========================================================= */ .about__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 7vw, 96px); align-items: center; } .about-media { position: relative; } .about-media__main { aspect-ratio: 4 / 5; } .about-media__inset { position: absolute; right: -24px; bottom: -30px; width: 48%; max-width: 232px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid #fff; background: #fff; } .about-media__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; box-shadow: none; } /* Tablet: stack to one column, center the media, shorten the crop */ @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: clamp(34px, 7vw, 56px); } .about-media { max-width: 540px; width: 100%; margin: 0 auto; } .about-media__main { aspect-ratio: 16 / 11; } .about-media__inset { right: 0; bottom: -22px; width: 34%; } } /* Phone: one clean framed photo — no offset line, no overlapping inset */ @media (max-width: 600px) { .about-media { max-width: none; } .about-media .photo-frame::after { display: none; } .about-media__inset { display: none; } } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--navy-darker); padding: 72px 0 40px; } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.09); } .footer__logo { display: inline-block; } .footer__logo img { height: 92px; width: auto; display: block; } @media (max-width: 620px) { .footer__logo img { height: 72px; } } .footer__cols { display: flex; gap: 72px; flex-wrap: wrap; } .footer__col h4 { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.44); margin-bottom: 18px; } .footer__col a, .footer__col p { display: block; font-size: 14.5px; line-height: 2; color: rgba(255,255,255,0.7); text-decoration: none; } .footer__col a { transition: color 240ms; } .footer__col a:hover { color: #fff; } .footer__legal { padding-top: 28px; font-family: var(--font-sans); font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.42); max-width: 940px; } .footer__legal strong { color: rgba(255,255,255,0.55); font-weight: 500; } .footer__legal p { margin: 0 0 12px; } .footer__legal p:last-child { margin-bottom: 0; } .footer__legal a { color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,0.22); transition: color 240ms, text-decoration-color 240ms; } .footer__legal a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.6); } .footer__disc-links { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.09); } .footer__disc-links a { font-size: 13.5px; letter-spacing: 0.01em; color: rgba(255,255,255,0.82); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); transition: color 240ms, text-decoration-color 240ms; } .footer__disc-links a:hover { color: #fff; text-decoration-color: #fff; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 11px; color: rgba(255,255,255,0.28); } /* ========================================================= SERVICES — DEEP DETAIL EXPERIENCE (services page) Scroll-spy sticky rail + animated detail blocks (.sv-) ========================================================= */ .sv-intro { max-width: 880px; } .sv-intro .h2 { margin: 18px 0 22px; } .sv-stage { padding: clamp(8px, 2vw, 24px) 0 clamp(72px, 9vw, 120px); } .sv-stage__grid { display: grid; grid-template-columns: minmax(290px, 372px) 1fr; gap: clamp(40px, 6vw, 92px); align-items: start; } /* ---- Sticky rail (the grid item itself is the sticky element) ---- */ .has-js .sv-rail { opacity: 0; transform: translateY(26px); } .sv-rail { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; background: linear-gradient(168deg, #16456e 0%, #0d3055 52%, #0c2c49 100%); border-radius: 22px; padding: 36px 32px 30px; box-shadow: var(--shadow-md); overflow: hidden; isolation: isolate; transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out), box-shadow 600ms var(--ease); } body.is-loaded .sv-rail { opacity: 1; transform: none; } .sv-rail::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgba(94,131,165,0.30), transparent 60%); pointer-events: none; } .sv-rail__title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.22; color: #fff; margin: 16px 0 4px; letter-spacing: -0.01em; } .sv-rail__title em { font-style: italic; font-weight: 500; color: var(--steel); } .sv-nav { list-style: none; position: relative; display: flex; flex-direction: column; gap: 1px; margin: 26px 0 28px; } .sv-nav .sv-nav__marker { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 12px; background: rgba(255,255,255,0.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); opacity: 0; pointer-events: none; z-index: 0; transition: transform 620ms var(--ease-out), height 620ms var(--ease-out), opacity 400ms var(--ease); } .sv-nav li { position: relative; z-index: 1; } .sv-nav a { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: center; padding: 14px 14px; border-radius: 12px; text-decoration: none; cursor: pointer; position: relative; transition: background 420ms var(--ease); } .sv-nav a::before { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scaleY(0); transform-origin: 50% 50%; height: 58%; width: 3px; border-radius: 2px; background: var(--steel); transition: transform 420ms var(--ease); } .sv-nav__n { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: rgba(255,255,255,0.42); transition: color 420ms var(--ease); } .sv-nav__t { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; line-height: 1.24; color: rgba(255,255,255,0.66); transition: color 420ms var(--ease); } .sv-nav a:hover { background: rgba(255,255,255,0.04); } .sv-nav a:hover .sv-nav__t { color: #fff; } .sv-nav li.is-active a { background: transparent; } .sv-nav li.is-active a::before { transform: translateY(-50%) scaleY(1); } .sv-nav li.is-active .sv-nav__t { color: #fff; } .sv-nav li.is-active .sv-nav__n { color: var(--steel); } /* pointer-reactive sheen on the rail */ .sv-rail__sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, -20%), rgba(255,255,255,0.10), transparent 62%); } .sv-rail:hover .sv-rail__sheen { opacity: 1; } .sv-rail__foot { display: flex; align-items: center; gap: 16px; } .sv-rail__bar { flex: 1; height: 2px; background: rgba(255,255,255,0.16); border-radius: 2px; overflow: hidden; } .sv-rail__bar span { display: block; height: 100%; width: 20%; background: var(--steel); transition: width 520ms var(--ease); } .sv-rail__count { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: rgba(255,255,255,0.56); white-space: nowrap; } .sv-rail__count b { color: #fff; } /* ---- Detail column + blocks ---- */ .sv-detail { min-width: 0; position: relative; padding-left: clamp(30px, 4vw, 58px); } /* Traveling progress spine down the reading column */ .sv-spine { position: absolute; left: clamp(9px, 1.4vw, 18px); top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--line); } .sv-spine__fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, var(--navy) 0%, var(--steel) 100%); transform: scaleY(0); transform-origin: top center; will-change: transform; } .sv-spine__node { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5.5px; margin-top: -4px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 4px rgba(94,131,165,0.16), 0 0 14px 2px rgba(94,131,165,0.55); will-change: transform; } .sv-block { position: relative; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); } .sv-block:first-child { border-top: 0; padding-top: 4px; } .sv-block__ghost { position: absolute; top: clamp(-10px, -1vw, 0px); right: -4px; z-index: 0; font-family: var(--font-display); font-weight: 700; line-height: 0.78; font-size: clamp(112px, 15vw, 216px); color: rgba(17,63,103,0.045); pointer-events: none; user-select: none; will-change: transform; transition: color 850ms var(--ease); } .sv-block.is-current .sv-block__ghost { color: rgba(94,131,165,0.11); } .sv-block > *:not(.sv-block__ghost) { position: relative; z-index: 1; } .sv-block__head { display: flex; align-items: center; gap: 18px; } .sv-block__icon { width: 56px; height: 56px; border-radius: 15px; flex: none; display: grid; place-items: center; background: var(--steel-soft); color: var(--navy); opacity: 0; transform: scale(0.8) rotate(-6deg); transition: background 700ms var(--ease), color 700ms var(--ease), opacity 700ms var(--ease-out), transform 800ms var(--ease-out); } .sv-block__icon svg { width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .sv-block__icon svg * { stroke-dasharray: 56; stroke-dashoffset: 56; transition: stroke-dashoffset 950ms var(--ease-out) 180ms; } .sv-block.is-in .sv-block__icon { background: var(--navy); color: #fff; opacity: 1; transform: none; } .sv-block.is-in .sv-block__icon svg * { stroke-dashoffset: 0; } .sv-block.is-current .sv-block__icon { box-shadow: 0 14px 34px -12px rgba(17,63,103,0.5); transform: translateY(-2px) scale(1.03); } .sv-block__kicker { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--steel); opacity: 0; transform: translateX(-10px); transition: opacity 700ms var(--ease-out) 140ms, transform 700ms var(--ease-out) 140ms; } .sv-block.is-in .sv-block__kicker { opacity: 1; transform: none; } .sv-block__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.018em; color: var(--navy); margin: 20px 0 0; text-wrap: balance; } .sv-block__title .sv-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; } .sv-block__title .sv-word > i { display: inline-block; font-style: inherit; transform: translateY(118%); transition: transform 860ms var(--ease-out); } .sv-block.is-in .sv-block__title .sv-word > i { transform: translateY(0); } .sv-block__rule { display: block; width: 0; height: 2px; border-radius: 2px; background: var(--steel); margin: 20px 0 22px; transition: width 820ms var(--ease-out) 240ms; } .sv-block__lead { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.56; color: var(--gray-dark); max-width: 640px; text-wrap: pretty; opacity: 0; transform: translateY(18px); transition: opacity 820ms var(--ease-out) 220ms, transform 820ms var(--ease-out) 220ms; } .sv-block.is-in .sv-block__rule { width: 48px; } .sv-block.is-in .sv-block__lead { opacity: 1; transform: none; } .sv-block__sub { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-light); margin: 34px 0 18px; } .sv-checks { list-style: none; columns: 2; column-gap: 38px; } .sv-checkitem { display: flex; align-items: flex-start; gap: 14px; break-inside: avoid; margin-bottom: 15px; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.45; color: var(--body); opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .sv-block.is-in .sv-checkitem { opacity: 1; transform: none; } .sv-block.is-in .sv-checkitem:nth-child(1) { transition-delay: 180ms; } .sv-block.is-in .sv-checkitem:nth-child(2) { transition-delay: 250ms; } .sv-block.is-in .sv-checkitem:nth-child(3) { transition-delay: 320ms; } .sv-block.is-in .sv-checkitem:nth-child(4) { transition-delay: 390ms; } .sv-block.is-in .sv-checkitem:nth-child(5) { transition-delay: 460ms; } .sv-block.is-in .sv-checkitem:nth-child(6) { transition-delay: 530ms; } .sv-check { width: 27px; height: 27px; flex: none; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: var(--steel-soft); border: 1px solid rgba(17,63,103,0.14); transform: scale(0.5); transition: background 560ms var(--ease), border-color 560ms var(--ease), transform 560ms var(--ease-out); } .sv-block.is-in .sv-check { background: var(--navy); border-color: var(--navy); transform: scale(1); } .sv-check svg { width: 15px; height: 15px; stroke: var(--steel); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 620ms var(--ease) 140ms, stroke 560ms var(--ease); } .sv-block.is-in .sv-check svg { stroke: #fff; stroke-dashoffset: 0; } .sv-block__foot { font-family: var(--font-sans); font-size: 15px; line-height: 1.66; color: var(--gray-dark); max-width: 600px; margin-top: 28px; padding-left: 20px; border-left: 2px solid var(--line); text-wrap: pretty; } /* Partner callout (Estate / Wealth.com) */ .sv-partner { margin-top: 28px; display: inline-flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-radius: 14px; background: var(--off-white); border: 1px solid var(--line); } .sv-partner__k { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-light); } .sv-partner__v { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--navy); letter-spacing: -0.01em; } .sv-partner__v span { color: var(--steel); } .sv-partner p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--gray-dark); margin-top: 4px; max-width: 360px; } /* ---- Mobile spy bar ---- */ .sv-mobilebar { display: none; } /* ---- Editorial closing band ---- */ .sv-imageband { position: relative; overflow: hidden; background: var(--navy-deep); } .sv-imageband--plain { background: linear-gradient(118deg, #0c2c49 0%, #123f68 60%, #0d3055 100%); } .sv-imageband--plain::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 120% at 6% 24%, rgba(94,131,165,0.26), transparent 55%); pointer-events: none; } .sv-imageband__inner { position: relative; z-index: 2; padding: clamp(72px, 11vw, 132px) 40px; } .sv-imageband__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.22; letter-spacing: -0.015em; color: #fff; max-width: 880px; margin-top: 22px; text-wrap: balance; } .sv-imageband__quote em { font-style: italic; color: var(--steel); } @media (max-width: 900px) { .sv-stage { padding-top: 0; } .sv-stage__grid { grid-template-columns: 1fr; gap: 0; } .sv-rail { display: none; } .sv-detail { padding-left: 0; } .sv-spine { display: none; } .sv-mobilebar { display: flex; align-items: center; gap: 14px; position: sticky; top: var(--nav-h); z-index: 60; margin: 0 0 8px; padding: 13px 4px; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .sv-mobilebar__n { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--steel); flex: none; } .sv-mobilebar__t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-mobilebar__bar { width: 64px; height: 2px; flex: none; background: var(--line); border-radius: 2px; overflow: hidden; } .sv-mobilebar__bar span { display: block; height: 100%; width: 20%; background: var(--steel); transition: width 460ms var(--ease); } } @media (max-width: 560px) { .sv-checks { columns: 1; } .sv-block__head { gap: 14px; } .sv-block__icon { width: 50px; height: 50px; } .sv-partner { display: flex; } } @media (prefers-reduced-motion: reduce) { .sv-block__lead, .sv-checkitem, .sv-block__kicker { opacity: 1 !important; transform: none !important; } .sv-block__title .sv-word > i { transform: none !important; } .sv-block__icon { opacity: 1 !important; transform: none !important; } .sv-block__icon svg * { stroke-dashoffset: 0 !important; } .sv-check { transform: none !important; } .sv-check svg { stroke-dashoffset: 0 !important; } .sv-block__rule { width: 48px !important; } .has-js .sv-rail { opacity: 1 !important; transform: none !important; } } /* ========================================================= MOBILE ACCORDION ========================================================= */ .macc { border-top: 1px solid var(--line); } .macc__item { border-bottom: 1px solid var(--line); } .macc__head { width: 100%; display: grid; grid-template-columns: auto 1fr 24px; align-items: center; gap: 16px; padding: 20px 4px; background: none; border: none; text-align: left; cursor: pointer; } .macc__icon { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--steel-soft); color: var(--navy); transition: background 360ms var(--ease), color 360ms var(--ease); } .macc__icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .macc__item.is-open .macc__icon { background: var(--navy); color: #fff; } .macc__num { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--gray-light); } .macc__name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.18; color: var(--navy); } .macc__plus { position: relative; width: 18px; height: 18px; justify-self: end; } .macc__plus::before, .macc__plus::after { content: ''; position: absolute; background: var(--steel); border-radius: 1px; } .macc__plus::before { left: 0; top: 8px; width: 18px; height: 2px; } .macc__plus::after { left: 8px; top: 0; width: 2px; height: 18px; transition: transform 360ms var(--ease), opacity 360ms; } .macc__item.is-open .macc__plus::after { transform: rotate(90deg); opacity: 0; } .macc__body { max-height: 0; overflow: hidden; transition: max-height 480ms var(--ease); } .macc__body-inner { padding: 0 4px 24px 62px; display: flex; flex-direction: column; gap: 10px; } .macc__body-inner .lede { font-size: 15.5px; } .macc__body-inner ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .macc__body-inner ul li { font-family: var(--font-sans); font-size: 14px; color: var(--body); line-height: 1.5; padding-left: 18px; position: relative; } .macc__body-inner ul li::before { content: '·'; position: absolute; left: 0; color: var(--steel); font-size: 11px; top: 2px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(4, 1fr); } .svc-row { grid-template-columns: 48px 1fr auto; } .svc-row__desc { display: none; } } @media (max-width: 900px) { .nav__links, .nav__phone { display: none; } .nav__toggle { display: flex; } .nav__inner { padding: 0 24px; } .container { padding: 0 24px; } .panels { display: none; } .panels-mobile { display: block; } .contact-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } .hero__inner { padding: calc(var(--nav-h) + 40px) 24px 100px; } .page-head__inner { padding: calc(var(--nav-h) + 48px) 24px 64px; } .form__row { grid-template-columns: 1fr; } .mobile-menu { padding: 0 24px; } } @media (max-width: 620px) { :root { --nav-h: 88px; } .hero__tagline { white-space: normal; max-width: 320px; } .hero__logo-center { width: clamp(240px, 78vw, 360px); padding: 30px 36px; } .brand__logo { height: 70px; } .nav.is-solid .brand__logo { height: 60px; } .team-grid { grid-template-columns: repeat(2, 1fr); } .svc-row { gap: 14px; padding: 20px 8px; } .footer__cols { gap: 36px; } .cta-band__inner { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero__photo { animation: none; } .hero__cue { display: none; } /* No scroll morph: show the real logos, settle the nav to its white state. */ .has-js .hero__logo-center { visibility: visible !important; } .morph-logo { display: none !important; } .has-hero .nav { --t: 1 !important; --r: 1 !important; } } /* ========================================================= TEAM ROSTER — grouped by role ========================================================= */ .section.team-roster { padding-top: clamp(48px, 5vw, 76px); } .team-roster .team-group + .team-group { margin-top: clamp(56px, 6vw, 96px); } .team-group__head { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-bottom: clamp(24px, 2.6vw, 38px); } .team-group__head::after { content: ''; flex: 1 1 40px; height: 1px; background: var(--line); } .team-group__title { margin: 0; white-space: nowrap; } /* rounded snapshot so the headshot keeps its corners while it morphs */ .member__photo img { border-radius: inherit; } /* ========================================================= INDIVIDUAL BIO PAGE (bio.html) ========================================================= */ .bio { padding: calc(var(--nav-h) + clamp(34px, 5vw, 68px)) 0 clamp(64px, 8vw, 116px); background: var(--white); } .bio__back { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: clamp(26px, 3.4vw, 46px); transition: gap 300ms var(--ease), color 200ms; } .bio__back .arr { transition: transform 320ms var(--ease); display: inline-block; } .bio__back:hover { color: var(--navy); } .bio__back:hover .arr { transform: translateX(-5px); } .bio__grid { display: grid; grid-template-columns: minmax(0, 372px) 1fr; gap: clamp(34px, 5vw, 76px); align-items: start; } .bio__media { position: sticky; top: calc(var(--nav-h) + 26px); } .bio__photo { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--off-white); box-shadow: var(--shadow-md); } .bio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; border-radius: inherit; } .bio__contactcard { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; } .bio__email { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--navy); padding: 13px 18px; border: 1px solid var(--line); border-radius: 10px; transition: border-color 240ms, background 240ms, color 240ms; } .bio__email:hover { border-color: var(--navy); background: var(--off-white); } .bio__email .ic { color: var(--steel); } .bio__phone { font-family: var(--font-sans); font-size: 13px; color: var(--gray-light); padding-left: 4px; } .bio__head { margin-bottom: clamp(22px, 2.6vw, 34px); } .bio__eyebrow { margin-bottom: 16px; } .bio__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.02em; color: var(--navy); } .bio__cred { display: block; font-family: var(--font-sans); font-weight: 500; font-size: clamp(14px, 1.3vw, 16px); letter-spacing: 0.02em; color: var(--gray-light); margin-top: 12px; } .bio__role { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-top: 14px; } .bio__rule { width: 44px; height: 2px; background: var(--steel); border-radius: 1px; margin: clamp(22px, 2.6vw, 32px) 0; } .bio__body p { font-family: var(--font-sans); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.78; color: var(--body); max-width: 640px; } .bio__body p + p { margin-top: 18px; } .bio__lede { font-family: var(--font-serif) !important; font-style: italic; font-size: clamp(19px, 1.7vw, 23px) !important; line-height: 1.55 !important; color: var(--gray-dark) !important; } .bio__whatif { margin-top: clamp(34px, 4vw, 52px); border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 38px); max-width: 640px; } .bio__whatif-kicker { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 20px; } .bio__qa + .bio__qa { margin-top: 22px; } .bio__q { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.35; color: var(--navy); } .bio__a { font-family: var(--font-serif); font-style: italic; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; color: var(--gray-dark); margin-top: 7px; } .bio__pending { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--gray-light); } @media (max-width: 860px) { .bio__grid { grid-template-columns: 1fr; gap: 30px; } .bio__media { position: static; max-width: 340px; } .bio__photo { aspect-ratio: 1 / 1; } } /* ========================================================= VIEW TRANSITIONS — headshot morph between team & bio pages ========================================================= */ @view-transition { navigation: auto; } ::view-transition-group(*) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 440ms; animation-timing-function: var(--ease); } /* the morphing headshot rides above the crossfading page */ ::view-transition-group(bio-photo) { z-index: 20; } ::view-transition-image-pair(bio-photo) { border-radius: 16px; overflow: hidden; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ========================================================= MOBILE REFINEMENTS — live-site phone audit (Jul 2026) Layout-only corrections. No copy, no desktop changes. ========================================================= */ /* Laptops and half-screen windows below the 1180px container: step the lockup down so logo + links + button fit without the image having to give. */ @media (max-width: 1100px) { .brand__logo { height: 64px; } .nav.is-solid .brand__logo { height: 56px; } .has-hero .brand__logo { height: calc(64px - 8px * var(--t)); } } @media (max-width: 900px) { .nav__inner { gap: 16px; } .nav__right { gap: 14px; } /* Menu button was a 28x24 hit area — below the 44px minimum */ .nav__toggle { width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; margin-right: -8px; } .nav__toggle span:nth-child(1), .nav__toggle span:nth-child(3) { width: 26px; } .nav__toggle span:nth-child(2) { width: 19px; } .nav.is-open .nav__toggle span:nth-child(1), .nav.is-open .nav__toggle span:nth-child(3) { width: 26px; } /* Team photos on phones: a tighter crop of the SAME frame — the whole team stays in shot (nobody cropped out) but sits 1.75x closer, instead of a full-width panorama where every face is 15px tall. The translate values are the crop origin: 38% in from the left, 28% down from the top, at 1/0.57 scale. Verified against the source frame: all 21 people inside. */ /* padding-top clears the fixed nav: this banner is the first element on the page, so the bar was overlapping the top of the crop and cutting off heads. */ .team-banner { height: auto; background: var(--navy-deep); padding-top: var(--nav-h); padding-bottom: clamp(20px, 5vw, 32px); } .team-banner__media { position: static; inset: auto; aspect-ratio: 1.673; } .team-banner img { width: 175.4%; max-width: none; height: auto; object-fit: fill; animation: none; transform: translate(-38%, -28%); } .team-banner__scrim { display: none; } .team-banner__cap { position: static; } .team-banner__cap .container { padding-top: 22px; padding-bottom: 0; } .team-band { min-height: 0; } .team-band__media { overflow: hidden; aspect-ratio: 1.673; } .team-band__photo { width: 175.4%; max-width: none; height: auto; aspect-ratio: auto; object-fit: fill; transform: translate(-38%, -28%); } /* Open menu is navy: the navy logo + navy bars were invisible against it */ .nav.is-open { background: var(--navy-darker); border-bottom-color: transparent; box-shadow: none; } /* Swap in the real on-dark lockup (the same file the footer uses). Inverting the color logo with a filter flattened the mark and lost the "T". */ .nav.is-open .brand { background: url('../assets/triwealth-white-hd.png') no-repeat left center; background-size: contain; } .nav.is-open .brand__logo { opacity: 0; } .nav.is-open .nav__toggle span { background: #fff; } } @media (max-width: 620px) { /* One constant bar height + logo size on phones — no shrink-on-scroll jitter, and the lockup gets real breathing room instead of filling the bar. */ :root { --nav-h: 76px; } .nav, .nav.is-solid, .has-hero .nav { height: var(--nav-h); } .brand__logo, .nav.is-solid .brand__logo, .has-hero .brand__logo { height: 56px; } /* The bar cannot hold logo + button + menu at phone width; Contact stays one tap away in the menu and in the hero. */ .nav__cta { display: none; } /* Buttons were `white-space: nowrap`: the long service button ran 445px wide and pushed the whole home page sideways. */ .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.35; padding: 14px 26px; } /* Team group headings were nowrap and overflowed the viewport */ .team-group__title { white-space: normal; font-size: clamp(22px, 6.6vw, 28px); } .team-group__head { gap: 16px; } /* iOS zooms the page when a focused field is under 16px */ .field input, .field textarea { font-size: 16px; } /* Disclosure links: give the stacked rows real separation */ .footer__disc-links { gap: 14px 22px; } } @media (max-width: 560px) { /* Full-bleed photo tile has no intrinsic height once min-height is dropped */ .svc-card--photo { min-height: 250px; } }