:root { --ink:#183942; --deep:#0d2931; --sand:#f4f0e8; --gold:#bd8e50; --gold-light:#e3c89f; --line:rgba(24,57,66,.16); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .container { width:min(1180px,calc(100% - 64px)); margin:0 auto; } .eyebrow { margin:0 0 14px; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .about-header { position:absolute; z-index:5; top:0; right:0; left:0; color:#fff; border-bottom:1px solid rgba(255,255,255,.28); } .about-nav { display:flex; align-items:center; width:min(1180px,calc(100% - 64px)); min-height:70px; margin:0 auto; } .brand { display:inline-flex; align-items:center; } .brand img { display:block; width:auto; height:37px; object-fit:contain; } .about-header .brand img { height:25px; } .nav-links { display:flex; align-items:center; height:70px; margin-left:auto; } .nav-links a { display:flex; height:100%; align-items:center; padding:0 20px; border-left:1px solid rgba(255,255,255,.24); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .nav-links .is-active { color:var(--gold-light); } .nav-links .nav-contact { height:auto; margin-left:15px; padding:10px 14px; border:1px solid rgba(255,255,255,.7); } .menu-toggle { display:none; margin-left:auto; color:#fff; background:transparent; border:0; } .menu-toggle span { display:block; width:25px; height:1px; margin:5px 0; background:currentColor; } .mobile-menu { display:none; } .about-hero { position:relative; min-height:720px; height:100svh; overflow:hidden; color:#fff; } .about-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .about-hero__shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,28,34,.55),rgba(6,28,34,.12) 62%),rgba(6,28,34,.26); } .about-hero__content { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(1180px,calc(100% - 64px)); min-height:100%; margin:0 auto; padding:120px 0 92px; text-align:center; } .breadcrumb { position:absolute; top:94px; left:0; display:flex; gap:9px; color:rgba(255,255,255,.72); font-size:10px; letter-spacing:.07em; text-transform:uppercase; } .about-hero .eyebrow { color:var(--gold-light); } .about-hero h1 { max-width:890px; margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(46px,5.8vw,82px); font-weight:400; letter-spacing:-.075em; line-height:.98; text-wrap:balance; } .about-hero h1 strong { font-weight:700; } .about-hero__content>div>p:not(.eyebrow) { max-width:570px; margin:23px auto 0; color:rgba(255,255,255,.86); font-size:17px; line-height:1.65; } .hero-scroll-cue { position:absolute; bottom:34px; left:50%; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.78); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; transform:translateX(-50%); } .hero-scroll-cue span { width:36px; height:1px; background:var(--gold-light); } .hero-scroll-cue:hover { color:#fff; } .belief { padding:130px 0; background:var(--sand); } .belief-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,160px); } h2 { margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(35px,4.3vw,59px); font-weight:400; letter-spacing:-.065em; line-height:1.02; } h2 strong { font-weight:700; } .belief-grid>div:last-child p { margin:0; color:#5a6e73; font-size:17px; line-height:1.75; } .belief-grid>div:last-child p+p { margin-top:18px; } .belief-grid a { display:inline-flex; margin-top:27px; padding-bottom:5px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; } .principles { padding:125px 0; } .principles>div>.eyebrow,.principles>div>h2 { max-width:740px; margin-right:auto; margin-left:auto; text-align:center; } .principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:52px; background:var(--line); } .principle-grid article { min-height:270px; padding:28px; background:#fff; } .principle-grid b { color:var(--gold); font-family:"Montserrat",sans-serif; font-size:29px; } .principle-grid h3 { margin:35px 0 10px; font-family:"Montserrat",sans-serif; font-size:19px; letter-spacing:-.04em; } .principle-grid p { margin:0; color:#62757a; font-size:14px; line-height:1.65; } .founders { padding:130px 0; color:#fff; background:var(--deep); } .founders-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(50px,9vw,130px); align-items:center; } .founders .eyebrow { color:var(--gold-light); } .founders-copy h2 strong { color:var(--gold-light); } .founders-copy>p:not(.eyebrow) { max-width:420px; margin:24px 0 0; color:rgba(255,255,255,.7); line-height:1.65; } .founder-bio { min-height:157px; margin-top:36px; padding:21px 0; border-top:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); } .founder-bio span { color:var(--gold-light); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .founder-bio h3 { margin:7px 0 7px; font-family:"Montserrat",sans-serif; font-size:24px; letter-spacing:-.05em; } .founder-bio p { max-width:440px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.6; } .founder-slider { width:min(100%,470px); margin-left:auto; } .founder-photo { position:relative; height:min(67vw,650px); min-height:540px; overflow:hidden; background:#31484b; } .founder-photo>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .founder-photo__grey { filter:grayscale(1); clip-path:inset(0 0 0 100%); transition:clip-path .25s ease; } .founder-slider.is-micaela .founder-photo__grey { clip-path:polygon(0 0,51% 0,51% 37%,49% 42%,46% 47%,43% 54%,41% 62%,42% 76%,45% 100%,0 100%); } .founder-slider.is-joao .founder-photo__grey { clip-path:polygon(58% 35%,65% 35%,71% 40%,75% 47%,80% 51%,85% 58%,84% 68%,84% 78%,86% 100%,44% 100%,44% 80%,41% 70%,40% 63%,42% 57%,45% 52%,47% 47%,50% 43%,52% 38%); } .founder-photo__label { position:absolute; bottom:18px; z-index:2; color:#fff; font-family:"Montserrat",sans-serif; font-size:19px; font-weight:700; text-shadow:0 1px 7px rgba(0,0,0,.5); } .founder-photo__label--joao { left:20px; } .founder-photo__label--micaela { right:20px; } .founder-slider__line { position:absolute; z-index:3; top:0; bottom:0; left:var(--split); width:1px; background:#fff; transform:translateX(-50%); } .founder-slider__handle { position:absolute; z-index:4; top:50%; left:var(--split); display:grid; width:42px; height:42px; place-items:center; color:var(--ink); background:#fff; border-radius:50%; font-size:16px; transform:translate(-50%,-50%); } #founder-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; } .founder-slider__hint { margin:13px 0 0; color:rgba(255,255,255,.56); font-size:10px; letter-spacing:.09em; text-align:center; text-transform:uppercase; } .founders-message { padding:125px 0; text-align:center; background:var(--sand); } .founders-message__inner { max-width:830px; } .founders-message blockquote { margin:0; font-size:clamp(15px,1.35vw,18px); line-height:1.72; } .founders-message blockquote+blockquote { margin-top:19px; } .founders-message>div>div { margin-top:30px; } .founders-message strong { display:block; color:var(--gold); font-family:"Montserrat",sans-serif; font-size:17px; } .founders-message span { display:block; margin-top:4px; color:#66777a; font-size:11px; } .method { padding:130px 0; } .method-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,150px); align-items:center; } .method-image { position:relative; } .method-image img { width:100%; height:570px; object-fit:cover; } .method-image span { position:absolute; bottom:17px; left:17px; padding:7px 10px; color:#fff; background:var(--ink); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .method ol { margin:35px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); } .method li { display:grid; grid-template-columns:55px 1fr; gap:13px; padding:20px 0; border-bottom:1px solid var(--line); } .method li>b { color:var(--gold); font-size:11px; letter-spacing:.1em; } .method li h3 { margin:0 0 4px; font-size:17px; } .method li p { margin:0; color:#607176; font-size:14px; line-height:1.55; } .history { padding:125px 0; background:var(--sand); } .history-heading { max-width:800px; margin:0 auto; text-align:center; } .history-heading>p:last-child { max-width:530px; margin:20px auto 0; color:#607176; line-height:1.65; } .history-heading { max-width:730px; } .history-heading h2 { margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(36px,4.3vw,59px); font-weight:400; letter-spacing:-.065em; line-height:1.02; } .timeline-controls { display:flex; justify-content:center; gap:9px; margin-top:27px; } .timeline-controls button { display:grid; width:35px; height:35px; place-items:center; padding:0; color:var(--ink); border:1px solid rgba(24,57,66,.35); border-radius:50%; background:transparent; cursor:pointer; font-size:17px; transition:.2s ease; } .timeline-controls button:hover:not(:disabled) { color:#fff; background:var(--ink); } .timeline-controls button:disabled { opacity:.32; cursor:default; } .timeline-viewport { margin-top:58px; overflow:hidden; } .timeline { display:flex; gap:18px; transition:transform .45s cubic-bezier(.22,.61,.36,1); } .timeline-card { position:relative; flex:0 0 min(760px,82%); min-height:300px; padding-top:12px; } .timeline-card::before { position:absolute; top:0; right:0; left:0; height:3px; content:""; background:#806332; } .timeline-card>b { display:block; margin:0 0 18px; color:#806332; font-family:"Montserrat",sans-serif; font-size:clamp(35px,4vw,55px); letter-spacing:-.07em; } .timeline-event { min-height:142px; padding:18px; background:rgba(24,57,66,.06); } .timeline-event + .timeline-event { margin-top:10px; } .timeline-event span,.timeline-future span { display:block; margin-bottom:8px; font-family:"Montserrat",sans-serif; font-size:14px; font-weight:700; letter-spacing:-.035em; line-height:1.15; } .timeline p { margin:0; color:#607176; font-size:12px; line-height:1.55; } .timeline-future { display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff; background:var(--deep); } .timeline-future::before { background:var(--gold-light); } .timeline-future>b { color:var(--gold-light); } .timeline-future span { font-size:20px; } .timeline-future p { color:rgba(255,255,255,.7); } .trust { padding:125px 0; } .trust>.container>.eyebrow,.trust h2 { max-width:690px; margin-right:auto; margin-left:auto; text-align:center; } .trust-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:52px; } .trust-grid article { padding:20px 0 0; border-top:2px solid var(--gold); } .trust-grid b { display:block; color:#bd8e50; font-family:"Montserrat",sans-serif; font-size:clamp(31px,3.2vw,48px); font-weight:700; letter-spacing:-.07em; line-height:1; } .trust-grid b span { font-size:.53em; letter-spacing:-.04em; } .trust-grid p { margin:10px 0 0; color:#607176; font-size:13px; line-height:1.45; } .about-cta { padding:130px 0; color:#fff; text-align:center; background:linear-gradient(rgba(9,35,42,.85),rgba(9,35,42,.85)),url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=2000&q=85") center/cover; } .about-cta .eyebrow { color:var(--gold-light); } .about-cta h2 strong { color:var(--gold-light); } .about-cta p:not(.eyebrow) { max-width:560px; margin:24px auto 32px; color:rgba(255,255,255,.8); line-height:1.65; } .about-cta a { display:inline-flex; min-height:49px; align-items:center; gap:12px; padding:0 21px; color:var(--ink); background:#fff; font-size:11px; font-weight:700; } .about-cta a:hover { color:#fff; background:var(--gold); } .footer { padding:62px 0 24px; color:#dce5e2; background:#0a2229; } .footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:50px; padding-bottom:55px; } .footer .brand { margin-bottom:18px; } .footer .brand img { height:37px; } .footer-brand p { max-width:310px; margin:0; color:#91a8aa; font-size:14px; } .footer h3 { margin:7px 0 16px; color:#fff; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .footer-links { display:grid; gap:9px; } .footer-links a,.footer-contact a { color:#b7c7c8; font-size:14px; } .footer-links a:hover,.footer-contact a:hover { color:var(--gold-light); } .footer-contact { display:grid; gap:8px; } .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:#82999b; font-size:12px; } .footer-bottom a { color:#a7bbba; } @media (max-width:850px) { .belief-grid,.method-grid,.history-heading,.founders-grid { grid-template-columns:1fr; gap:50px; } .footer-top { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } .founder-slider { margin:0 auto; } .principle-grid,.timeline-viewport { margin-top:42px; } .timeline-card { flex-basis:100%; min-height:0; } .timeline-event { min-height:0; } .trust-grid { grid-template-columns:repeat(2,1fr); gap:35px 20px; } } @media (max-width:650px) { .container,.about-nav,.about-hero__content { width:min(100% - 40px,1180px); } .nav-links { display:none; } .menu-toggle { display:block; } .mobile-menu { position:fixed; inset:70px 0 auto; z-index:8; padding:15px 20px; color:#fff; background:var(--deep); opacity:0; pointer-events:none; transform:translateY(-10px); transition:.2s; } .mobile-menu.open { opacity:1; pointer-events:auto; transform:none; } .mobile-menu a { display:block; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14); } .about-hero { min-height:650px; } .about-hero__content { padding:100px 0 55px; } .breadcrumb { position:static; margin-bottom:auto; } .belief,.principles,.founders,.founders-message,.method,.history,.trust,.about-cta { padding:78px 0; } .founder-photo { height:125vw; min-height:440px; max-height:610px; } .method-image img { height:390px; } .footer-top { grid-template-columns:1fr; gap:28px; } .footer-bottom { display:block; } .footer-bottom span + span { display:block; margin-top:8px; } }