:root { --paper:#f8f5ef; --ink:#3e4038; --muted:#77776c; --line:#e2dbd0; --clay:#b38c78; --moss:#899083; --serif:Iowan Old Style, Baskerville, "Times New Roman", serif; --sans:Avenir Next, Avenir, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.7; } ::selection { background:#d4c9b8; } a { color:inherit; } .skip-link { position:absolute; left:1rem; top:-4rem; z-index:20; background:var(--ink); color:var(--paper); padding:.5rem .8rem; } .skip-link:focus { top:1rem; }
.site-header { width:min(100% - 64px, 1440px); height:86px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; } .brand { text-decoration:none; font-family:var(--serif); font-size:17px; line-height:.88; letter-spacing:-.03em; } .navigation { display:flex; align-items:center; gap:27px; font-size:11px; text-transform:uppercase; letter-spacing:.11em; } .navigation a { text-decoration:none; } .navigation a:not(.nav-contact):hover { color:var(--clay); } .nav-contact { border:1px solid var(--ink); padding:8px 12px; } .nav-toggle { display:none; border:0; background:transparent; padding:6px; }
.hero { min-height:calc(100vh - 86px); width:min(100% - 64px, 1440px); margin:auto; position:relative; display:flex; flex-direction:column; justify-content:center; padding:90px 8.5vw 105px; overflow:hidden; background:radial-gradient(circle at 83% 42%, #ece3d6 0, transparent 28%); } .eyebrow,.section-label { margin:0 0 27px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.16em; } h1,h2,h3,h4,p { margin-top:0; } h1,h2,h3,h4 { font-weight:400; } h1 { max-width:900px; position:relative; z-index:1; font-family:var(--serif); font-size:clamp(52px,7.2vw,108px); line-height:.96; letter-spacing:-.055em; margin:0 0 35px; } .hero-copy { position:relative; z-index:1; max-width:560px; margin-bottom:32px; color:#55574f; font-size:17px; line-height:1.75; } .text-link { position:relative; z-index:1; width:max-content; text-decoration:none; font-size:11px; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:5px; } .text-link span { margin-left:10px; } .hero-mark { position:absolute; right:8%; top:16%; width:35%; height:72%; border:1px solid #d5c9bb; border-radius:50% 50% 0 0; opacity:.75; } .hero-mark::after { content:""; position:absolute; inset:15% 18% 0; border-left:1px solid #d5c9bb; transform:rotate(20deg); transform-origin:bottom; }
.section { width:min(100% - 64px, 1440px); margin:auto; padding:130px 8.5vw; border-top:1px solid var(--line); } .section-label { margin-bottom:72px; } .prose { max-width:655px; } .prose.wide { max-width:800px; } h2 { font-family:var(--serif); font-size:clamp(39px,5vw,70px); line-height:1.02; letter-spacing:-.045em; margin-bottom:38px; } .prose p { color:#434940; font-size:16px; margin-bottom:22px; } blockquote { margin:90px 0 0 auto; max-width:570px; border-left:1px solid var(--clay); padding:2px 0 3px 27px; } blockquote p { font-family:var(--serif); font-size:clamp(23px,2.25vw,32px); letter-spacing:-.025em; line-height:1.24; margin-bottom:17px; } cite { font-style:normal; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.analysis-section { background:#eee8de; width:100%; padding-left:max(8.5vw, calc((100% - 1440px)/2 + 8.5vw)); padding-right:max(8.5vw, calc((100% - 1440px)/2 + 8.5vw)); } .why { margin-top:100px; } .why h3 { font-family:var(--serif); font-size:31px; letter-spacing:-.03em; margin-bottom:42px; } .three-columns { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d2c8bb; } .three-columns article { padding:25px 26px 0 0; border-right:1px solid #d2c8bb; margin-right:26px; } .three-columns article:nth-child(2) { transform:translateY(46px); } .three-columns article:nth-child(3) { transform:translateY(16px); } .three-columns article:last-child { border:0; margin-right:0; } .three-columns span,.steps>li>span { color:var(--clay); font-size:10px; letter-spacing:.13em; } h4 { font-family:var(--serif); font-size:26px; line-height:1.1; margin:20px 0 17px; } .three-columns p,.cards p,.steps p { color:#5a5b53; font-size:14px; line-height:1.7; } .concept-line { margin:145px 0 0; text-align:center; font-family:var(--serif); font-size:clamp(30px,4vw,52px); letter-spacing:-.04em; }
.approach-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); gap:12vw; align-items:start; } .aperture { min-height:610px; margin-top:64px; background:#d3c5b5; position:relative; overflow:hidden; border-radius:140px 0 0 0; } .aperture::before { content:""; position:absolute; background:#f5f0e8; width:135%; height:65%; left:-41%; top:-14%; transform:rotate(43deg); } .aperture::after { content:""; position:absolute; border:1px solid #9b8e80; width:75%; height:115%; right:-40%; bottom:-34%; border-radius:50%; } .aperture div { position:absolute; left:20%; top:19%; width:1px; height:100%; background:#9b8e80; transform:rotate(43deg); } .quote-right { margin-top:72px; }
.journey { background:#f1eee8; width:100%; padding-left:max(8.5vw, calc((100% - 1440px)/2 + 8.5vw)); padding-right:max(8.5vw, calc((100% - 1440px)/2 + 8.5vw)); } .lead { font-family:var(--serif); font-size:25px!important; line-height:1.35!important; color:var(--ink)!important; } .steps { margin:90px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); } .steps li { display:grid; grid-template-columns:15% 1fr; padding:34px 0 41px; border-bottom:1px solid var(--line); } .steps li:nth-child(2) { margin-left:10%; } .steps h3,.cards h3 { font-family:var(--serif); font-size:31px; line-height:1.1; letter-spacing:-.03em; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); margin-top:85px; gap:18px; } .cards article { background:#fbf9f4; min-height:250px; padding:31px 29px; border:1px solid var(--line); } .cards article:nth-child(2) { transform:translateY(37px); background:#f2ede5; } .cards article:nth-child(3) { transform:translateY(12px); } .cards h3 { text-transform:uppercase; font-family:var(--sans); font-size:12px; letter-spacing:.12em; line-height:1.35; }
.bio { background:#e5e6dd; width:100%; padding-left:max(8.5vw, calc((100% - 1440px)/2 + 8.5vw)); padding-right:max(8.5vw, calc((100% - 1440px)/2 + 8.5vw)); } .bio-grid { display:grid; grid-template-columns:1.1fr .75fr; gap:10vw; } .bio-grid .second { padding-top:165px; } .signature { min-height:56vh; display:flex; align-items:center; justify-content:center; padding:70px 32px; text-align:center; background:#4b544b; color:#f8f5ef; } .signature p { font-family:var(--serif); font-size:clamp(44px,6.8vw,100px); line-height:.98; letter-spacing:-.055em; margin:0; } .signature em { font-weight:400; color:#d6b9a3; }
.contact { width:min(100% - 64px, 1440px); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:12vw; padding:130px 8.5vw; } .contact h2 { margin:0; } .contact>div:last-child { max-width:470px; align-self:end; color:#464b44; } .button { display:inline-flex; gap:30px; align-items:center; margin-top:17px; padding:12px 0; font-size:11px; text-transform:uppercase; letter-spacing:.13em; text-decoration:none; border-bottom:1px solid var(--ink); } footer { width:min(100% - 64px, 1440px); margin:auto; border-top:1px solid var(--line); padding:24px 8.5vw 31px; display:flex; justify-content:space-between; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .reveal { opacity:0; transform:translateY(18px); transition:opacity 760ms cubic-bezier(.2,.65,.25,1) var(--reveal-delay, 0ms), transform 760ms cubic-bezier(.2,.65,.25,1) var(--reveal-delay, 0ms); } .reveal.is-visible { opacity:1; transform:translateY(0); } .three-columns article.reveal:nth-child(2),.cards article.reveal:nth-child(2) { transform:translateY(64px); } .three-columns article.reveal:nth-child(3),.cards article.reveal:nth-child(3) { transform:translateY(34px); } .three-columns article.reveal.is-visible:nth-child(2),.cards article.reveal.is-visible:nth-child(2) { transform:translateY(46px); } .three-columns article.reveal.is-visible:nth-child(3) { transform:translateY(16px); } .cards article.reveal.is-visible:nth-child(3) { transform:translateY(12px); }
:root { --paper:#fdfaf5; --ink:#4e5049; --muted:#88877d; --line:#e9e2d8; --clay:#bd9b86; --moss:#9aa093; } .hero { background:radial-gradient(circle at 83% 42%, #f1e9de 0, transparent 30%); } .hero-copy { color:#62645c; } .prose p { color:#5f615a; } .three-columns p,.cards p,.steps p { color:#67685f; } .contact>div:last-child { color:#62645c; } .signature { background:#687168; color:#fdfaf5; }
blockquote { position:relative; max-width:610px; padding:42px 46px 37px; border:0; border-radius:48% 52% 47% 53% / 26% 30% 25% 31%; background:#f0e4d8; } blockquote::before { content:"“"; position:absolute; top:15px; left:25px; color:#c5a28c; font-family:var(--serif); font-size:62px; line-height:1; opacity:.55; } blockquote p { position:relative; z-index:1; } blockquote cite { position:relative; z-index:1; display:block; } .intro blockquote { margin-right:7%; } .approach blockquote { background:#e3e8df; border-radius:54% 46% 50% 50% / 30% 24% 35% 28%; } .approach blockquote::before { color:#9ca994; } .journey blockquote { background:#eee6d8; border-radius:45% 55% 48% 52% / 28% 33% 23% 36%; } .journey blockquote::before { color:#baa286; }
@media (max-width: 760px) { .site-header,.hero,.section,.contact,footer { width:calc(100% - 36px); } .site-header { height:68px; } .navigation { display:none; position:absolute; background:var(--paper); left:0; right:0; top:67px; border:1px solid var(--line); padding:20px; align-items:stretch; gap:19px; } .navigation.is-open { display:flex; flex-direction:column; } .nav-contact { text-align:center; } .nav-toggle { display:flex; flex-direction:column; gap:4px; } .nav-toggle span:not(.sr-only) { width:20px; height:1px; background:var(--ink); display:block; } .hero { min-height:670px; padding:70px 6px 80px; } h1 { font-size:clamp(49px,15vw,69px); } .hero-copy { font-size:16px; } .hero-mark { width:68%; height:44%; right:-14%; top:auto; bottom:0; } .section { padding:78px 6px; } .section-label { margin-bottom:49px; } h2 { font-size:43px; } .prose p { font-size:15px; } blockquote { margin-top:60px; padding-left:18px; } .analysis-section,.journey,.bio { width:100%; padding-left:24px; padding-right:24px; } .three-columns,.cards { grid-template-columns:1fr; } .three-columns article,.three-columns article:nth-child(2),.three-columns article:nth-child(3) { padding:25px 0; margin:0; transform:none; border-right:0; border-bottom:1px solid #c9c1b4; } .three-columns article:last-child { border-bottom:0; } .concept-line { margin-top:70px; text-align:left; } .approach-layout,.bio-grid,.contact { grid-template-columns:1fr; gap:42px; } .aperture { min-height:330px; order:-1; margin-top:0; } .steps { margin-top:60px; } .steps li,.steps li:nth-child(2) { grid-template-columns:54px 1fr; padding:27px 0; margin-left:0; } .steps h3 { font-size:27px; } .cards { margin-top:60px; } .cards article,.cards article:nth-child(2),.cards article:nth-child(3) { min-height:0; transform:none; } .bio-grid .second { padding-top:0; } .signature { min-height:42vh; } .contact { padding:80px 6px; } footer { padding:20px 6px 25px; gap:12px; font-size:9px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal,.reveal.is-visible { opacity:1; transform:none!important; transition:none; } }
@media (max-width: 760px) { blockquote { padding:34px 28px 31px; border-radius:42% 58% 45% 55% / 20% 28% 24% 30%; } blockquote::before { top:10px; left:15px; font-size:50px; } }
blockquote { isolation:isolate; background:transparent; border-radius:0; } blockquote::after { content:""; position:absolute; z-index:-1; inset:7px -20px 1px; background:#eadfd3; border-radius:48% 52% 55% 45% / 45% 39% 61% 55%; filter:blur(24px); opacity:.86; } .approach blockquote { background:transparent; border-radius:0; } .approach blockquote::after { background:#dce5db; } .journey blockquote { background:transparent; border-radius:0; } .journey blockquote::after { background:#eee2d0; } @media (max-width:760px) { blockquote { border-radius:0; } blockquote::after { inset:4px -10px; filter:blur(18px); } }
blockquote::after { inset:-56px -95px; border-radius:0; filter:none; opacity:1; background:radial-gradient(ellipse at center, rgba(234,223,211,.82) 0%, rgba(234,223,211,.56) 34%, rgba(234,223,211,.18) 57%, rgba(234,223,211,0) 76%); } .approach blockquote::after { background:radial-gradient(ellipse at center, rgba(220,229,219,.84) 0%, rgba(220,229,219,.55) 35%, rgba(220,229,219,.15) 59%, rgba(220,229,219,0) 77%); } .journey blockquote::after { background:radial-gradient(ellipse at center, rgba(238,226,208,.85) 0%, rgba(238,226,208,.56) 35%, rgba(238,226,208,.16) 59%, rgba(238,226,208,0) 77%); } @media (max-width:760px) { blockquote::after { inset:-45px -48px; filter:none; } }
blockquote { width:min(100%, 590px); padding:55px 52px 48px; } blockquote p { max-width:100%; } blockquote::after { inset:-105px -145px; background:radial-gradient(ellipse 53% 58% at 27% 48%, rgba(234,223,211,.8) 0%, rgba(234,223,211,.52) 50%, transparent 78%), radial-gradient(ellipse 58% 62% at 73% 53%, rgba(234,223,211,.7) 0%, rgba(234,223,211,.42) 50%, transparent 78%); } .approach blockquote::after { background:radial-gradient(ellipse 53% 58% at 27% 48%, rgba(220,229,219,.82) 0%, rgba(220,229,219,.53) 50%, transparent 78%), radial-gradient(ellipse 58% 62% at 73% 53%, rgba(220,229,219,.7) 0%, rgba(220,229,219,.42) 50%, transparent 78%); } .journey blockquote::after { background:radial-gradient(ellipse 53% 58% at 27% 48%, rgba(238,226,208,.83) 0%, rgba(238,226,208,.54) 50%, transparent 78%), radial-gradient(ellipse 58% 62% at 73% 53%, rgba(238,226,208,.72) 0%, rgba(238,226,208,.43) 50%, transparent 78%); } @media (max-width:760px) { blockquote { width:100%; padding:43px 28px 38px; } blockquote::after { inset:-72px -74px; } }
.philosophy-quote { margin-top:115px; } .threshold-quote { display:flex; justify-content:center; padding:110px 32px 45px; overflow:hidden; } .threshold-quote blockquote { margin:0; text-align:center; } .threshold-quote blockquote::before { left:50%; transform:translateX(-50%); } .threshold-quote blockquote::after { background:radial-gradient(ellipse 53% 58% at 27% 48%, rgba(226,232,222,.82) 0%, rgba(226,232,222,.53) 50%, transparent 78%), radial-gradient(ellipse 58% 62% at 73% 53%, rgba(226,232,222,.72) 0%, rgba(226,232,222,.43) 50%, transparent 78%); } @media (max-width:760px) { .threshold-quote { padding:75px 26px 20px; } .philosophy-quote { margin-top:85px; } }
.philosophy-quote::after { inset:-120px -155px; background:radial-gradient(ellipse 55% 62% at 25% 48%, rgba(228,194,161,.7) 0%, rgba(228,194,161,.4) 48%, transparent 78%), radial-gradient(ellipse 57% 60% at 75% 54%, rgba(239,210,181,.72) 0%, rgba(239,210,181,.42) 49%, transparent 78%); } .contact-quote { width:100%; margin:0 0 64px; padding:47px 42px 38px; } .contact-quote p { font-size:clamp(22px,2vw,29px); } .contact-quote::after { inset:-96px -115px; background:radial-gradient(ellipse 53% 58% at 27% 48%, rgba(224,231,219,.82) 0%, rgba(224,231,219,.52) 50%, transparent 78%), radial-gradient(ellipse 58% 62% at 73% 53%, rgba(224,231,219,.7) 0%, rgba(224,231,219,.42) 50%, transparent 78%); } @media (max-width:760px) { .contact-quote { margin-bottom:50px; padding:38px 25px 32px; } .philosophy-quote::after { inset:-90px -75px; } }
:root { --paper:#fdf8f5; --ink:#514b49; --muted:#8e7e79; --line:#eadbd6; --clay:#bd8d85; --moss:#9c9e94; } .hero { background:radial-gradient(circle at 83% 42%, #f3e4e0 0, transparent 31%); } .hero-mark { border-color:#dfc7c0; } .hero-mark::after { border-color:#dfc7c0; } .analysis-section { background:#f1e5e1; } .three-columns { border-color:#ddc9c3; } .three-columns article { border-color:#ddc9c3; } .journey { background:#f8f0ed; } .cards article { background:#fffaf7; } .cards article:nth-child(2) { background:#f5e7e3; } .bio { background:#e7e5df; } .aperture { background:#d8c4c0; } .aperture::before { background:#fcf6f3; } .aperture::after { border-color:#a78f89; } .aperture div { background-color:#a78f89; } .signature { background:#625a58; } .signature em { color:#dfb8ad; } .contact-quote::after { background:radial-gradient(ellipse 53% 58% at 27% 48%, rgba(237,213,209,.86) 0%, rgba(237,213,209,.52) 50%, transparent 78%), radial-gradient(ellipse 58% 62% at 73% 53%, rgba(239,222,214,.72) 0%, rgba(239,222,214,.42) 50%, transparent 78%); }
:root { --ink:#465963; --muted:#7d888d; } .hero-copy { color:#566872; } .prose p { color:#51636c; } .three-columns p,.cards p,.steps p { color:#5b6b72; } .contact>div:last-child { color:#566872; } .signature { background:#4b5f68; }
h1 em,h2 em,h3 em,.lead em { font-weight:400; } .prose em { font-family:var(--serif); font-size:1.07em; color:#465963; }
.concept-line em,.signature p > em { font-weight:400; } .signature p > em { color:inherit; } .signature p > em span { color:#dfb8ad; }
.signature cite { display:block; margin-top:27px; color:#dfb8ad; }
.concept-line em { font-style:italic; }
.hero h1 { max-width:690px; } .hero-photo { position:absolute; z-index:0; right:8%; bottom:10%; width:min(31vw,420px); height:72%; margin:0; overflow:hidden; border-radius:160px 0 0 0; } .hero-photo::after,.aperture::before,.horizon-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(248,229,224,.22), rgba(73,94,105,.18)); pointer-events:none; } .hero-photo img,.aperture img,.horizon-photo img { display:block; width:100%; height:100%; object-fit:cover; } .hero-photo img { object-position:center 52%; filter:saturate(.58) brightness(1.1) contrast(.89); }
.aperture { margin:64px 0 0; background:#d8c4c0; position:relative; overflow:hidden; border-radius:145px 0 0 0; } .aperture::before { width:auto; height:auto; left:0; top:0; transform:none; background:linear-gradient(145deg, rgba(245,224,219,.28), rgba(61,84,98,.17)); } .aperture::after,.aperture div { display:none; } .aperture img { object-position:48% center; filter:saturate(.48) brightness(1.13) contrast(.82); }
.horizon-photo { width:min(62%, 720px); height:250px; margin:84px 0 0 auto; position:relative; overflow:hidden; border-radius:0 0 120px 0; } .horizon-photo img { object-position:center 56%; filter:saturate(.44) brightness(1.18) contrast(.78); } .horizon-photo::after { background:linear-gradient(100deg, rgba(248,240,237,.18), rgba(91,110,120,.21)); }
@media (max-width:760px) { .hero h1 { max-width:100%; } .hero-photo { width:58%; height:37%; right:0; bottom:0; border-radius:110px 0 0 0; } .hero-photo img { object-position:center 48%; } .aperture { margin-top:0; border-radius:90px 0 0 0; } .horizon-photo { width:86%; height:185px; margin-top:58px; border-radius:0 0 80px 0; } }
.hero { isolation:isolate; } .hero-photo { inset:0; width:auto; height:auto; right:auto; bottom:auto; border-radius:0; opacity:.31; } .hero-photo::after { background:linear-gradient(90deg, rgba(253,248,245,.94) 0%, rgba(253,248,245,.72) 39%, rgba(245,226,222,.32) 100%); } .hero-photo img { object-position:center 59%; filter:saturate(.36) brightness(1.22) contrast(.7) blur(.35px); } .hero > :not(.hero-photo) { z-index:1; }
.approach { position:relative; isolation:isolate; overflow:hidden; } .approach-layout .prose,.approach .quote-right,.approach > .section-label { position:relative; z-index:1; } .approach-layout .aperture { position:absolute; z-index:0; inset:0; width:auto; height:auto; min-height:0; margin:0; border-radius:0; background:transparent; opacity:.2; } .approach-layout .aperture::before { background:linear-gradient(90deg, rgba(253,248,245,.92) 0%, rgba(253,248,245,.66) 51%, rgba(253,248,245,.18) 100%); } .approach-layout .aperture img { filter:saturate(.25) brightness(1.22) contrast(.66) blur(.45px); }
.horizon-photo { width:100%; height:225px; margin:90px 0 0; border-radius:0; opacity:.34; } .horizon-photo img { filter:saturate(.28) brightness(1.3) contrast(.62) blur(.35px); } .horizon-photo::after { background:linear-gradient(90deg, rgba(248,240,237,.82), rgba(248,240,237,.28), rgba(248,240,237,.77)); } @media (max-width:760px) { .hero-photo { inset:0; width:auto; height:auto; opacity:.28; border-radius:0; } .approach-layout .aperture { inset:0; border-radius:0; } .horizon-photo { width:100%; height:155px; margin-top:58px; border-radius:0; } }
.hero-photo { opacity:.54; } .hero-photo::after { background:linear-gradient(90deg, rgba(253,248,245,.87) 0%, rgba(253,248,245,.58) 40%, rgba(245,226,222,.16) 100%); } .hero-photo img { filter:saturate(.44) brightness(1.12) contrast(.82); } .approach-layout .aperture { opacity:.42; } .approach-layout .aperture::before { background:linear-gradient(90deg, rgba(253,248,245,.8) 0%, rgba(253,248,245,.42) 52%, rgba(253,248,245,.08) 100%); } .approach-layout .aperture img { filter:saturate(.38) brightness(1.1) contrast(.77); } .horizon-photo { opacity:.58; } .horizon-photo img { filter:saturate(.38) brightness(1.14) contrast(.76); } .horizon-photo::after { background:linear-gradient(90deg, rgba(248,240,237,.58), rgba(248,240,237,.1), rgba(248,240,237,.52)); } @media (max-width:760px) { .hero-photo { opacity:.45; } }
.hero { background:#dfe2e8; } .hero-photo { z-index:-1; opacity:1; } .hero-photo img { transform:scale(1.025); object-position:center 54%; filter:saturate(.48) brightness(1.06) contrast(.78) blur(1.1px); } .hero-photo::after { background:linear-gradient(180deg, rgba(237,240,244,.38) 0%, rgba(248,228,226,.43) 62%, rgba(229,207,211,.5) 100%); } .hero h1,.hero-copy,.hero .text-link,.hero .eyebrow { text-shadow:0 1px 16px rgba(253,248,245,.3); } @media (max-width:760px) { .hero-photo { opacity:1; } .hero-photo img { object-position:center 55%; } .hero-photo::after { background:linear-gradient(180deg, rgba(237,240,244,.48), rgba(248,228,226,.5)); } }
.hero-photo { z-index:0; }
.approach-layout .aperture { opacity:.32; } .approach-layout .aperture::before { background:linear-gradient(90deg, rgba(253,248,245,.87) 0%, rgba(253,248,245,.58) 47%, rgba(245,226,222,.18) 100%); } .approach-layout .aperture img { object-position:center 61%; filter:saturate(.28) brightness(1.15) contrast(.7) blur(.65px); }
.hero h1,.hero-copy,.hero .text-link,.hero .eyebrow { color:#304a58; text-shadow:0 1px 13px rgba(253,248,245,.6); } .approach h2,.approach .prose p,.approach .section-label { color:#38515d; text-shadow:0 1px 12px rgba(253,248,245,.48); }
.lens-card,.audience-card { position:relative; isolation:isolate; overflow:hidden; cursor:pointer; transition:transform 500ms cubic-bezier(.2,.65,.25,1), border-color 500ms ease, background 500ms ease; } .lens-card::before,.audience-card::before { content:""; position:absolute; z-index:-1; width:170px; height:170px; right:-72px; bottom:-84px; border-radius:50%; opacity:.38; transition:transform 700ms cubic-bezier(.2,.65,.25,1), opacity 500ms ease; } .lens-card:nth-child(1)::before,.audience-card:nth-child(1)::before { background:#e8c8c4; } .lens-card:nth-child(2)::before,.audience-card:nth-child(2)::before { background:#cbd9d8; } .lens-card:nth-child(3)::before,.audience-card:nth-child(3)::before { background:#e6d2b9; } .lens-card::after,.audience-card::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:#6c8390; transition:right 580ms cubic-bezier(.2,.65,.25,1); } .lens-card:hover,.lens-card:focus-visible,.lens-card.is-active,.audience-card:hover,.audience-card:focus-visible,.audience-card.is-active { transform:translateY(-9px); outline:none; } .lens-card:hover::before,.lens-card:focus-visible::before,.lens-card.is-active::before,.audience-card:hover::before,.audience-card:focus-visible::before,.audience-card.is-active::before { transform:scale(2.25); opacity:.56; } .lens-card:hover::after,.lens-card:focus-visible::after,.lens-card.is-active::after,.audience-card:hover::after,.audience-card:focus-visible::after,.audience-card.is-active::after { right:0; } .lens-card p,.audience-card p { transition:transform 500ms cubic-bezier(.2,.65,.25,1), color 500ms ease; } .lens-card:hover p,.lens-card:focus-visible p,.lens-card.is-active p,.audience-card:hover p,.audience-card:focus-visible p,.audience-card.is-active p { transform:translateY(-4px); color:#38515d; } @media (max-width:760px) { .lens-card,.audience-card { cursor:default; } .lens-card::before,.audience-card::before { width:130px; height:130px; opacity:.28; } .lens-card:hover,.audience-card:hover { transform:none; } }