* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f2ee;
color: #1f1b19;
}
a {
text-decoration: none;
color: inherit;
}
/* LANDING */
.landing-body {
background:
radial-gradient(circle at top left, rgba(225, 6, 0, 0.08), transparent 30%),
radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.05), transparent 28%),
linear-gradient(180deg, #262121 0%, #1f1b1b 100%);
}
.elegant-entry {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 38px;
}
.elegant-landing-content {
width: 100%;
max-width: 1320px;
min-height: 760px;
background:
linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%),
linear-gradient(135deg, #302a2a 0%, #211d1d 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 32px;
padding: 76px 74px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
overflow: hidden;
position: relative;
}
.elegant-landing-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 54px;
min-height: 610px;
}
.elegant-text {
color: white;
}
.elegant-eyebrow {
display: inline-block;
margin-bottom: 22px;
color: rgba(255,255,255,0.64);
text-transform: uppercase;
letter-spacing: 2.4px;
font-size: 12px;
}
.elegant-text h1 {
margin: 0;
font-size: 144px;
line-height: 0.9;
color: #f2f2f0;
font-weight: 500;
letter-spacing: -4px;
}
.elegant-text p {
margin: 30px 0 0;
max-width: 560px;
color: rgba(255,255,255,0.80);
font-size: 24px;
line-height: 1.4;
}
.elegant-actions {
margin-top: 34px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.elegant-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: 999px;
background: #e10600;
color: white;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid rgba(255,255,255,0.06);
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.elegant-chip:hover {
background: #c90500;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(225, 6, 0, 0.22);
}
.elegant-note {
color: rgba(255,255,255,0.60);
font-size: 13px;
letter-spacing: 0.3px;
}
.elegant-visual {
display: flex;
justify-content: center;
align-items: center;
}
.elegant-frame {
width: 100%;
max-width: 490px;
height: 540px;
position: relative;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
backdrop-filter: blur(6px);
}
.elegant-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 42px 42px;
border-radius: 30px;
opacity: 0.55;
}
.architect-object {
position: absolute;
inset: 0;
}
.arch-line,
.arch-accent {
position: absolute;
}
.arch-line {
background: rgba(255,255,255,0.72);
transform-origin: left center;
}
.arch-roof-left {
width: 170px;
height: 2px;
left: 132px;
top: 206px;
transform: rotate(-33deg);
}
.arch-roof-right {
width: 145px;
height: 2px;
left: 268px;
top: 113px;
transform: rotate(34deg);
}
.arch-volume-front {
width: 2px;
height: 148px;
left: 154px;
top: 208px;
}
.arch-volume-side {
width: 182px;
height: 2px;
left: 154px;
top: 356px;
}
.arch-base {
width: 235px;
height: 2px;
left: 126px;
top: 386px;
background: rgba(255,255,255,0.30);
}
.arch-door {
width: 2px;
height: 72px;
left: 208px;
top: 284px;
background: rgba(255,255,255,0.52);
}
.arch-window {
width: 58px;
height: 2px;
left: 250px;
top: 248px;
background: rgba(255,255,255,0.52);
}
.arch-depth {
width: 118px;
height: 2px;
left: 280px;
top: 248px;
transform: rotate(90deg);
background: rgba(255,255,255,0.34);
}
.arch-accent {
width: 94px;
height: 3px;
left: 206px;
top: 414px;
border-radius: 999px;
background: #e10600;
box-shadow: 0 0 24px rgba(225, 6, 0, 0.22);
}
.frame-caption {
position: absolute;
left: 34px;
bottom: 28px;
color: rgba(255,255,255,0.54);
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
}
@media (max-width: 1100px) {
.elegant-landing-grid {
grid-template-columns: 1fr;
gap: 38px;
}
.elegant-text h1 {
font-size: 116px;
}
}
@media (max-width: 900px) {
.elegant-landing-content {
padding: 48px 30px;
}
.elegant-frame {
max-width: 400px;
height: 430px;
}
.arch-roof-left {
width: 132px;
left: 96px;
top: 172px;
}
.arch-roof-right {
width: 112px;
left: 203px;
top: 101px;
}
.arch-volume-front {
height: 118px;
left: 114px;
top: 173px;
}
.arch-volume-side {
width: 148px;
left: 114px;
top: 291px;
}
.arch-base {
width: 190px;
left: 92px;
top: 316px;
}
.arch-door {
height: 56px;
left: 160px;
top: 235px;
}
.arch-window {
width: 44px;
left: 196px;
top: 206px;
}
.arch-depth {
width: 92px;
left: 220px;
top: 206px;
}
.arch-accent {
width: 72px;
left: 168px;
top: 338px;
}
}
@media (max-width: 640px) {
.elegant-entry {
padding: 18px;
}
.elegant-landing-content {
min-height: auto;
padding: 36px 22px;
border-radius: 22px;
}
.elegant-text h1 {
font-size: 80px;
letter-spacing: -2px;
}
.elegant-text p {
font-size: 19px;
}
.elegant-actions {
align-items: flex-start;
flex-direction: column;
}
.elegant-frame {
height: 320px;
}
.arch-roof-left {
width: 100px;
left: 78px;
top: 128px;
}
.arch-roof-right {
width: 86px;
left: 160px;
top: 74px;
}
.arch-volume-front {
height: 84px;
left: 96px;
top: 129px;
}
.arch-volume-side {
width: 108px;
left: 96px;
top: 213px;
}
.arch-base {
width: 148px;
left: 76px;
top: 236px;
}
.arch-door {
height: 42px;
left: 130px;
top: 171px;
}
.arch-window {
width: 30px;
left: 162px;
top: 151px;
}
.arch-depth {
width: 68px;
left: 178px;
top: 151px;
}
.arch-accent {
width: 56px;
left: 132px;
top: 255px;
}
.frame-caption {
left: 20px;
bottom: 18px;
font-size: 11px;
}
}
/* HEADER */
.site-header {
min-height: 92px;
background-color: #2f2a2a;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 28px 18px 32px;
position: sticky;
top: 0;
z-index: 30;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logo-link h1 {
margin: 0;
color: #e10600;
font-size: 58px;
font-style: italic;
font-weight: 400;
line-height: 0.9;
}
.logo-link p {
margin: 6px 0 0;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.desktop-nav {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
}
.desktop-nav a,
.lang-button {
color: white;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
background: none;
border: none;
cursor: pointer;
}
.lang-box {
position: relative;
}
.lang-menu {
display: none;
position: absolute;
top: 28px;
right: 0;
background-color: #3d3636;
border-radius: 12px;
min-width: 150px;
padding: 10px 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.24);
}
.lang-box:hover .lang-menu {
display: block;
}
.lang-menu a {
display: block;
padding: 10px 14px;
color: white;
font-size: 14px;
text-transform: none;
}
.lang-menu a:hover {
background-color: rgba(255,255,255,0.08);
}
/* HERO HOME */
.refined-hero {
position: relative;
height: 620px;
overflow: hidden;
}
.hero-image-main {
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(22, 18, 18, 0.48), rgba(22, 18, 18, 0.50)),
url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=80");
background-size: cover;
background-position: center;
}
.refined-hero-text {
position: absolute;
left: 70px;
bottom: 60px;
max-width: 760px;
color: white;
}
.hero-badge {
display: inline-block;
margin-bottom: 18px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
.refined-hero-text h2 {
margin: 0 0 18px;
font-size: 56px;
line-height: 1.02;
max-width: 850px;
}
.refined-hero-text p {
margin: 0;
max-width: 700px;
font-size: 18px;
line-height: 1.65;
color: rgba(255,255,255,0.88);
}
.hero-actions {
display: flex;
gap: 16px;
margin-top: 28px;
flex-wrap: wrap;
}
.primary-cta,
.secondary-cta,
.map-button,
.map-box a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 12px;
font-weight: bold;
transition: 0.2s ease;
}
.primary-cta,
.map-button,
.map-box a {
background-color: #e10600;
color: white;
}
.secondary-cta {
background-color: rgba(255,255,255,0.12);
color: white;
border: 1px solid rgba(255,255,255,0.12);
}
.primary-cta:hover,
.map-button:hover,
.map-box a:hover {
background-color: #c90500;
}
.secondary-cta:hover {
background-color: rgba(255,255,255,0.18);
}
/* SECTION BASE */
.refined-section,
.processo,
.preventivo-section {
padding: 84px 40px;
}
.section-title-block {
max-width: 1200px;
margin: 0 auto 40px;
}
.section-title-block.centered {
text-align: center;
}
.section-title-block h2 {
margin: 0 0 12px;
font-size: 34px;
font-weight: 800;
letter-spacing: -0.5px;
}
.section-title-block p {
margin: 0;
max-width: 760px;
color: #5f5956;
line-height: 1.7;
}
.section-title-block.centered p {
margin-left: auto;
margin-right: auto;
}
.section-title-block.dark h2 {
color: white;
}
.section-title-block.dark p {
color: rgba(255,255,255,0.75);
}
/* TEAM */
.refined-team {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.refined-member {
width: 320px;
background: white;
border-radius: 20px;
padding: 34px 26px;
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.refined-member:hover,
.refined-card:hover,
.light-card:hover,
.contact-block:hover,
.refined-panel:hover,
.process-step:hover,
.target-card:hover,
.map-image-link:hover {
transform: translateY(-5px);
box-shadow: 0 18px 30px rgba(0,0,0,0.10);
}
.avatar-circle {
width: 60px;
height: 60px;
border: 2px solid #2d2828;
border-radius: 50%;
margin: 0 auto 16px;
}
.member-role {
display: inline-block;
margin-bottom: 10px;
font-size: 12px;
text-transform: uppercase;
color: #7a726d;
letter-spacing: 1px;
}
.refined-member h3 {
margin: 0 0 10px;
font-size: 24px;
}
.refined-member p {
margin: 0;
color: #59524f;
line-height: 1.65;
}
/* SERVICES */
.refined-services {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.refined-card {
min-height: 230px;
background: white;
border-radius: 20px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 12px 24px rgba(0,0,0,0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.refined-card h3 {
margin: 0 0 14px;
font-size: 22px;
color: #1f1b19;
}
.refined-card p {
margin: 0;
color: #5a534f;
line-height: 1.65;
}
/* TARGET */
.target-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.target-card {
background: white;
border-radius: 20px;
padding: 28px;
box-shadow: 0 12px 24px rgba(0,0,0,0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.target-card h3 {
margin: 0 0 12px;
font-size: 22px;
}
.target-card p {
margin: 0;
color: #5f5956;
line-height: 1.65;
}
/* PROCESS */
.refined-dark-section {
background: linear-gradient(180deg, #2f2a2a 0%, #221d1d 100%);
}
.process-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.process-step {
background: rgba(255,255,255,0.06);
border-radius: 20px;
padding: 28px;
color: white;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.process-step span {
display: inline-block;
margin-bottom: 18px;
font-size: 14px;
color: #ff8c87;
font-weight: bold;
letter-spacing: 1px;
}
.process-step h3 {
margin: 0 0 12px;
font-size: 22px;
}
.process-step p {
margin: 0;
color: rgba(255,255,255,0.76);
line-height: 1.65;
}
/* WHY */
.refined-why {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.light-card {
background: white;
border-radius: 20px;
padding: 28px;
box-shadow: 0 12px 24px rgba(0,0,0,0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.light-card h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 22px;
}
.light-card p {
margin: 0;
color: #5f5956;
line-height: 1.65;
}
/* SEDE */
.refined-sede-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 24px;
}
.refined-panel {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 12px 24px rgba(0,0,0,0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.refined-panel h3,
.map-title {
margin-top: 0;
margin-bottom: 14px;
font-size: 24px;
}
.refined-panel p {
margin: 0 0 10px;
color: #5a534f;
line-height: 1.6;
}
/* PREVENTIVO */
.preventivo-wrap {
max-width: 1200px;
margin: 0 auto;
background: linear-gradient(135deg, #2f2a2a 0%, #201c1c 100%);
color: white;
border-radius: 24px;
padding: 42px;
display: flex;
justify-content: space-between;
gap: 30px;
align-items: center;
flex-wrap: wrap;
}
.preventivo-text {
max-width: 700px;
}
.mini-label {
display: inline-block;
margin-bottom: 14px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.68);
}
.preventivo-text h2 {
margin: 0 0 14px;
font-size: 36px;
line-height: 1.1;
}
.preventivo-text p {
margin: 0;
color: rgba(255,255,255,0.80);
line-height: 1.7;
}
.preventivo-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.dark-secondary {
background-color: rgba(255,255,255,0.10);
color: white;
border: 1px solid rgba(255,255,255,0.12);
}
.dark-secondary:hover {
background-color: rgba(255,255,255,0.18);
}
/* CONTACTS */
.refined-contacts {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.contact-block {
background: #f8f6f2;
border-radius: 24px;
padding: 28px;
min-height: 190px;
}
.contact-label {
display: inline-block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7d766f;
margin-bottom: 18px;
}
.contact-block p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.5;
color: #201b18;
}
.contact-block p:last-child {
margin-bottom: 0;
}
.contact-label {
display: inline-block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7d766f;
margin-bottom: 18px;
}
.contact-block p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.5;
color: #201b18;
}
.contact-block p:last-child {
margin-bottom: 0;
}
.contact-label {
display: block;
margin-bottom: 16px;
font-size: 13px;
color: #7a726d;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
.contact-block p {
margin: 0 0 8px;
font-size: 18px;
color: #24201e;
line-height: 1.5;
}
/* FOOTER */
.refined-footer,
.site-footer {
background: #221d1d;
color: white;
display: flex;
justify-content: space-between;
gap: 30px;
padding: 42px 40px;
flex-wrap: wrap;
}
.footer-left h3 {
margin: 0 0 10px;
color: #e10600;
font-size: 38px;
font-style: italic;
font-weight: 400;
}
.footer-left p,
.footer-right p {
margin: 0 0 8px;
color: rgba(255,255,255,0.80);
line-height: 1.6;
}
.footer-right a {
color: rgba(255,255,255,0.90);
}
/* INNER PAGES */
.inner-page {
background-color: #f5f2ee;
min-height: 100vh;
}
.inner-hero {
background: linear-gradient(180deg, #2f2a2a 0%, #231f1f 100%);
color: white;
padding: 74px 30px;
}
.inner-hero-content {
max-width: 1100px;
margin: 0 auto;
}
.breadcrumb {
margin: 0 0 14px;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
color: rgba(255,255,255,0.72);
}
.inner-hero h2 {
margin: 0 0 14px;
font-size: 44px;
}
.inner-intro {
margin: 0;
max-width: 760px;
font-size: 18px;
line-height: 1.6;
color: rgba(255,255,255,0.82);
}
.inner-content {
max-width: 1100px;
margin: 0 auto;
padding: 60px 30px 90px;
}
.profile-grid,
.service-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.profile-card {
background-color: white;
border-radius: 18px;
padding: 30px;
box-shadow: 0 12px 24px rgba(0,0,0,0.07);
}
.profile-card h3 {
margin-top: 0;
margin-bottom: 14px;
}
.profile-card p {
margin: 0;
line-height: 1.7;
color: #444;
}
.avatar-circle.large {
width: 72px;
height: 72px;
margin-bottom: 18px;
}
.detail-list {
margin: 0;
padding-left: 20px;
line-height: 1.9;
color: #444;
}
.gallery-placeholder {
margin-top: 30px;
background-color: #e4e7ea;
border-radius: 18px;
padding: 34px;
text-align: center;
}
.gallery-placeholder h3 {
margin-top: 0;
}
.back-link-wrap {
margin-top: 30px;
}
.inner-footer {
margin-top: 0;
}
/* STUDIO */
.team-column {
width: 320px;
display: flex;
flex-direction: column;
gap: 14px;
}
.profile-cta {
display: inline-flex;
margin-top: 18px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #e10600;
}
.curriculum-box {
display: flex;
align-items: center;
justify-content: center;
min-height: 58px;
background: #2f2a2a;
color: #ffffff;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.9px;
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
.curriculum-box:hover {
background: #1f1b1b;
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(0,0,0,0.12);
}
.studio-card {
max-width: 1120px;
margin: 0 auto;
background: #ffffff;
border-radius: 24px;
padding: 34px;
display: grid;
grid-template-columns: 220px 1fr;
gap: 34px;
align-items: center;
box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}
.studio-visual {
display: flex;
justify-content: center;
align-items: center;
}
.studio-avatar-group {
display: flex;
flex-direction: column;
gap: 22px;
align-items: center;
}
.large-avatar {
width: 92px;
height: 92px;
margin: 0;
border: 2px solid #2d2828;
background: linear-gradient(180deg, #f5f2ee 0%, #ece7e2 100%);
}
.studio-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.studio-person {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
align-items: center;
}
.studio-name-block h3 {
margin: 6px 0 0;
font-size: 28px;
color: #1f1b19;
}
.studio-quote {
margin: 0;
color: #5c5551;
font-size: 17px;
line-height: 1.7;
}
.studio-divider {
width: 100%;
height: 1px;
background: rgba(31, 27, 25, 0.10);
}
.curriculum-studio-box {
max-width: 1120px;
margin: 18px auto 0;
min-height: 68px;
border-radius: 18px;
background: #2f2a2a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.curriculum-studio-box:hover {
background: #1f1b1b;
transform: translateY(-2px);
box-shadow: 0 18px 30px rgba(0,0,0,0.12);
}
/* MAPPA FOTO CLICCABILE */
.contact-map-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px 30px;
}
.map-card-box {
background: #ffffff;
border-radius: 24px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
padding: 26px;
display: grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items: center;
}
.map-card-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.map-label {
display: inline-block;
margin-bottom: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #7a726d;
}
.map-card-info h3 {
margin: 0 0 14px;
font-size: 28px;
color: #1f1b19;
}
.map-card-info p {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.6;
color: #5a534f;
}
.map-open-link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 18px;
padding: 13px 20px;
border-radius: 12px;
background: #e10600;
color: #ffffff;
font-size: 14px;
font-weight: 700;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.map-open-link:hover {
background: #c90500;
transform: translateY(-2px);
}
.map-card-preview {
display: block;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.map-card-preview:hover {
transform: translateY(-3px);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}
.map-preview-image {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 900px) {
.map-card-box {
grid-template-columns: 1fr;
gap: 22px;
}
.map-card-info h3 {
font-size: 24px;
}
}
@media (max-width: 640px) {
.contact-map-section {
padding: 0 20px 20px;
}
.map-card-box {
padding: 20px;
border-radius: 18px;
}
.map-card-info h3 {
font-size: 22px;
}
.map-card-info p {
font-size: 16px;
}
.map-card-preview {
border-radius: 16px;
}
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.refined-services {
grid-template-columns: repeat(2, 1fr);
}
.process-grid,
.refined-contacts,
.refined-why,
.target-grid {
grid-template-columns: repeat(2, 1fr);
}
.refined-sede-grid,
.landing-grid {
grid-template-columns: 1fr;
}
.refined-text h1 {
font-size: 126px;
}
}
@media (max-width: 900px) {
.site-header {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.desktop-nav {
gap: 18px;
}
.refined-hero {
height: 560px;
}
.refined-hero-text {
left: 30px;
right: 30px;
bottom: 34px;
}
.refined-hero-text h2 {
font-size: 42px;
}
.profile-grid,
.service-detail-grid {
grid-template-columns: 1fr;
}
.refined-landing-content {
padding: 42px 28px;
}
.architect-frame {
max-width: 400px;
height: 440px;
}
.house-roof-left {
width: 118px;
height: 118px;
top: 105px;
left: 88px;
}
.house-roof-right {
width: 118px;
height: 118px;
top: 105px;
right: 88px;
}
.house-volume {
width: 180px;
height: 122px;
left: 110px;
top: 192px;
}
.house-inner-wall {
width: 60px;
height: 95px;
left: 220px;
top: 202px;
}
.house-door {
width: 34px;
height: 62px;
left: 140px;
top: 252px;
}
.house-window {
width: 42px;
height: 42px;
left: 225px;
top: 228px;
}
.house-base {
width: 220px;
left: 90px;
top: 316px;
}
.house-detail-line {
width: 100px;
left: 150px;
top: 338px;
}
.studio-card {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px;
}
.studio-person {
grid-template-columns: 1fr;
gap: 12px;
}
.studio-name-block h3 {
font-size: 24px;
}
.studio-quote {
font-size: 16px;
}
}
@media (max-width: 640px) {
.refined-entry {
padding: 18px;
}
.refined-landing-content {
min-height: auto;
border-radius: 20px;
padding: 34px 22px;
}
.refined-text h1 {
font-size: 84px;
letter-spacing: -2px;
}
.refined-text p {
font-size: 20px;
}
.landing-actions {
align-items: flex-start;
flex-direction: column;
}
.architect-frame {
height: 340px;
}
.house-roof-left {
width: 92px;
height: 92px;
top: 82px;
left: 72px;
}
.house-roof-right {
width: 92px;
height: 92px;
top: 82px;
right: 72px;
}
.house-volume {
width: 142px;
height: 96px;
left: 99px;
top: 155px;
}
.house-inner-wall {
width: 42px;
height: 76px;
left: 188px;
top: 163px;
}
.house-door {
width: 26px;
height: 50px;
left: 120px;
top: 201px;
}
.house-window {
width: 32px;
height: 32px;
left: 192px;
top: 183px;
}
.house-base {
width: 170px;
left: 84px;
top: 252px;
}
.house-detail-line {
width: 72px;
left: 132px;
top: 272px;
}
.refined-section,
.processo,
.preventivo-section {
padding: 64px 20px;
}
.refined-services,
.process-grid,
.refined-contacts,
.refined-why,
.target-grid {
grid-template-columns: 1fr;
}
.refined-hero {
height: 520px;
}
.refined-hero-text h2 {
font-size: 34px;
}
.refined-hero-text p {
font-size: 16px;
}
.logo-link h1 {
font-size: 42px;
}
.logo-link p {
font-size: 10px;
}
.refined-footer,
.site-footer {
flex-direction: column;
padding: 34px 20px;
}
.inner-hero h2 {
font-size: 34px;
}
.inner-intro {
font-size: 16px;
}
.inner-content {
padding: 44px 20px 70px;
}
.preventivo-wrap {
padding: 28px 22px;
}
.preventivo-text h2 {
font-size: 28px;
}
.team-column {
width: 100%;
max-width: 320px;
}
.studio-card {
padding: 22px;
border-radius: 18px;
}
.studio-avatar-group {
gap: 16px;
}
.large-avatar {
width: 76px;
height: 76px;
}
.curriculum-studio-box {
min-height: 60px;
font-size: 13px;
letter-spacing: 0.9px;
border-radius: 14px;
}
.contact-map-section {
padding: 0 20px 10px;
}
.map-image-link {
border-radius: 18px;
}
}
.map-card-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.map-card-preview {
flex: 0 0 420px;
border-radius: 20px;
overflow: hidden;
}
.map-preview-image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 20px;
}
@media (max-width: 768px) {
.map-card-box {
flex-direction: column;
align-items: flex-start;
}
.map-card-preview {
width: 100%;
flex: none;
}
}
.studio-cards {
display: grid;
gap: 24px;
margin-top: 40px;
}
.studio-cards {
display: grid;
gap: 24px;
margin-top: 40px;
width: 100%;
}
.studio-card {
width: 100%;
background: #f5f3ef;
border: 1px solid rgba(20, 20, 20, 0.08);
border-radius: 24px;
padding: 28px 32px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
display: grid;
grid-template-columns: 240px 1fr;
column-gap: 32px;
align-items: center;
}
.studio-card-left {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.studio-card-left .member-role {
margin: 0;
}
.studio-card-left h3 {
margin: 0;
}
.studio-card-text {
margin: 0;
max-width: 100%;
align-self: center;
}
@media (max-width: 768px) {
.studio-card {
grid-template-columns: 1fr;
row-gap: 12px;
padding: 24px;
border-radius: 20px;
}
}
.image-frame {
overflow: hidden;
position: relative;
}
.landing-cover-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
body.landing-body {
min-height: 100dvh;
overflow: hidden;
background: var(--bg);
color: var(--text);
font-family: 'Inter', sans-serif;
}
.centered-entry-page {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 20px;
}
.centered-entry-content {
width: 100%;
display: flex;
justify-content: center;
}
.landing-center-wrap {
width: min(760px, 100%);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.centered-eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.78rem;
font-weight: 800;
color: var(--muted);
}
.landing-center-wrap h1 {
margin: 0;
font-size: clamp(3rem, 8vw, 5.5rem);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--text);
}
.landing-center-wrap p {
margin: 0;
max-width: 62ch;
font-size: 1.08rem;
line-height: 1.6;
color: var(--muted);
}
.centered-actions {
margin-top: 10px;
}
.centered-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 20px;
border-radius: 999px;
font-weight: 700;
background: var(--accent);
color: #fff;
border: 1px solid transparent;
transition: 0.2s ease;
}
.centered-chip:hover {
background: var(--accent-dark);
}
.centered-note {
font-size: 0.95rem;
color: var(--muted);
}
@media (max-width: 640px) {
.centered-entry-page {
padding: 24px 16px;
}
.landing-center-wrap {
gap: 16px;
}
.landing-center-wrap p {
font-size: 1rem;
}
}