:root { --ink:#3f2822; --brown:#4b2d26; --forest:#066c42; --deep:#073c2b; --leaf:#159255; --paper:#f7f5ef; --line:rgba(63,40,34,.18); --sans:"DM Sans",sans-serif; --display:"Manrope",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; } a { color:inherit; text-decoration:none; }
.nav { position:absolute; z-index:5; top:0; left:0; width:100%; height:100px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; color:white; border-bottom:1px solid rgba(255,255,255,.25); }
.brand { display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.05; text-transform:uppercase; letter-spacing:.09em; }
.brand-logo { width:46px; height:46px; border-radius:50%; overflow:hidden; position:relative; background:var(--brown); box-shadow:0 0 0 1px rgba(255,255,255,.5); }
.brand-logo img { position:absolute; width:150px; height:150px; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover; }
nav { display:flex; gap:35px; font-size:14px; } nav a { opacity:.78; transition:.2s; } nav a:hover { opacity:1; }
.nav-cta { font-size:14px; border-bottom:1px solid currentColor; padding-bottom:5px; } .nav-cta span,.contact>a span { margin-left:16px; } .menu { display:none; background:none; border:0; }
.hero { height:100svh; min-height:700px; position:relative; color:white; overflow:hidden; } .hero>img { width:100%; height:100%; object-fit:cover; animation:enter 1.5s ease both; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(25,8,5,.72) 0%,rgba(5,35,23,.12) 68%),linear-gradient(0deg,rgba(6,49,34,.56),transparent 50%); }
.hero-copy { position:absolute; left:7vw; bottom:18%; max-width:850px; } .eyebrow,.section-no { text-transform:uppercase; letter-spacing:.19em; font-size:12px; }
.hero h1,.statement h2,.section-head h2,.profile h2,.contact h2 { font-family:var(--display); font-weight:300; letter-spacing:-.055em; line-height:.93; margin:24px 0; font-size:clamp(58px,8.4vw,128px); }
em { font-family:Georgia,serif; font-weight:400; } .intro { font-size:18px; line-height:1.5; max-width:440px; }
.hero-foot { position:absolute; bottom:0; width:100%; display:grid; grid-template-columns:1fr 1fr 1fr; padding:25px 4vw; border-top:1px solid rgba(255,255,255,.25); font-size:12px; text-transform:uppercase; letter-spacing:.1em; } .hero-foot :last-child { text-align:right; }
.statement { padding:150px 7vw; display:grid; grid-template-columns:1fr 3.2fr 1.4fr; gap:5vw; border-bottom:1px solid var(--line); } .statement h2 { font-size:clamp(42px,5.2vw,78px); margin:0; }
.statement-accent { font:italic 400 clamp(26px,3.2vw,50px) Georgia,serif; color:var(--forest); margin:20px 0; } .body-copy { font-size:18px; line-height:1.7; align-self:end; }
.projects,.services { padding:140px 4vw; } .section-head { display:flex; align-items:start; justify-content:space-between; margin-bottom:80px; } .section-head h2,.profile h2 { font-size:clamp(45px,6.4vw,92px); margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .project-card { min-height:560px; padding:30px; display:flex; flex-direction:column; overflow:hidden; color:inherit; text-decoration:none; } .project-featured { min-height:740px; grid-column:1/-1; }
.project-card.dark { background:var(--deep); color:white; } .project-card.light { background:#e5e0d4; } .project-card.copper { background:#a85d3e; color:white; } .project-card.green { background:var(--leaf); color:white; } .project-card.cocoa { background:var(--brown); color:white; } .project-card.moss { background:#84904c; color:white; }
.project-art { flex:1; min-height:310px; position:relative; overflow:hidden; } .project-art>span { position:absolute; top:5px; right:5px; font-size:12px; } .project-art>b { position:absolute; left:-8px; bottom:-24px; font:300 clamp(90px,14vw,215px)/.8 var(--display); letter-spacing:-.08em; opacity:.13; }
.project-photo-card { padding:0; } .project-photo-card .project-meta { margin:0 30px 30px; } .project-photo { min-height:430px; margin-bottom:30px; } .project-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; } .project-photo>span { top:20px; right:22px; z-index:1; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:white; background:rgba(63,40,34,.72); backdrop-filter:blur(8px); }
.project-carousel .carousel-slide { opacity:0; visibility:hidden; transition:opacity .45s ease; }
.project-carousel .carousel-slide.is-active { opacity:1; visibility:visible; }
.carousel-controls { position:absolute; z-index:2; right:20px; bottom:20px; display:flex; align-items:center; gap:8px; padding:6px; border-radius:999px; color:white; background:rgba(28,24,20,.64); backdrop-filter:blur(10px); box-shadow:0 5px 24px rgba(0,0,0,.18); }
.carousel-arrow { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:white; background:transparent; font:500 18px/1 var(--sans); cursor:pointer; transition:background .2s,border-color .2s; }
.carousel-arrow:hover,.carousel-arrow:focus-visible { background:white; color:var(--ink); border-color:white; outline:none; }
.carousel-count { min-width:44px; text-align:center; font-size:12px; letter-spacing:.08em; }
.project-tall { min-height:740px; } .project-photo.portrait { min-height:610px; background:#e8e2d4; } .project-photo.portrait img { object-fit:contain; }
.project-photo.portaria { min-height:610px; } .project-photo.portaria img { object-position:center 67%; }
.project-photo.finlandia { min-height:610px; } .project-photo.finlandia img { object-position:center 52%; }
.project-photo.tvo img { object-position:center; }
.project-photo.gabao { background:#e8e2d4; }
.project-photo.gabao img { object-position:center; }
.project-photo.plan { background:#f7f6f2; } .project-photo.plan img { object-fit:contain; }
.project-photo.ambr img { object-position:center 58%; }
.project-photo.capela img { object-position:center 58%; }
.project-photo.gob img { object-position:center; }
.project-editorial { grid-column:1/-1; min-height:900px; padding:0; display:grid; grid-template-columns:minmax(0,.86fr) minmax(400px,1.14fr); }
.project-editorial .project-photo { min-height:900px; margin:0; } .project-editorial .project-photo img { object-position:center 43%; }
.project-editorial .project-meta { margin:0; padding:48px; border-top:0; border-left:1px solid currentColor; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
.project-editorial .project-meta h3 { max-width:650px; font-size:clamp(42px,5vw,76px); line-height:.96; } .project-editorial .project-meta p { margin-top:14px; font-size:15px; } .project-editorial .project-meta>span { margin-top:48px; }
.rings { background:repeating-radial-gradient(circle at 40% 45%,transparent 0 38px,rgba(255,255,255,.2) 40px 41px); } .weave { background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(63,40,34,.16) 49px 50px),repeating-linear-gradient(0deg,transparent 0 48px,rgba(63,40,34,.16) 49px 50px); }
.river:after { content:""; position:absolute; width:55%; height:120%; left:20%; top:-10%; border:2px solid rgba(255,255,255,.55); border-radius:50%; transform:rotate(24deg); } .chapel { background:linear-gradient(90deg,transparent 32%,rgba(255,255,255,.8) 32% 33%,transparent 33% 67%,rgba(255,255,255,.8) 67% 68%,transparent 68%); }
.water { background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 43px,rgba(255,255,255,.25) 44px 45px); } .serpent:after { content:""; position:absolute; left:12%; top:15%; width:73%; height:55%; border:2px solid rgba(255,255,255,.6); border-left-color:transparent; border-radius:50%; transform:rotate(-13deg); }
.project-meta { border-top:1px solid currentColor; padding-top:22px; display:flex; justify-content:space-between; align-items:end; gap:15px; } .project-meta h3 { font:400 28px var(--display); margin:0 0 6px; } .project-meta p,.project-meta>span { font-size:13px; margin:0; opacity:.74; }
.project-stories { margin-top:150px; display:grid; gap:160px; }
.project-story { scroll-margin-top:90px; border-top:1px solid rgba(63,40,34,.28); padding-top:34px; }
.story-head { display:grid; grid-template-columns:.65fr 1fr 1.1fr; gap:40px; align-items:start; margin-bottom:54px; }
.story-head>div { display:flex; gap:18px; align-items:flex-start; }
.story-number { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:12px; }
.story-head p { margin:0; font-size:15px; line-height:1.65; color:rgba(63,40,34,.72); }
.story-head h3 { margin:0; font:400 clamp(40px,5vw,72px)/.94 var(--display); letter-spacing:-.045em; }
.project-story figure { margin:0; }
.project-story img { display:block; width:100%; height:100%; object-fit:cover; }
.project-story figcaption { padding-top:13px; font-size:12px; letter-spacing:.03em; color:rgba(63,40,34,.65); }
.story-hero { height:min(70vw,820px); }
.story-hero-wide { height:min(46vw,700px); }
.story-grid { display:grid; gap:18px; margin-top:54px; }
.story-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-grid-two figure { display:grid; grid-template-rows:minmax(420px,54vw) auto; }
.story-plate { margin-top:72px!important; }
.story-plate img { object-fit:contain; background:#f2f0e9; }
.story-detail { width:min(76%,1100px); margin:72px auto 0!important; }
.profile { background:var(--brown); color:white; padding:140px 7vw; } .profile-lead { display:flex; justify-content:space-between; } .profile-grid { display:grid; grid-template-columns:.8fr 2fr 1fr; gap:7vw; margin-top:100px; border-top:1px solid rgba(255,255,255,.24); padding-top:45px; }
.monogram { width:150px; height:150px; border-radius:50%; border:1px solid #9bd269; display:grid; place-items:center; color:#9bd269; font:300 47px var(--display); } .profile-grid h3 { font:400 38px var(--display); margin:0; } .role { color:#9bd269; font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:38px; } .profile-grid p { line-height:1.7; }
.credentials>div { display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,.24); padding:0 0 20px; margin-bottom:25px; } .credentials strong { font:300 36px var(--display); color:#9bd269; } .credentials span { font-size:13px; opacity:.7; }
.services { background:#efede6; } .service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .service-card { min-height:520px; padding:32px; display:flex; flex-direction:column; justify-content:space-between; color:white; transition:transform .35s ease; position:relative; overflow:hidden; } .service-card:hover { transform:translateY(-6px); }
.service-project { background:var(--forest); } .service-build { background:var(--brown); } .service-consult { background:#dad5c7; color:var(--brown); } .service-revive { background:#9bb75b; color:var(--brown); } .service-top { display:flex; justify-content:space-between; align-items:start; font-size:13px; letter-spacing:.12em; } .service-glyph { font-size:64px; line-height:.8; font-weight:300; }
.service-card h3 { font:300 clamp(36px,4.5vw,66px)/.98 var(--display); letter-spacing:-.045em; margin:0 0 24px; } .service-card p { max-width:500px; margin:0; line-height:1.65; font-size:16px; }
.service-card.has-photo { color:white; background:#26372c; isolation:isolate; } .service-card.has-photo:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,28,20,.2) 0%,rgba(18,28,20,.18) 38%,rgba(20,25,20,.88) 100%); }
.service-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s ease; } .service-card:hover .service-media { transform:scale(1.025); } .service-card.has-photo>div { position:relative; z-index:1; text-shadow:0 2px 20px rgba(0,0,0,.28); }
.service-integrated { grid-column:1/-1; min-height:430px; background:var(--forest); color:white; border:1px solid rgba(255,255,255,.18); } .service-integrated.has-photo:after { background:linear-gradient(90deg,rgba(12,20,14,.82) 0%,rgba(12,20,14,.22) 52%,rgba(12,20,14,.66) 100%),linear-gradient(0deg,rgba(12,20,14,.66),transparent 58%); } .service-integrated .service-media { object-position:center; } .integrated-body { position:relative; display:grid; grid-template-columns:1.35fr 1fr; gap:8vw; align-items:end; } .service-integrated h3 { font-size:clamp(48px,6vw,88px); } .integrated-disciplines { display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.45); } .integrated-disciplines span { padding:16px 0; border-bottom:1px solid rgba(255,255,255,.25); font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
.contact { padding:130px 7vw 35px; background:#9bcf66; min-height:90vh; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .contact h2 { font-size:clamp(54px,8vw,118px); } .contact>a { font-size:20px; align-self:flex-start; border-bottom:1px solid; padding-bottom:8px; }
.contact-socials { display:flex; align-items:center; gap:24px; margin-top:32px; font-size:14px; } .contact-socials>span { font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.58; } .contact-socials a { padding-bottom:4px; border-bottom:1px solid rgba(63,40,34,.35); transition:border-color .2s,opacity .2s; } .contact-socials a:hover { border-color:currentColor; opacity:.72; }
.brand-signature { position:absolute; right:5vw; top:50%; width:min(350px,30vw); transform:translateY(-50%); } .brand-signature img { display:block; width:100%; height:auto; } .contact-foot { display:flex; justify-content:space-between; margin-top:auto; padding-top:100px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; border-top:1px solid rgba(63,40,34,.25); }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s,transform .8s; } .reveal.visible { opacity:1; transform:none; } @keyframes enter { from { scale:1.05; filter:brightness(.6); } to { scale:1; filter:brightness(1); } }
@media(max-width:800px) { .nav { height:76px; } .nav nav,.nav-cta { display:none; } .menu { display:flex; flex-direction:column; gap:6px; } .menu span { display:block; width:27px; height:1px; background:white; } .brand-logo { width:38px; height:38px; } .brand-logo img { width:120px; height:120px; } .hero { min-height:650px; } .hero-copy { left:7vw; bottom:22%; } .hero h1 { font-size:16vw; } .hero-foot { grid-template-columns:1fr 1fr; } .hero-foot span:nth-child(2) { display:none; } .statement { padding:100px 7vw; grid-template-columns:1fr; } .section-no { margin-bottom:30px; } .projects,.services { padding:100px 5vw; } .section-head { display:block; } .project-grid,.service-grid { grid-template-columns:1fr; } .project-card,.project-featured { min-height:540px; grid-column:auto; } .project-meta { align-items:start; flex-direction:column; } .project-stories { margin-top:110px; gap:120px; } .story-head { grid-template-columns:1fr; gap:24px; margin-bottom:36px; } .story-head>div { align-items:center; } .story-head h3 { font-size:48px; } .story-grid-two { grid-template-columns:1fr; } .story-grid-two figure { grid-template-rows:auto auto; } .story-hero,.story-hero-wide { height:auto; } .story-detail { width:100%; margin-top:52px!important; } .story-plate { margin-top:52px!important; } .profile { padding:100px 7vw; } .profile-lead { display:block; } .profile-grid { grid-template-columns:1fr; margin-top:60px; } .monogram { width:110px; height:110px; } .service-card { min-height:470px; } .service-integrated { grid-column:auto; min-height:540px; } .integrated-body { grid-template-columns:1fr; gap:48px; } .contact { padding:100px 7vw 30px; min-height:80vh; } .contact-socials { align-items:flex-start; flex-direction:column; gap:14px; } .brand-signature { position:static; width:min(260px,72vw); margin:80px auto 30px; transform:none; } .contact-foot { gap:20px; flex-wrap:wrap; padding-top:25px; } }
@media(max-width:800px) { .project-photo { min-height:330px; } }
@media(max-width:800px) { .project-editorial { display:flex; min-height:0; } .project-editorial .project-photo { min-height:680px; width:100%; } .project-editorial .project-meta { margin:0; padding:30px; border-left:0; border-top:1px solid currentColor; } }