:root{
  --oliva-950:#2E2D20;
  --oliva-800:#3D3C2A;
  --oliva-700:#5B5A47;
  --oliva-400:#8C8A6E;
  --crema:#F4F0E6;
  --crema-card:#EAE6D8;
  --crema-deep:#E4DFCF;
  --ink:#232019;
  --hueso:#FAF8F2;
  --rule: rgba(35,32,25,0.14);
  --rule-light: rgba(35,32,25,0.22);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--crema);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
.serif{font-family:'Manrope', sans-serif; font-weight:600; letter-spacing:-0.01em;}
.eyebrow{
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:700; color:var(--oliva-700);
}
@media (max-width: 760px){ .wrap{padding:0 22px;} }
@media (max-width: 480px){ .wrap{padding:0 18px;} }

/* ---------- NAV ---------- */
.logo img {
    width: 112px;
    height: auto;
    display: block;
}

header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
/* the solid background + blur live on a ::before instead of directly on <header>:
   backdrop-filter on the header itself would make it a "containing block" for any
   position:fixed descendant (like the mobile nav panel below), trapping that panel
   inside the header's own 78px-tall box instead of letting it cover the viewport. */
header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:transparent;
  transition:background .25s ease;
}
header.solid::before{
  background:rgba(244,240,230,0.92);
  backdrop-filter:blur(8px);
}
header.solid{
  border-bottom:1px solid var(--rule);
}
header .logo, header .nav-links a{color:var(--hueso);}
header .logo em{color:var(--crema-deep);}
header.solid .logo, header.solid .nav-links a{color:var(--ink);}
header.solid .logo em{color:var(--oliva-700);}
header .nav-links a::after{background:var(--hueso);}
header.solid .nav-links a::after{background:var(--oliva-950);}
header .btn{background:var(--hueso); color:var(--oliva-950); border-color:var(--hueso);}
header .btn:hover{background:transparent; color:var(--hueso);}
header.solid .btn{background:#5B5A47; color:var(--hueso); border-color:var(--oliva-950);}
header.solid .btn:hover{background:transparent; color:var(--oliva-950);}
/* the mobile nav panel always sits on a light (crema) background, open or not,
   so its links stay dark regardless of whether the header itself is scrolled/solid yet */
@media (max-width:700px){
  header .nav-links a{color:var(--ink);}
  header .nav-links a::after{background:var(--oliva-950);}
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{
  font-family:'Manrope', sans-serif; font-weight:800; font-size:21px;
  letter-spacing:0.01em;
}
.logo em{font-style:italic; font-weight:500; color:var(--oliva-700);}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{
  font-size:14px; font-weight:600; color:var(--oliva-700);
  position:relative; padding:4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--oliva-950); transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--oliva-950); color:var(--hueso);
  padding:12px 22px; border-radius:100px;
  font-size:14px; font-weight:700; letter-spacing:0.01em;
  border:1px solid var(--oliva-950);
  transition:background .2s ease, color .2s ease;
}
.btn:hover{background:transparent; color:var(--oliva-950);}
.nav-right{display:flex; align-items:center; gap:14px;}

/* mobile menu toggle — header is always solid now, so this always resolves to the
   dark (header.solid) variant; base rules kept as a fallback. */
.menu-toggle{
  display:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--hueso); background:transparent;
  align-items:center; justify-content:center; cursor:pointer;
  flex-shrink:0; position:relative; z-index:70;
  transition:border-color .2s ease;
}
.menu-toggle .bar{
  display:block; width:16px; height:1.5px; background:var(--hueso);
  position:relative; transition:transform .25s ease, opacity .25s ease, background .2s ease;
}
.menu-toggle .bar::before, .menu-toggle .bar::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--hueso);
  transition:transform .25s ease, top .25s ease, opacity .25s ease, background .2s ease;
}
.menu-toggle .bar::before{top:-5px;}
.menu-toggle .bar::after{top:5px;}
header.solid .menu-toggle, .menu-toggle[aria-expanded="true"]{border-color:var(--oliva-950);}
header.solid .menu-toggle .bar, .menu-toggle[aria-expanded="true"] .bar,
header.solid .menu-toggle .bar::before, .menu-toggle[aria-expanded="true"] .bar::before,
header.solid .menu-toggle .bar::after, .menu-toggle[aria-expanded="true"] .bar::after{
  background:var(--oliva-950);
}
.menu-toggle[aria-expanded="true"] .bar{background:transparent;}
.menu-toggle[aria-expanded="true"] .bar::before{top:0; transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bar::after{top:0; transform:rotate(-45deg);}

/* narrower desktop / laptop windows: keep the full inline nav (as in the original
   design) but tighten spacing instead of collapsing to a menu too early */
@media (max-width:820px) and (min-width:701px){
  .nav-links{gap:18px;}
  .nav-links a{font-size:13px;}
  .nav-right .btn{padding:10px 16px; font-size:13px;}
}

@media (max-width: 700px){
  .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    position:fixed; inset:78px 0 0 0; z-index:60;
    background:var(--crema); padding:34px 22px;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-links a{
    width:100%; padding:16px 4px; font-size:20px; color:var(--ink);
    border-bottom:1px solid var(--rule);
  }
  .nav-links a::after{display:none;}
  .menu-toggle{display:flex;}
}

/* ---------- HERO ---------- */
.hero{padding:96px 0 60px; position:relative; overflow:hidden;}
.hero-grid{
  display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:center;
}
.hero h1{
  font-family:'Manrope', sans-serif;
  font-size:clamp(48px, 6.4vw, 92px);
  font-weight:800; line-height:0.98; letter-spacing:-0.02em;
  margin:18px 0 26px;
}
.hero h1 em{font-style:italic; font-weight:500; color:var(--oliva-700);}
.hero p.lede{
  font-size:18px; color:var(--oliva-700); max-width:480px; line-height:1.6;
}
.hero-cta{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
.btn.dark{background:#5B5A47; color:var(--hueso);}
.btn.outline{
  background:transparent; color:var(--oliva-950); border:1px solid var(--oliva-950);
}
.btn.outline:hover{background:var(--oliva-950); color:var(--hueso);}

.hero-media{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:1/1; background: var(--crema-deep);
  border:1px solid var(--rule);
}
.hero-media::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(35,32,25,0.05) 0 2px, transparent 2px 34px);
}
.hero-media .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero-media .tag{
  position:absolute; left:20px; bottom:20px;
  color:var(--oliva-950); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:700;
  display:flex; align-items:center; gap:10px;
  background:var(--hueso); padding:8px 14px; border-radius:100px;
}
.hero-media .tag .dot{width:6px; height:6px; border-radius:50%; background:var(--oliva-950);}
.hero-media .plan-label{
  position:absolute; top:20px; right:20px; color:var(--oliva-950);
  font-family:'Manrope', sans-serif; font-style:italic; font-weight:500; font-size:14px;
  background:var(--hueso); padding:6px 14px; border-radius:100px;
}
.hero-nums{
  position:absolute; right:40px; bottom:96px;
  font-size:13px; color:var(--oliva-700); letter-spacing:0.05em; font-weight:600;
  display:flex; align-items:center; gap:10px;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{aspect-ratio:1/1; order:-1;}
  .hero-nums{display:none;}
}
@media (max-width:420px){
  .hero-cta{flex-direction:column; width:100%;}
  .hero-cta .btn{width:100%; justify-content:center;}
}

/* ---------- INFO BAR (below hero) ---------- */
.info-bar{
  border-top:1px solid var(--rule); padding:34px 0;
}
.info-bar .wrap{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;
}
.info-bar .eyebrow{white-space:nowrap;}
@media (max-width:420px){ .info-bar .eyebrow{white-space:normal;} }
.info-bar p{
  max-width:460px; font-size:14px; color:var(--oliva-700); line-height:1.65; text-align:right;
}
@media (max-width:700px){ .info-bar p{text-align:left;} .info-bar .wrap{flex-direction:column;} }

/* ---------- LOGO STRIP ---------- */
.logos{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:44px 0;
}
.logos-head{text-align:center; margin-bottom:30px;}
.logos-head p{
  font-family:'Manrope', sans-serif; font-style:italic; font-weight:500; font-size:19px; color:var(--oliva-700);
  margin-top:8px;
}
/* carrusel infinito: el track tiene los logos duplicados y se desplaza -50% */
.logos-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos-track{
  display:flex; align-items:center; width:max-content;
  animation:logos-scroll 45s linear infinite;
}
.logos-row:hover .logos-track{animation-play-state:paused;}
/* altura por logo vía --h (en el HTML), compensada según proporción */
.logos-track img{
  display:block; flex:none; width:auto;
  height:calc(var(--h, 40) * 1px);
  margin-right:64px; /* margen en vez de gap: así el -50% del loop es exacto */
  opacity:0.85; transition:opacity .2s ease;
}
.logos-track img:hover{opacity:1;}
@keyframes logos-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:560px){
  .logos-track{animation-duration:32s;}
  .logos-track img{height:calc(var(--h, 40) * 0.75px); margin-right:40px;}
}
@media (prefers-reduced-motion: reduce){
  .logos-row{-webkit-mask-image:none; mask-image:none;}
  .logos-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:28px;}
  .logos-track img{margin:0 26px;}
  .logos-track img[aria-hidden="true"]{display:none;}
}

/* ---------- SECTION HELPERS ---------- */
section{padding:110px 0;}
section.tight{padding:80px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{
  font-family:'Manrope', sans-serif;
  font-size:clamp(32px, 4vw, 46px); font-weight:800; letter-spacing:-0.02em;
  margin-top:10px; max-width:560px;
}
.section-head h2 em{font-style:italic; font-weight:500; color:var(--oliva-700);}
.section-head .side-copy{max-width:340px; font-size:15px; color:var(--oliva-700); line-height:1.6;}
@media (max-width:760px){
  section{padding:72px 0;}
  section.tight{padding:56px 0;}
  .section-head{margin-bottom:38px;}
  .section-head .side-copy{max-width:100%;}
}

/* ---------- QUIENES SOMOS + SELLO ---------- */
.about{background:var(--crema-card); position:relative; border-radius:26px; margin:0 40px; padding:90px 60px;}
@media (max-width: 760px){ .about{margin:0 22px; padding:60px 28px;} }
@media (max-width: 480px){ .about{margin:0 14px; padding:44px 20px;} }
.about-grid{
  display:grid; grid-template-columns:1fr 300px; gap:70px; align-items:center;
}
.about p.body-copy{
  font-family:'Manrope', sans-serif; font-size:clamp(22px, 2.4vw, 30px);
  font-weight:500; line-height:1.5; letter-spacing:-0.005em; color:var(--ink);
}
.about p.body-copy em{font-style:italic; font-weight:600; color:var(--oliva-950);}

/* team horizontal strip */
.team-section{margin-top:64px;}
.team-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:20px;
}
.team-arrows{display:flex; gap:10px;}
.team-arrow{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--oliva-950);
  background:transparent; color:var(--oliva-950); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.team-arrow:hover{background:var(--oliva-950); color:var(--hueso);}
.team-strip{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
}
.team-strip::-webkit-scrollbar{display:none;}
.team-card{
  flex:0 0 auto; width:252px; scroll-snap-align:start;    /*  width:168px  */
  background:var(--hueso); border:1px solid var(--rule); border-radius:14px;
  padding:22px 16px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.team-card .avatar{
  width:200px; height:200px; border-radius:50%; background:var(--crema-card);
 /*  width:52px; height:52px; border-radius:50%; background:var(--crema-card);  */
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope', sans-serif; font-weight:700; font-size:16px; color:var(--oliva-950);
  margin-bottom:14px; border:1px solid var(--rule);
}
.team-card .avatar img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; object-position:center;
}
.team-card .t-name{font-family:'Manrope', sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:4px; line-height:1.3;}
.team-card .t-role{font-size:11px; color:var(--oliva-700); font-style:italic; line-height:1.4;}

.stamp{
  width:220px; height:220px; margin:0 auto; position:relative;
  animation:spin 34s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .stamp{animation:none;} }
.stamp svg{width:100%; height:100%;}
.stamp-ring{fill:none; stroke:var(--oliva-950); stroke-width:1; opacity:0.35;}
.stamp-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
}
.stamp-center .num{font-family:'Manrope', sans-serif; font-size:38px; font-style:italic; font-weight:700; color:var(--oliva-950);}
.stamp-center .lbl{font-size:10px; letter-spacing:0.12em; color:var(--oliva-700); margin-top:2px; font-weight:700;}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- QUIENES SOMOS · versión invertida (fondo oscuro) ---------- */
.about{background:#5B5A47;}
.about .eyebrow{color:#eae6d8;}
.about p.body-copy,
.about p.body-copy em{color:#eae6d8;}
.stamp text{fill:#eae6d8;}
.stamp-ring{stroke:#eae6d8;}
.stamp-center .num,
.stamp-center .lbl{color:#eae6d8;}
.team-arrow{border-color:#eae6d8; color:#eae6d8;}
.team-arrow:hover{background:#eae6d8; color:#232019;}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr; text-align:center; gap:44px;}
  .team-head{flex-direction:row;}
  .stamp{width:170px; height:170px;}
}
@media (max-width:480px){
  .stamp{width:140px; height:140px;}
  .stamp-center .num{font-size:30px;}
}

/* ---------- SERVICIOS ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;   /* era repeat(4, 1fr) */
  background:var(--rule); border:1px solid var(--rule); border-radius:16px; overflow:hidden;
}
.service-card{
  background:var(--crema-card); padding:34px 28px; min-height:260px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .2s ease;
}
.service-card:hover{background:var(--hueso);}
.service-card .idx{font-family:'Manrope', sans-serif; font-style:italic; font-weight:600; color:var(--oliva-400); font-size:14px;}
.service-card h3{font-family:'Manrope', sans-serif; font-size:21px; font-weight:700; margin:26px 0 12px;}
.service-card p{font-size:14px; color:var(--oliva-700); line-height:1.6;}
/*  @media (max-width:960px){ .services-grid{grid-template-columns:repeat(2, 1fr);} }  */
@media (max-width:560px){ .services-grid{grid-template-columns:1fr;} .service-card{min-height:auto; padding:28px 22px;} }

/* ---------- COMO TRABAJAMOS ---------- */
.process{background:var(--crema-card); border-radius:22px; padding:60px;}
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:36px; margin-top:8px;
}
.process-step .num{
  font-family:'Manrope', sans-serif; font-style:italic; font-weight:700; font-size:15px; color:var(--oliva-950);
}
.process-step h4{font-family:'Manrope', sans-serif; font-size:20px; font-weight:700; margin:14px 0 12px;}
.process-step p{font-size:14px; color:var(--oliva-700); line-height:1.65;}
.process-step{border-top:2px solid var(--oliva-950); padding-top:20px;}
@media (max-width:900px){ .process{padding:36px 24px;} .process-grid{grid-template-columns:1fr 1fr; row-gap:44px;} }
@media (max-width:560px){ .process-grid{grid-template-columns:1fr; row-gap:32px;} .process{padding:32px 20px; border-radius:18px;} }

/* ---------- PROCESO · versión invertida (fondo oscuro) ---------- */
.process{background:#5B5A47;}
.process-step{border-top-color:#eae6d8;}
.process-step .num,
.process-step h4,
.process-step p{color:#eae6d8;}

/* ---------- PROYECTOS (slider de flip cards) ---------- */
.projects-slider-wrap{position:relative;}
.projects-slider{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; scrollbar-width:none;
}
.projects-slider::-webkit-scrollbar{display:none;}
.flip-card{
  flex:0 0 auto; width:280px; aspect-ratio:3/4; perspective:1400px; cursor:pointer;
  scroll-snap-align:start;
}
@media (max-width:640px){ .flip-card{width:74vw;} }
@media (max-width:400px){ .flip-card{width:80vw;} }
.slider-arrows{display:flex; gap:10px;}
.slider-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--oliva-950);
  background:transparent; color:var(--oliva-950); font-size:18px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.slider-arrow:hover{background:var(--oliva-950); color:var(--hueso);}
.flip-card.pending .flip-front{background:var(--crema-deep); color:var(--oliva-950); justify-content:center; align-items:center; text-align:center;}
.flip-card.pending .flip-front h3{font-size:20px;}
.flip-card.pending .flip-back{background:var(--crema-deep);}
.flip-inner{
  position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-front, .flip-back{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:16px;
  padding:26px; display:flex; flex-direction:column; justify-content:flex-end;
}
.flip-front{
  background: var(--oliva-950);
  color:var(--hueso);
}
.flip-card.has-img .flip-front{
  background:
    linear-gradient(180deg, rgba(46,45,32,0.05) 0%, rgba(46,45,32,0.15) 45%, rgba(46,45,32,0.92) 100%),
    var(--proj-img) center/cover no-repeat;
}
.flip-front .p-tag{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--oliva-400); margin-bottom:6px;}
.flip-front h3{font-family:'Manrope', sans-serif; font-weight:700; font-size:25px;}
.flip-front .hint{
  position:absolute; top:20px; right:20px; font-size:11px; color:var(--hueso); font-weight:600;
  border:1px solid var(--rule-light); border-radius:100px; padding:5px 12px;
}
.flip-back{
  background:var(--crema-card); color:var(--ink); transform:rotateY(180deg);
  justify-content:flex-start;
}
.flip-back .p-tag{font-size:12px; color:var(--oliva-700); font-weight:700; letter-spacing:0.04em; margin-bottom:14px;}
.flip-back h3{font-family:'Manrope', sans-serif; font-size:22px; font-weight:800; margin-bottom:14px;}
.flip-back p{font-size:14px; line-height:1.65; color:var(--oliva-700);}

/* ---------- CONTACTO ---------- */
.contact-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; text-align:left;
  margin-top:44px;
}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }

.contact-form{display:flex; flex-direction:column; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.contact-form label{
  font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--oliva-700); margin-bottom:6px; display:block;
}
.contact-form input, .contact-form textarea{
  width:100%; background:var(--hueso); border:1px solid var(--rule-light);
  border-radius:10px; padding:13px 14px; font-family:'Manrope', sans-serif;
  font-size:15px; color:var(--ink); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--oliva-950);
}
.contact-form button{
  align-self:flex-start; margin-top:6px; border:none; cursor:pointer;
  font-family:'Manrope', sans-serif;
}
@media (max-width:520px){ .contact-form button{align-self:stretch; justify-content:center;} }

.contact-info{display:flex; flex-direction:column; gap:22px;}
.contact-info .info-item{
  display:flex; align-items:center; gap:14px;
}
.contact-info .icon-bubble{
  width:44px; height:44px; border-radius:50%; background:var(--hueso);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid var(--rule-light);
}
.contact-info .icon-bubble svg{width:19px; height:19px; stroke:var(--oliva-950); color:var(--oliva-950);}
.contact-info .info-item a{font-size:15px; font-weight:600; color:var(--ink); word-break:break-word;}
.contact-info .info-item span.lbl{
  display:block; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--oliva-700); font-weight:700; margin-bottom:2px;
}
.contact{
  background:var(--crema-card); border-radius:26px;
  padding:70px 60px; text-align:left; position:relative; overflow:hidden;
  border:1px solid var(--rule);
}
@media (max-width:640px){ .contact{padding:44px 26px;} }
@media (max-width:480px){ .contact{padding:36px 20px; border-radius:20px;} }
.contact-top{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
.contact-sketch{margin:0;}
.contact-sketch img{width:100%; height:auto; display:block;}
@media (max-width:820px){
  .contact-top{grid-template-columns:1fr; gap:28px;}
  .contact-sketch{max-width:420px;}
}
.contact h2{
  font-family:'Manrope', sans-serif; font-weight:800; font-size:clamp(30px,4.4vw,48px);
  max-width:640px; margin:16px 0 18px; line-height:1.1; letter-spacing:-0.02em;
}
.contact h2 em{font-style:italic; font-weight:500; color:var(--oliva-700);}
.contact > .wrap-inner-p, .contact p.lede-contact{max-width:520px; color:var(--oliva-700); line-height:1.65; font-size:15px;}

footer{padding:50px 0 70px;}
.foot-grid{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  border-top:1px solid var(--rule); padding-top:30px;
}
.foot-grid .logo{font-size:19px;}
.foot-links{display:flex; gap:26px; font-size:13px; color:var(--oliva-700); font-weight:600;}
.foot-note{font-size:12px; color:var(--oliva-400);}
@media (max-width:600px){
  .foot-grid{flex-direction:column; align-items:flex-start; gap:18px;}
  .foot-links{flex-wrap:wrap; gap:16px 22px;}
}